DEV Community 👩‍💻👨‍💻

Felipe Marques
Felipe Marques

Posted on

Como publicar uma aplicação Angular no Firebase usando Github Actions

O objetivo desse post é publicar uma aplicação Angular dentro de um projeto do Firebase utilizando o produto Hosting do Firebase. Para fazer automatizar a publicação configuraremos um script do Github Actions para ser executado sempre que houver um commit na branch main do repositório.

Para acompanhar os passos desse post, será necessário que você tenha:

  1. Conta do Firebase
  2. Conta do Google
  3. Firebase CLI instalado, veja como aqui
  4. Conta do Github
  5. Conhecimento para criar e trabalhar com um repositório no Github

Projeto no Firebase

Acesse o console do Firebase em console.firebase.google.com e crie um novo projeto.

Novo projeto no Firebase

No meu caso vou usar o nome demoangulargithubactions

Image description

E vou optar por não habilitar o Google Analytics, uma vez que é irrelevante para esse tutorial.

Image description

Aguarde alguns instantes até que o projeto seja criado.

Image description

Assim que o projeto estiver disponível você terá a opção de utilizar alguns produtos, por hora deixe essa aba aberta e vamos para a próxima etapa.

Image description

Criar repositório no github e projeto Angular

Para esse tutorial vou criar um repositório novo chamado demogithubactions e um projeto angular novo usando ng new angular-tour-of-heroes, mas essa etapa é opcional. Se você já tem um projeto, continue com ele.

Image description

Faça o clone do seu repositório localmente.

Image description

Crie o projeto angular

Image description

O projeto será criado dentro da pasta angular-tour-of-heroes como na imagem abaixo.

Image description

No meu caso vou mover todo o código para a pasta raiz. Se você quiser organizar de outra forma, lembre-se que o script do Github Actions precisará de algumas alterações.

Image description

Configuração do Firebase

Pronto, agora que já temos o projeto Angular e o repositório prontos, vamos configurar o Firebase.

Se você ainda não fez, faça a instalação do Firebase CLI e o login na sua conta.

Depois, execute o comando firebase init hosting e escolha a opção Usar um projeto existente (talvez esteja em inglês: Use an existing project)

Image description

Será mostrado a lista de projetos da sua conta, escolha o projeto que você quer fazer o deploy.

Image description

A partir de agora, serão feitas algumas perguntas, vamos lá:

  • Escolha a pasta que será publicada, essa é a mesma pasta onde o comando ng build gera os arquivos de publicação, no nosso caso será a pasta dist.

Image description

  • Em seguida perguntam se quer configurar sua página como single-page app, eu sempre opto por N, não sei qual a influência dessa opção no roteamente do angular, se alguém souber, me fala nos comentários, por favor.

Image description

  • Aqui também marco que não, porque nosso script já vai fazer a conexão com o Github Actions.

Image description

Pronto, se as configurações foram criadas com sucesso, você terá uma mensagem similiar com a da imagem abaixo.

Image description

Faça commit de tudo.

Image description

Configurando o Github Actions

Para configurar o Github Actions vamos precisar primeiro de um token de autenticação do Firebase, gere esse token executando o comando firebase login:ci. Uma tela do browser deve abrir e você precisará se autenticar.

Image description

Se tudo der certo um token será gerado, na imagem abaixo eu pintei a linha, mas é possível ver que é uma string, guarde esse token por enquanto, vamos colocá-lo em um Secret do repositório no Github.

Image description

Acesse o seu repositório no Github, vá em Settings -> Secrets -> Actions e crie um New repository secret.

Image description

Coloque o nome de FIREBASE_TOKEN e no valor cole o token gerado na etapa anterior. Adicione o Secret.

Image description

Acesse a aba Actions, pesquise por Manual e clique em Configure na caixa do Manual workflow.

Image description

A página que será aberta já vem com algum código, substitua tudo pelo código abaixo.

name: Deploy-To-Firebase

on: 
  push:
    branches: 
      - main

  workflow_dispatch:

jobs:
  build:

    runs-on: ubuntu-latest

    steps:
    - uses: actions/checkout@v1
    - name: Use Node.js 16.13
      uses: actions/setup-node@v1
      with:
        node-version: 16.13    
    - name: Install dependencies
      run: npm install
    - name: Build
      run: npm run build -- --prod
    - uses: w9jds/firebase-action@master
      with:
        args: deploy
      env:
        FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }}

Enter fullscreen mode Exit fullscreen mode

Salve o arquivo clicando em Start Commit e faça o commit.

Image description

Clique em actions novamente e veja se já existe algum workflow sendo executado, se não tiver, vá em Deploy-To-Firebase e clique em Run workflow.

Image description

Opcionalmente, abra o deploy e acompanhe a execução de cada etapa. Se tudo funcionou, você terá uma tela com todas as etapas verdes, como a imagem abaixo.

Image description

Volte na aba do Firebase console.firebase.google.com que você deixou aberta e atualize. Clique em All products e depois em Hosting e você verá uma tela similar à da próxima image. Com dois domínios disponíveis e o pacote que foi publicado.

Image description

Abra um dos domínios e você deve ver uma imagem como a abaixo. Se isso aconteceu com você, é porque precisamos de um ajuste de configuração.

Image description

Abaixo você pode ver o conteúdo do meu arquivo angular.json, na linha 23, a configuração outputPath está configurado para um diretório diferente do que foi informado na hora que configurei o firebase.

Aqui temos duas opções, alterar o arquivo angular.json e colocar "outputPath": "dist" ou alterar o arquivo firebase.json e colocar "public": "dist/angular-tour-of-heroes". Eu preferi alterar o meu angular.json. Fique à vontade.

Image description

Faça a correção e um novo commit. Você verá que foi gerado um novo build. Se tudo correu bem, um novo pacote foi entregue no seu projeto firebase, como na imagem abaixo.

Image description

Observe que agora você tem dois pacotes e existe a opção de voltar para o pacote anterior clicando no botão no início da linha do deploy mais antigo.

Observe também que o número de arquivos do último deploy está zero. Isso acontece porque há uma certa demora para o Firebase atualizar esse número.

O mais importante é que se você acessar um dos dois domínios, deve ver o projeto publicado, como na imagem a seguir.

Image description

Conclusão

Espero que esse passo a passo tenha ajudado a configurar um projeto do angular no firebase.

Aproveite e adicione uma etapa de notificação no seu pipeline do Github Actions utilizando o Telegram

Top comments (0)

🌚 Life is too short to browse without dark mode