Einführung: Automatisches Deployment mit Firebase und GitHub Actions
Manuelles Deployment ist der Feind von Produktivität und Zuverlässigkeit. Jedes Mal, wenn Sie
firebase deploy in Ihrem Terminal ausführen, führen Sie das Risiko menschlicher Fehler ein: den Build vergessen,
vom falschen Branch deployen oder die Tests überspringen. In diesem Artikel bauen wir ein vollständig
automatisiertes Deployment-System mit Firebase Hosting und
GitHub Actions.
Firebase Hosting ist eine Hosting-Plattform für statische und dynamische Webanwendungen, die ein globales CDN, automatische SSL-Zertifikate, Preview Channels für Pull Requests und sofortiges Rollback bietet. Kombiniert mit GitHub Actions entsteht ein Workflow, bei dem jeder Push auf main automatisch in Produktion deployt wird, und jede Pull Request eine über URL zugängliche Vorschau generiert.
Was Sie in Diesem Artikel Lernen
- Wie Sie Firebase CLI konfigurieren und ein Projekt initialisieren
- Die Struktur der
firebase.json-Datei und ihre Optionen - Wie Sie automatische Preview Channels für Pull Requests erstellen
- Den vollständigen Workflow für das Produktions-Deployment
- Rollback-Strategien zur Fehlerbehandlung in Produktion
- Wie Sie eine benutzerdefinierte Domain konfigurieren
- Caching-Header und Weiterleitungsregeln
- Vergleich zwischen Firebase Hosting und den Alternativen
1. Firebase CLI einrichten
Der erste Schritt ist die Installation und Konfiguration der Firebase CLI. Diese CLI ist das Hauptwerkzeug für die Interaktion mit Firebase über das Terminal und aus CI/CD-Pipelines.
# Firebase CLI global installieren
npm install -g firebase-tools
# Installation prüfen
firebase --version
# Login (öffnet den Browser zur Authentifizierung)
firebase login
# Für CI/CD-Umgebungen einen Token verwenden
firebase login:ci
# Dies generiert einen Token zum Speichern als GitHub Secret
# Firebase im Projekt initialisieren
firebase init hosting
Während der Initialisierung stellt Firebase einige Fragen zur Konfiguration. Hier sind die empfohlenen Antworten für ein Angular-Projekt:
- Public directory:
dist/my-app/browser(das Ausgabeverzeichnis des Angular-Builds) - Configure as single-page app: Ja (schreibt alle URLs zu index.html um)
- Set up automatic builds with GitHub: Ja (konfiguriert automatisch die Workflows)
- Overwrite index.html: Nein (wir verwenden unsere eigene)
2. Konfiguration von firebase.json
Die Datei firebase.json ist das Herzstück der Firebase Hosting-Konfiguration. Hier ist
eine vollständige und optimierte Konfiguration für ein Angular-Projekt:
{
"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"
}
]
}
]
}
}
Schlüsselabschnitte von firebase.json
| Abschnitt | Zweck | Detail |
|---|---|---|
public |
Verzeichnis der zu servierenden Dateien | Muss der Ausgabe des Angular-Builds entsprechen |
rewrites |
SPA-Routing | Alle Anfragen werden zu index.html umgeleitet |
headers |
Caching und Sicherheit | Aggressives Caching für gehashte Assets, globale Sicherheits-Header |
ignore |
Auszuschließende Dateien | Konfigurationsdateien und versteckte Verzeichnisse |
Weiterleitungsregeln
Firebase Hosting unterstützt HTTP-Weiterleitungen zur Verwaltung alter URLs oder zum Erzwingen von 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 für Pull Requests
Die Preview Channels sind eine der leistungsstärksten Funktionen von Firebase Hosting. Jede Pull Request erhält automatisch eine eindeutige URL, über die die Änderungen vor dem Merge angesehen werden können. Hier ist der vollständige Workflow:
# .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: