Implante um aplicativo React no Firebase com ações do GitHub

A implantação de aplicativos da Web no Firebase Hosting pode ser um aborrecimento. No entanto, usando as ações do GitHub, você pode simplificar e agilizar o processo de implantação e fazer é incrivelmente fácil gerenciar fluxos de trabalho de implantação durante toda a vida útil de um software projeto.

Com apenas algumas etapas simples, você pode configurar um fluxo de trabalho de implantação para automatizar o processo. Isso inclui o rastreamento de novas alterações nas ramificações e o registro de quaisquer erros. Continue lendo para saber como implantar um aplicativo React no serviço de hospedagem do Firebase.

O que é um pipeline de CI/CD?

Um pipeline CI/CD (Integração Contínua/Entrega Contínua) é um conjunto de processos automatizados implementados para possibilitar a construção, teste e implantação contínuas de aplicativos.

Simplificando, um pipeline de CI/CD é configurado para automatizar os processos envolvidos no ciclo de vida de desenvolvimento de software. Isso incluirá o desenvolvimento real, testes, versões (beta, alfa e versão final), correções de bugs e até atualizações de recursos. Essencialmente, esse processo possibilita o envio fácil e rápido de software de qualidade.

Um pipeline de CI/CD normalmente cobre alguns estágios, incluindo:

1. Estágio de origem: esta fase abrange o desenvolvimento e a manutenção reais do código do aplicativo com uma ferramenta de controle de versão como o Git.
2. Build Stage: Esta etapa monta o código-fonte com todas as suas dependências em um formato executável.
3. Etapa de teste: esta etapa incorpora testes automatizados para validar a qualidade do software. O objetivo final é detectar e corrigir quaisquer bugs. Você pode realizar diferentes tipos de testes nesta etapa e, uma vez que o código tenha passado nos testes, está pronto para ser implantado.
4. Implantação: esta etapa automatiza o processo de implantação no ambiente de produção.

O pipeline deve monitorar cada estágio para garantir que não haja bugs e para melhorar todo o processo para lançamentos futuros.

O que são ações do GitHub?

O GitHub Actions é um recurso fornecido pelo GitHub para automatizar os processos de fluxo de trabalho de implantação de software nos pipelines de CI/CD. Ele possibilita definir e automatizar fluxos de trabalho de implantação diretamente do repositório GitHub do seu projeto.

O GitHub Actions tem vários benefícios:

1. Fácil de usar: o GitHub Actions fornece uma interface amigável e uma sintaxe simples para configurar fluxos de trabalho de implantação. Você pode definir com facilidade e rapidez os fluxos de trabalho do seu projeto usando o editor embutido no GitHub.
2. Integração nativa: o GitHub Actions faz parte do GitHub, facilitando a configuração, o gerenciamento e a colaboração em fluxos de trabalho juntamente com o código do seu projeto.
3. Flexível e personalizável: o GitHub Actions fornece uma plataforma flexível e personalizável que garante que você possa criar fluxos de trabalho que atendam às suas necessidades específicas. Além disso, suporta várias linguagens de programação. Ou seja, você pode usá-lo com qualquer tecnologia que preferir.

Configurar um projeto Firebase e o cliente React

Para começar, acesse Firebase e faça login com sua conta do Google. Na página de visão geral do console, clique em Criar projeto para configurar um novo projeto e fornecer o nome do projeto.

Próximo, criar um aplicativo React e instale as ferramentas de linha de comando do Firebase:

npm install -g firebase-tools

Você pode encontrar o código deste projeto em seu Repositório GitHub.

Faça login no Firebase a partir do seu terminal usando as credenciais da sua conta do Firebase.

logon do firebase: ci

Isso acionará o fluxo de autenticação do Firebase, que solicitará que você insira seus detalhes de login, caso ainda não esteja conectado. Assim que o Firebase autenticar você, ele imprimirá um token. Copie este token; você o usará para executar comandos do Firebase na configuração do GitHub Actions.

Por fim, crie uma versão pronta para produção do seu aplicativo:

npm run build

Este comando gera os arquivos e recursos necessários, dentro de uma nova pasta 'build' no diretório raiz, necessários para implantar o aplicativo.

Inicialize o Firebase em seu aplicativo React

Execute este comando para inicializar o Firebase na pasta do seu projeto:

firebase init

