Ambiente de Dev, Staging e Production no đŸ”„ Firebase Hosting

CĂąndido Sales Gomes
Sep 1, 2018 · 5 min read

É comum termos em projetos frontend um ambiente de desenvolvimento (nossa mĂĄquina local), um ambiente de staging (onde o P.O. ou Q.A. fazem as validaçÔes necessĂĄrias) e de production (apĂłs validaçÔes, jogamos em produção). Com o Firebase eu criava um projeto diferente para cada ambiente e nĂŁo gostava deste modo, pois nĂŁo via necessidade em criar um projeto inteiro para hospedar um frontend estĂĄtico para ambiente de staging, principalmente quando vocĂȘ possui muitos projetos de front.

Recentemente, o Firebase anuncionou a possibilidade de um projeto administrar mĂșltiplos sites, que era uma proposta requisitada pela comunidade, e essa novidade ajudou a organizar melhor meu fluxo de trabalho. 😃

Vou apresentar um exemplo de como fiz em um projeto de teste seguindo o mesmo esquema que uso no projeto real em produção.

⚠ Antes de começar Ă© importante que vocĂȘ tenha a versĂŁo mais recente do firebase. Se vocĂȘ jĂĄ tem instalado em sua mĂĄquina verifique a versĂŁo ⚠:

firebase --version // Atualmente estou usando a 4.2.1
npm install -g firebase-tools // Instale ou atualize

Crie uma conta no firebase e em seguida crie seu projeto. No meu caso criei um projeto chamado test-project

Tela inicial do Firebase
Selecione a opção de Hosting
Faça o passo-a-passo indicado no seu projeto frontend

O meu projeto de teste estĂĄ em Angular 6+ e segui todos os comandos pedidos pelo Firebase.

Execução dos comandos na pasta do meu projeto

ApĂłs essa etapa serĂŁo criados dois arquivos:

  • firebase.json: configura regras de qual pasta serĂĄ enviada para o servidor e quais arquivos devem ser ignorados;
  • .firebaserc: o projeto referido na sua conta do Firebase onde serĂĄ feito o deploy;

Em Angular 6+, após o 📩 build, os assets vão para a past dist/test-project com isso precisamos modificar o firebase.json incluindo o caminho da pasta correta para deploy.

{
"hosting": {
"public": "dist/test-project", // <------
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
]
}
}

Agora vocĂȘ consegue fazer seu primeiro deploy, execute:

firebase deploy

Como sĂŁo poucos arquivos para o envio, leva alguns segundos para vocĂȘ ver seu site no ar:


O próximo passo é criar o ambiente de staging. Na sua tela do Firebase na parte de Hosting vai aparecer uma nova opção:

O novo recurso para mĂșltiplos sites

Faça o upgrade de sua conta, este recurso sĂł Ă© disponĂ­vel para o plano Blaze. Em seguida vocĂȘ jĂĄ pode adicionar um novo site. Criei o novo site com o nome de staging-test-project.

Criação do novo site para ambiente de staging
Como ficarå seu painel após a criação do novo site

Agora, vocĂȘ precisa configurar seu projeto para que faça deploy no staging ou no projeto anterior que vocĂȘ jĂĄ criou.

Primeiro precisamos definir que o ambiente de “staging” aponta para o site staging-test-project

firebase target:apply hosting staging staging-test-project

O seu .firebaserc serĂĄ atualizado para isso:

// .firebaserc
{
"projects": {
"default": "test-project-1eabb"
},
"targets": {
"test-project-1eabb": {
"hosting": {
"staging": [
"staging-test-project"
]
}
}
}
}

Em seguida vocĂȘ cria as configuraçÔes de deploy para este ambiente no firebase.json. O hosting aceita uma lista de configuraçÔes como vocĂȘ pode ver abaixo:

// firebase.json
{
"hosting": [{
"target" : "staging",
"public": "dist/test-project",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
]
}, {
"target" : "production",
"public": "dist/test-project",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
]
}]
}

Com isso vocĂȘ pode fazer seu primeiro deploy para staging:

firebase deploy --only hosting:staging
Deploy realizado no site de staging
O seu site em staging

Configuramos o ambiente de staging, agora vamos configurar o ambiente de production. Vamos repetir os mesmos passos, entretanto nĂŁo precisamos criar um novo site para production, podemos manter o primeiro que havĂ­amos criado.

firebase target:apply hosting production test-project-1eabb

O seu .firebaserc serĂĄ atualizado e o firebase.json jĂĄ estĂĄ configurado, pois anteriormente jĂĄ inclui o target de production.

Faça seu deploy em production:

firebase deploy --only hosting:production

Com isso vocĂȘ pode criar quantos ambientes desejar, e sĂł repetir os passos. Um dos pontos que mais gostei Ă© a possibilidade de mudar o domĂ­nio para cada ambiente facilmente na criação do site (staging-test-project ou dev-test-project). 🎉


🎁 Um bĂŽnus Ă© colocar os comandos de 📩 build e 🚀 deploy para cada ambiente no package.json para facilitar nossa vida.

{
"name": "test-project",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"build:prod": "ng build --prod",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"deploy:staging" : "ng build --prod && firebase deploy --only hosting:staging",
"deploy:production" : "ng build --prod && firebase deploy --only hosting:production"
},
.
.
.
}

Assim, vocĂȘ pode executar o comando abaixo:

npm run deploy:staging

CĂąndido Sales Gomes

Written by

https://www.linkedin.com/in/candidosales/