Introdução: Deploy Automático com Firebase e GitHub Actions
O deploy manual é o inimigo da produtividade e da confiabilidade. Cada vez que você executa
firebase deploy no seu terminal, introduz o risco de erros humanos: esquecer
de fazer o build, fazer deploy da branch errada, ou pular os testes. Neste artigo, construiremos
um sistema de deploy completamente automatizado usando Firebase Hosting e
GitHub Actions.
Firebase Hosting é uma plataforma de hospedagem para aplicações web estáticas e dinâmicas que oferece CDN global, certificados SSL automáticos, preview channels para Pull Requests e rollback instantâneo. Combinado com GitHub Actions, cria um fluxo de trabalho onde cada push para main é automaticamente implantado em produção, e cada Pull Request gera uma pré-visualização acessível por URL.
O Que Você Aprenderá Neste Artigo
- Como configurar o Firebase CLI e inicializar um projeto
- A estrutura do arquivo
firebase.jsone suas opções - Como criar preview channels automáticos para Pull Requests
- O workflow completo para o deploy em produção
- Estratégias de rollback para gerenciar erros em produção
- Como configurar um domínio personalizado
- Headers de caching e regras de redirecionamento
- Comparação entre Firebase Hosting e as alternativas
1. Configuração do Firebase CLI
O primeiro passo é instalar e configurar o Firebase CLI. Este CLI é a ferramenta principal para interagir com o Firebase pelo terminal e pelas pipelines CI/CD.
# Instalar Firebase CLI globalmente
npm install -g firebase-tools
# Verificar a instalação
firebase --version
# Login (abre o navegador para autenticação)
firebase login
# Para ambientes CI/CD, usar um token
firebase login:ci
# Isto gera um token para salvar como segredo do GitHub
# Inicializar Firebase no projeto
firebase init hosting
Durante a inicialização, o Firebase fará algumas perguntas sobre a configuração. Estas são as respostas recomendadas para um projeto Angular:
- Public directory:
dist/my-app/browser(a pasta de saída do build Angular) - Configure as single-page app: Sim (reescreve todas as URLs para index.html)
- Set up automatic builds with GitHub: Sim (configura automaticamente os workflows)
- Overwrite index.html: Não (usamos o nosso)
2. Configuração do firebase.json
O arquivo firebase.json é o coração da configuração do Firebase Hosting. Aqui está
uma configuração completa e otimizada para um projeto Angular:
{
"hosting": {
"public": "dist/my-app/browser",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
],
"headers": [
{
"source": "**/*.@(js|css)",
"headers": [
{
"key": "Cache-Control",
"value": "public, max-age=31536000, immutable"
}
]
},
{
"source": "**/*.@(jpg|jpeg|gif|png|svg|webp|ico)",
"headers": [
{
"key": "Cache-Control",
"value": "public, max-age=86400"
}
]
},
{
"source": "**/*.@(woff|woff2|ttf|eot)",
"headers": [
{
"key": "Cache-Control",
"value": "public, max-age=31536000, immutable"
}
]
},
{
"source": "**",
"headers": [
{
"key": "X-Frame-Options",
"value": "SAMEORIGIN"
},
{
"key": "X-Content-Type-Options",
"value": "nosniff"
},
{
"key": "X-XSS-Protection",
"value": "1; mode=block"
},
{
"key": "Referrer-Policy",
"value": "strict-origin-when-cross-origin"
}
]
}
]
}
}
Seções Chave do firebase.json
| Seção | Propósito | Detalhe |
|---|---|---|
public |
Diretório dos arquivos a servir | Deve corresponder à saída do build Angular |
rewrites |
Roteamento SPA | Todas as requisições são redirecionadas para index.html |
headers |
Cache e segurança | Cache agressivo para assets com hash, headers de segurança globais |
ignore |
Arquivos a excluir | Arquivos de configuração e diretórios ocultos |
Regras de Redirecionamento
Firebase Hosting suporta redirecionamentos HTTP para gerenciar URLs antigas ou forçar HTTPS:
{
"hosting": {
"redirects": [
{
"source": "/old-blog/:slug",
"destination": "/blog/:slug",
"type": 301
},
{
"source": "/api/**",
"destination": "https://api.example.com/v1/:splat",
"type": 302
},
{
"source": "/docs",
"destination": "https://docs.example.com",
"type": 301
}
]
}
}
3. Preview Channels para Pull Requests
Os preview channels são uma das funcionalidades mais poderosas do Firebase Hosting. Cada Pull Request obtém automaticamente uma URL única onde é possível visualizar as alterações antes do merge. Este é o workflow completo:
# .github/workflows/firebase-preview.yml
name: Firebase Preview Deploy
on:
pull_request:
branches: [main]
jobs:
build-and-preview:
name: Build and Deploy Preview
runs-on: ubuntu-latest
permissions:
checks: write
pull-requests: write
steps:
- name: Checkout repository
uses: actions/checkout@v4
- name: Setup Node.js
uses: actions/setup-node@v4
with:
node-version: '20'
cache: 'npm'
- name: Install dependencies
run: npm ci
- name: Run tests
run: npx ng test --watch=false --browsers=ChromeHeadless
- name: Build application
run: npx ng build --configuration=production
- name: Deploy to Firebase Preview Channel
uses: FirebaseExtended/action-hosting-deploy@v0
with:
repoToken: