Ambiente de Dev, Staging e Production no đ„ Firebase Hosting
Ă 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



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

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:

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.


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

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