Em seguida, confirme que deseja inicializar o Firebase em seu projeto e vá em frente e selecione Hospedagem: configure arquivos para Firebase Hosting e (opcionalmente) configure implantações de ação do GitHubna lista de opções.

Especifique que deseja usar um projeto existente e selecione o nome do projeto que você criou inicialmente no console do desenvolvedor do Firebase.

Em seguida, especifique a pasta 'build' como o público diretório, selecione Não para reescrever todos os URLs para a opção /index.html, selecione Não para a opção de configurar compilações e implantações automáticas do GitHub e, finalmente, selecione Sim para sobrescrever a opção de arquivo build/index.html.

Depois de fazer as alterações acima, a CLI criará um arquivo firebase.json no diretório raiz. Este arquivo contém toda a configuração de hospedagem que o fluxo de trabalho do GitHub Actions exigirá.

Por fim, antes de configurar o fluxo de trabalho do GitHub Actions, criar um repositório no GitHube envie os arquivos do projeto para ele.

Configurando ações do GitHub

No repositório do seu projeto no GitHub, selecione Configurações > Segredos e Variáveis > Ações. Na página secreta do repositório, digite FIREBASE_TOKEN como o nome do segredo e cole o token do Firebase que você copiou no segredos Campos.

Configurar o fluxo de trabalho de implantação

Clique na guia Ações no repositório do seu projeto e selecione Configurar Nodejs fluxo de trabalho no Integração contínua seção.

Em seguida, renomeie o nome do arquivo para firebase.yml, exclua o código clichê no editor e adicione o código abaixo:

# Este fluxo de trabalho realizará uma instalação limpa das dependências do nó,
# armazená-los/restaurá-los, construir o fonte codificar e executar testes em diferentes
# versões do nó
# Para mais informações, veja:
# https://docs.github.com/en/actions/automating-builds-and-tests
# /building-and-testing-nodejs
nome: Firebase CI
sobre:
 empurrar:
 filiais: [principal]
 pull_request:
 filiais: [principal]
empregos:
 construir:
 run-on: ubuntu-latest
 estratégia:
 matriz:
 versão do nó: [14.x]

 passos:
 - usa: ações/checkout@v2
 - nome: Use Node.js ${{ matrix.node-version }}
 usa: ações/nó-de-configuração@v1
 com:
 versão do nó: ${{ matriz.versão do nó }}
 - execute: npm install -g npm
 - nome: npm install, build e test
 executar: |
 npm instalar
 npm run build
 - nome: Compilação de arquivo
 usa: ações/upload-artifact@v2
 com:
 nome: construção
 caminho: construir

 implantar:
 nome: implantar
 necessidades: construir
 run-on: ubuntu-latest
 passos:
 - usa: ações/checkout@v2
 - nome: Baixar Build
 usa: ações/download-artifact@v2
 com:
 nome: construção
 caminho: construir
 - nome: implantar no Firebase
 usa: w9jds/firebase-action@master
 com:
 args: implantar --somente hospedagem
 ambiente:
 FIREBASE_TOKEN: ${{ segredos. FIREBASE_TOKEN }}

Aqui estão algumas das principais propriedades explicadas:

1. Sobre: eventos que acionam as ações neste fluxo de trabalho.
2. Empregos: Especifica as tarefas que uma Ação específica deve executar. Nesse caso, há duas tarefas: construir e implantar.
3. Corre em: a máquina na qual esta ação deve ser executada.
4. Passos: define uma sequência de etapas para a ação a ser executada para um determinado trabalho.
5. Com:Especifica quaisquer argumentos exigidos pelas ações a serem executadas.
6. Nome: Nome de uma etapa específica para um trabalho.

Finalmente, confirme as alterações feitas neste arquivo. O GitHub acionará automaticamente esse fluxo de trabalho, criando e implantando o aplicativo React no serviço de hospedagem do Firebase. Você pode verificar o URL ativo do aplicativo nos logs de implantação.

Implantando aplicativos usando ações do GitHub

O GitHub Actions fornece uma abordagem de implantação simplificada. Ele garante que você possa implantar aplicativos de forma consistente e confiável, independentemente da tecnologia em que os desenvolve.

Além disso, você pode personalizar facilmente o fluxo de trabalho de implantação usando as ferramentas de implantação incorporadas para atender às suas necessidades específicas de pipeline de CI/CD.