Como implantar no Firebase hosting com o CircleCI

Thiyagaraj T Segue Jul 13 · 4 min ler Hospedagem do Firebase com o CircleCI

É tão frustrante e demorado enviar seu código a cada pequena alteração. Ignore a execução de seus testes e comandos de criação e automatize facilmente seu fluxo de trabalho de criação usando CircleCI e host no Firebase com uma configuração simples.

Quem gosta do trabalho do macaco de implantar? Deixe o CircleCI fazer isso.?

Você ficará surpreso ao saber como é fácil e rápido hospedar um site no Firebase do Google e implantá-lo continuamente com o CircleCI .

Então, duas coisas para saber antes de ver como você pode conseguir isso –

Firebase Hosting

Precisamos de um serviço de hospedagem confiável É adequado para hospedagem de conteúdo da web de nível de produção para desenvolvedores. Você pode implantar rapidamente aplicativos da web e fornecer conteúdo estático e dinâmico a um CDN global com um único comando de mágicaimplantar firebase

CircleCI

Queremos um gatilho de fluxo de trabalho quando fazemos um commit para nosso repo ie. construa o projeto, execute alguns testes e implante no firebase .

O CircleCI oferece a infra-estrutura para automatizar seu fluxo de trabalho, desde o comprometimento até a implantação. Você pode expressar seus fluxos de trabalho em uma configuração yaml. Você pode definir etapas como processo de criação, teste, linting e implantação. Você também tem a flexibilidade de definir fluxos de trabalho personalizados avançados.

Configuração das etapas Firebase hosting Project

  1. Instale o firebase-tools globalmente – Isso permitirá que você use o comando firebase globalmente, em sua máquina)
 npm install -g firebase-tools 

2. Instale o firebase-tools localmente como uma dependência dev – Isso garantirá que quando você instalar dependências no servidor de compilação, você possa executar o comando firebase

 npm install -D firebase-tools 

3. Seja autenticado na sua conta do Firebase (Inscreva-se, se você não tiver um)

 login do firebase 

Uma vez que você está logado, podemos agora inicializar o nosso projeto:

 firebase init 

Isso solicitará que você selecione os serviços que gostaria de configurar. Escolha hospedagem e selecione o projeto firebase se você já criou.

Quando terminar, você deve ter um firebase.json &. arquivo firebasesrc adicionado.

Para fazer uma implantação manual, tudo que você precisa fazer (como prometido) ????

 .build / firebase deploy 

( Importante – Você deve estar no diretório de construção primeiro, se estiver empacotando no local /build , apenas cd build e execute o comando deploy)

Configuração das etapas do projeto CircleCI

  1. Crie sua conta no CircleCI usando sua conta do github / bitbucket
  2. Selecione seu projeto (você pode sincronizar a partir do github & bitbucket)

  • Clique em Configurar projeto
  • Escolha o ambiente de construção – Linux
  • Na pasta raiz do seu projeto, crie uma pasta chamada .circleci e dentro dela, crie um arquivo config.yml . CircleCI requer que o arquivo de configuração esteja localizado aqui. Cole o arquivo abaixo e empurre essas alterações para o seu repo (Se você estiver usando create-react-app , você pode copiar com segurança os comandos run & build, senão use os comandos que você definiu para o seu projeto)
  • Clique em Start Building

(Esta configuração é toda sobre foi explicada no final)

Não é isso? NÃO.

Este e o passo mais importante. Nós não demos ao nosso CircleCI algum tipo de acesso ao nosso projeto Firebase. Para fazer isso, precisamos gerar um token do Firebase e adicioná-lo às nossas configurações do CircleCI

Obtenha o token do Firebase

  • Executar firebase login:ci e obter um token

Você deveria ter uma visão semelhante como esta

Adicione ao seu projeto CircleCI

  • Vá para as configurações do seu projeto clicando no ícone de roda dentada ao lado do seu projeto.
  • Obteve Configurações de Construção > Variáveis de Ambiente> Adicionar Variável .
  • Digite FIREBASE_TOKEN no campo de name , adicione o token que recebemos do Firebase no campo de value e, finalmente, clique em Adicionar variável.

Agora vá para a seção Fluxos de trabalho e clique em Rerun Workflow.

Com isso, você poderá implantar diretamente no Firebase em cada um dos seus commits. Vá, implante ?

Desconstruindo a configuração do CircleCI (Opcional)

Vamos fazer uma rápida revisão do arquivo de configuração.

  • Primeiro, a chave de version nos permite especificar que estamos usando o CircleCI 2.0.
  • Em seguida, especificamos a imagem base do Docker onde nosso código será executado. Neste caso, é um contêiner baseado no Node 10 , que é a versão atual no momento em que foi escrito. Você pode usar uma versão posterior, se houver alguma disponível.
  • A opção working_directory especifica o local onde nosso código será clonado.
  • A seguir está a seção restore_cache , que instrui o CircleCI a restaurar quaisquer dependências instaladas anteriormente. Aqui estamos usando uma soma de verificação do arquivo package-lock.json para detectar se instalaremos as dependências novamente ou usar o cache para restaurar os pacotes baixados anteriormente.
  • A próxima etapa é instalar as dependências por meio do comando npm install .
  • A seção save_cache instrui o CircleCI a salvar as dependências depois de instalá-las.
  • Em seguida, executamos o comando npm run build . Isso constrói a versão de produção do site, que está pronta para ser implantada.
  • firebase deploy comando firebase deploy que implanta no Firebase Hosting. Nesta etapa, precisamos de um token do Firebase que nos permita implantar o aplicativo em nossa conta. O comando especifica que o token deve ser obtido a partir da variável de ambiente FIREBASE_TOKEN .

Experimente com um projeto, é bem simples, confie em mim. Se você tiver alguma dúvida, sinta-se à vontade para twittar para mim .

Fique atualizado e tenha um ótimo dia! ?

Texto original em inglês.