Introduction : Déploiement Automatique avec Firebase et GitHub Actions
Le déploiement manuel est l'ennemi de la productivité et de la fiabilité. Chaque fois que vous exécutez
firebase deploy depuis votre terminal, vous introduisez le risque d'erreurs humaines : oublier
de faire le build, déployer depuis la mauvaise branche ou sauter les tests. Dans cet article, nous construirons
un système de déploiement entièrement automatisé utilisant Firebase Hosting et
GitHub Actions.
Firebase Hosting est une plateforme d'hébergement pour applications web statiques et dynamiques offrant un CDN global, des certificats SSL automatiques, des preview channels pour les Pull Requests et un rollback instantané. Combiné avec GitHub Actions, il crée un flux de travail où chaque push sur main est automatiquement déployé en production, et chaque Pull Request génère un aperçu accessible via URL.
Ce Que Vous Apprendrez dans Cet Article
- Comment configurer Firebase CLI et initialiser un projet
- La structure du fichier
firebase.jsonet ses options - Comment créer des preview channels automatiques pour les Pull Requests
- Le workflow complet pour le déploiement en production
- Stratégies de rollback pour gérer les erreurs en production
- Comment configurer un domaine personnalisé
- Headers de mise en cache et règles de redirection
- Comparaison entre Firebase Hosting et les alternatives
1. Configuration de Firebase CLI
La première étape est d'installer et configurer la Firebase CLI. Cette CLI est l'outil principal pour interagir avec Firebase depuis le terminal et depuis les pipelines CI/CD.
# Installer Firebase CLI globalement
npm install -g firebase-tools
# Vérifier l'installation
firebase --version
# Connexion (ouvre le navigateur pour l'authentification)
firebase login
# Pour les environnements CI/CD, utiliser un token
firebase login:ci
# Cela génère un token à sauvegarder comme secret GitHub
# Initialiser Firebase dans le projet
firebase init hosting
Lors de l'initialisation, Firebase posera quelques questions sur la configuration. Voici les réponses recommandées pour un projet Angular :
- Public directory :
dist/my-app/browser(le répertoire de sortie du build Angular) - Configure as single-page app : Oui (réécrit toutes les URL vers index.html)
- Set up automatic builds with GitHub : Oui (configure automatiquement les workflows)
- Overwrite index.html : Non (nous utilisons le nôtre)
2. Configuration de firebase.json
Le fichier firebase.json est le cœur de la configuration de Firebase Hosting. Voici
une configuration complète et optimisée pour un projet 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"
}
]
}
]
}
}
Sections Clés de firebase.json
| Section | Objectif | Détail |
|---|---|---|
public |
Répertoire des fichiers à servir | Doit correspondre à la sortie du build Angular |
rewrites |
Routage SPA | Toutes les requêtes sont redirigées vers index.html |
headers |
Cache et sécurité | Cache agressive pour les assets avec hash, headers de sécurité globaux |
ignore |
Fichiers à exclure | Fichiers de configuration et répertoires cachés |
Règles de Redirection
Firebase Hosting prend en charge les redirections HTTP pour gérer les anciennes URL ou forcer 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 pour les Pull Requests
Les preview channels sont l'une des fonctionnalités les plus puissantes de Firebase Hosting. Chaque Pull Request obtient automatiquement une URL unique où il est possible de visualiser les modifications avant le merge. Voici le workflow complet :
# .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: