Implante o aplicativo Angular no Firebase com ações do Github

3 de março de 2021 Off Por sudoroot

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:

Criar fluxo de trabalho de ações no Github

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.

  1. 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
    
  2. 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:
    
  3. 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/*
    
  4. 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
    
  5. 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
    
  6. 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.

Ação do Github implantada nas funções do firebase com sucesso

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.