Este conjunto de instruções ajuda a configurar o Github Actions para construir um projeto Angular e implantar no Firebase hosting on push event. Mesmo você pode consultar este tutorial para construir qualquer aplicativo node.js e implantar no firebase.
As ações do Github permitem automatizar, personalizar e executar seus fluxos de trabalho de desenvolvimento de software diretamente em seu repositório. É a melhor maneira de criar e manter um ciclo de vida de Integração / Implantação Contínua (CI / CD) para seu aplicativo.
Presumimos que você já tenha enviado seu aplicativo para o repositório Github. Vamos começar com a configuração das ações do Github.
Etapa 1 – Criar ação no Github
Faça login em sua conta Github e acesse seu repositório. Em seu repositório, clique na guia Ações e , em seguida, clique no link “ configurar um fluxo de trabalho você mesmo ”.
Veja a captura de tela abaixo para referência:
Etapa 2 – Criar um fluxo de trabalho
Depois de clicar no link do fluxo de trabalho setp, será editado um novo arquivo “.github / workflows / main.yml” no repositório. Que contém alguma configuração padrão para o fluxo de trabalho.
Você verá o arquivo recém-criado, mais ou menos assim:
empregos:
# Este fluxo de trabalho contém um único trabalho chamado "build"
Construir:
# O tipo de executor em que o trabalho será executado
roda em: ubuntu-mais recente
# As etapas representam uma sequência de tarefas que serão executadas como parte do trabalho
degraus:
# Faz o check-out de seu repositório em $ GITHUB_WORKSPACE, para que seu trabalho possa acessá-lo
- usa: ações / checkout @ v2
# Executa um único comando usando o shell do runners
- name: executa um script de uma linha
run: echo Hello, world!
# Executa um conjunto de comandos usando o shell runners
- name: executa um script de várias linhas
correr: |
echo Adicionar outras ações para construir,
teste de eco e implante seu projeto.
Etapa 3 – Personalize seu fluxo de trabalho
Agora, iremos personalizar o arquivo de configuração do fluxo de trabalho com base em nossos requisitos. Nesta etapa, detalhamos a configuração passo a passo para que você entenda. Mesmo você pode pular esta etapa, já que o arquivo de configuração completo é fornecido nas próximas etapas.
- Definir o nome do fluxo de trabalho – esta é uma etapa opcional, mas você pode dar um nome ao seu fluxo de trabalho.
nome: deploy_to_firebase_hosting
- Personalizar o nome do trabalho – Todos os trabalhos são definidos nas seções “trabalhos:”. Primeiro, alteramos o nome do job padrão build para firebase-deploy. Você pode alterar isso para qualquer nome conforme adequado para você.
empregos: firebase-deploy:
- Personalizar gatilho – os gatilhos de fluxo de trabalho padrão em cada envio para qualquer ramificação. Você pode precisar limitar isso a ramos específicos.
Por exemplo, habilite o gatilho do fluxo de trabalho apenas no push to main ou release / * branches:
sobre: Empurre: galhos: - a Principal - lançamento/* - Atualizar ação de checkout – O fluxo de trabalho padrão usa actions / checkout @ v2 , que é a versão mais recente. Portanto, não há necessidade de fazer alterações aqui, mas você ainda pode alterar isso para a maioria das ações atuais / checkout @ master.
- usa: ações / checkout @ v2
- Personalize o gatilho de compilação do node.js – Agora, defina a versão do Node.js e os comandos de compilação para seu aplicativo Angular. Por exemplo, estamos usando a versão Node.js 12.x para construir este aplicativo.
degraus: - usa: ações / checkout @ v2 - usa: ações / nó de configuração @ master com: versão do nó: '12 .x ' - run: npm install - run: npm run build: prod - Implantar no Firebase – a última etapa é implantar seu aplicativo nas funções do Firebase.
degraus: - usa: ações / checkout @ v2 - usa: ações / nó de configuração @ master com: versão do nó: '12 .x ' - run: npm install - run: npm run build: prod - usa: w9jds / firebase -action @ master com: args: deploy --only hosting env: FIREBASE_TOKEN: $ {{secrets.FIREBASE_TOKEN}}De acordo com a configuração acima, a implantação será feita apenas no Firebase hosting. Você pode até alterar o valor de args para “
deploy --only function” para implantar funções do Firbase.
Agora clique em Start commit no lado direito para comprometer seu novo workflow.
Etapa 4 – configurar o token do Firebase
O trabalho de implantação de ações do Github precisa de um FIREBASE_TOKEN para que a autenticação implante o código no Firebase. Você pode gerar um token usando ferramentas firebase cli em seu sistema.
Primeiro, instale firebase-tools usando npm.
npm i -g firebase-tools
Em seguida, execute o firebase login:cicomando no terminal:
firebase login:ci
Isso mostrará o link em seu terminal, abra este link no navegador da web e a autorização completa. Isso mostrará um token a ser usado para tarefas de CI.
Exemplo: firebase deploy --token "\$FIREBASE_TOKEN"
Como não é seguro manter este token no arquivo de configuração. Adicione este token aos segredos do Github.
No seu repositório Github, vá para Configurações> Segredos> Novo segredo do repositório :
Use FIREBASE_TOKEN como nome e insira o código secreto na seção de valor . Em seguida, clique no botão Adicionar segredo.
Etapa 5 – Configuração final do fluxo de trabalho
Seu arquivo de configuração de fluxo de trabalho final deve ser parecido com isto no editor de texto:
arquivo: .github / workflow / main.yml
nome: deploy_to_firebase_hosting
sobre:
Empurre:
galhos:
- mestre
- lançamento/*
empregos:
firebase-deploy:
roda em: ubuntu-mais recente
degraus:
- usa: ações / checkout @ v2
- usa: ações / nó de configuração @ master
com:
versão do nó: '12 .x '
- run: npm install
- run: npm run build: prod
- usa: w9jds / firebase -action @ master
com:
args: deploy --only hosting
env:
FIREBASE_TOKEN: $ {{secrets.FIREBASE_TOKEN}}
Agora você pode enviar o arquivo de configuração do fluxo de trabalho para o seu repositório. Este fluxo de trabalho é adicionado a .github / workflows / main.yml. Você pode alterar o nome do campo main.yml de sua escolha com a extensão .yml.
Em seguida, vá em frente e envie algumas alterações para seu repositório Github. Isso irá cansar a ação do Github e realizar as etapas definidas no fluxo de trabalho.
Conclusão
Neste tutorial, você aprendeu a construir um projeto Angular usando ações do Github e implantá-lo no Firebase hosting.
Você também pode visitar a documentação de ações do Github para obter mais detalhes.