はじめに: Firebase および GitHub アクションによる自動デプロイメント
手動による導入は生産性と信頼性の敵です。走るたびに
firebase deploy 端末から操作すると、人的エラーのリスクが生じます。忘れてください。
ビルドしたり、間違ったブランチからデプロイしたり、テストをスキップしたりすることはできません。この記事では、
を使用した完全に自動化された展開システム Firebase ホスティング e
GitHub アクション.
Firebase Hosting は、静的および動的 Web アプリケーション用のホスティング プラットフォームです。 グローバル CDN、自動 SSL 証明書、プル リクエストのプレビュー チャネル、インスタント ロールバック。 GitHub Actions と組み合わせると、メインへの各プッシュが自動的に行われるワークフローが作成されます。 実稼働環境にデプロイされ、各プル リクエストは URL 経由でアクセスできるプレビューを生成します。
この記事で学べること
- Firebase CLI を設定してプロジェクトを初期化する方法
- ファイルの構造
firebase.jsonとそのオプション - プル リクエストの自動プレビュー チャネルを作成する方法
- 実稼働デプロイメントのための完全なワークフロー
- 本番環境でのエラーを処理するためのロールバック戦略
- カスタムドメインの設定方法
- キャッシュヘッダーとリダイレクトルール
- Firebase Hosting と代替サービスの比較
1. Firebase CLIのセットアップ
最初のステップは、Firebase CLI をインストールして構成することです。この CLI がメインツールです ターミナルおよび CI/CD パイプラインから Firebase と対話します。
# Installare Firebase CLI globalmente
npm install -g firebase-tools
# Verificare l'installazione
firebase --version
# Login (apre il browser per l'autenticazione)
firebase login
# Per ambienti CI/CD, usare un token
firebase login:ci
# Questo genera un token da salvare come segreto GitHub
# Inizializzare Firebase nel progetto
firebase init hosting
初期化中に、Firebase はいくつかの設定に関する質問をします。答えは次のとおりです Angular プロジェクトに推奨されるもの:
- パブリックディレクトリ:
dist/my-app/browser(Angular ビルド出力フォルダー) - シングルページアプリとして設定します。 はい (すべての URL をindex.html に書き換えます)
- GitHub を使用して自動ビルドを設定します。 はい (ワークフローを自動的に構成します)
- Index.html を上書きします。 いいえ（私たちのものを使用します）
2. Firebase.jsonの設定
ファイル firebase.json Firebase Hosting セットアップの中心です。ここ
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"
}
]
}
]
}
}
firebase.json の主要なセクション
| セクション | 範囲 | 詳細 |
|---|---|---|
public |
提供するファイルのディレクトリ | Angular ビルド出力と一致する必要があります |
rewrites |
SPAルーティング | すべてのリクエストはindex.htmlにリダイレクトされます。 |
headers |
キャッシングとセキュリティ | ハッシュされたアセット、グローバル セキュリティ ヘッダーの積極的なキャッシュ |
ignore |
除外するファイル | 設定ファイルと隠しディレクトリ |
リダイレクトルール
Firebase Hosting は、レガシー URL を処理したり HTTPS を強制したりするための HTTP リダイレクトをサポートしています。
{
"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. プル リクエストのプレビュー チャネル
I プレビューチャンネル これらは Firebase Hosting の最も強力な機能の 1 つです。 各プル リクエストは、変更を表示できる一意の URL を自動的に取得します。 合併前。完全なワークフローは次のとおりです。
# .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: ${{ secrets.GITHUB_TOKEN }}
firebaseServiceAccount: ${{ secrets.FIREBASE_SERVICE_ACCOUNT }}
projectId: my-angular-project
expires: 7d
デプロイ後、アクションは URL を含むコメントをプル リクエストに自動的に追加します。
プレビューの。パラメータ expires: 7d の自動有効期限を設定します
7 日後にチャンネルをプレビューします。
Firebase サービス アカウントを取得する方法
- に行く Firebaseコンソール
- プロジェクトを選択 > プロジェクト設定 > サービス アカウント
- 「新しい秘密キーを生成」をクリックします。
- JSONファイルをダウンロードする
- コンテンツをコピーし、名前付き GitHub シークレットとして追加します。
FIREBASE_SERVICE_ACCOUNT
4. 本番環境での導入ワークフロー
本番ワークフローはブランチへのプッシュでのみ実行されます main そして含まれます
導入前のすべての品質チェック:
# .github/workflows/firebase-production.yml
name: Firebase Production Deploy
on:
push:
branches: [main]
concurrency:
group: production-deploy
cancel-in-progress: false
jobs:
test:
name: Run Tests
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- uses: actions/setup-node@v4
with:
node-version: '20'
cache: 'npm'
- run: npm ci
- run: npx ng lint
- run: npx ng test --watch=false --browsers=ChromeHeadless
build:
name: Build Application
runs-on: ubuntu-latest
needs: test
steps:
- uses: actions/checkout@v4
- uses: actions/setup-node@v4
with:
node-version: '20'
cache: 'npm'
- run: npm ci
- run: npx ng build --configuration=production
- uses: actions/upload-artifact@v4
with:
name: production-build
path: dist/
retention-days: 1
deploy:
name: Deploy to Production
runs-on: ubuntu-latest
needs: build
environment: production
steps:
- uses: actions/checkout@v4
- uses: actions/download-artifact@v4
with:
name: production-build
path: dist/
- name: Deploy to Firebase Hosting
uses: FirebaseExtended/action-hosting-deploy@v0
with:
repoToken: ${{ secrets.GITHUB_TOKEN }}
firebaseServiceAccount: ${{ secrets.FIREBASE_SERVICE_ACCOUNT }}
channelId: live
projectId: my-angular-project
本番環境へのデプロイのための同時実行性
設定に注意してください cancel-in-progress: false 運用環境での展開用。
以前のビルドを削除できる CI とは異なり、運用環境のデプロイメントでは
状態を避けるために、新しいデプロイメントを開始する前に現在のデプロイメントを完了することをお勧めします。
一貫性がない。
5. ロールバック戦略
テストとレビューにもかかわらず、運用環境の展開で問題が発生する場合があります。 Firebase ホスティング いくつかのロールバック戦略を提供します。
Firebase コンソールからのロールバック
Firebase コンソールはデプロイ履歴を保持します。あるバージョンにロールバックするには 前へ、上へ ホスティング > リリース履歴 次に「ロールバック」をクリックします 希望のバージョンにします。 Firebase がすべてのファイルを保持するため、このプロセスは瞬時に行われます。 CDN 上の以前のリリースの。
CLI 経由のロールバック
# Elencare le release recenti
firebase hosting:releases:list --limit 10
# Fare rollback a una release specifica
firebase hosting:rollback --release RELEASE_ID
# Alternativa: clone di una release precedente
firebase hosting:clone SOURCE_SITE:SOURCE_CHANNEL TARGET_SITE:live
GitHub アクションによる自動ロールバック
# .github/workflows/rollback.yml
name: Emergency Rollback
on:
workflow_dispatch:
inputs:
commit-sha:
description: 'Commit SHA to rollback to'
required: true
type: string
reason:
description: 'Reason for rollback'
required: true
type: string
jobs:
rollback:
name: Rollback to Previous Version
runs-on: ubuntu-latest
environment: production
steps:
- name: Checkout specific commit
uses: actions/checkout@v4
with:
ref: ${{ inputs.commit-sha }}
- uses: actions/setup-node@v4
with:
node-version: '20'
cache: 'npm'
- run: npm ci
- run: npx ng build --configuration=production
- name: Deploy rollback version
uses: FirebaseExtended/action-hosting-deploy@v0
with:
repoToken: ${{ secrets.GITHUB_TOKEN }}
firebaseServiceAccount: ${{ secrets.FIREBASE_SERVICE_ACCOUNT }}
channelId: live
projectId: my-angular-project
- name: Notify team
run: |
echo "Rollback completed"
echo "Commit: ${{ inputs.commit-sha }}"
echo "Reason: ${{ inputs.reason }}"
6. カスタムドメイン構成
Firebase Hosting は、無料の SSL 証明書を使用してカスタム ドメインをサポートしています。のプロセス 構成では、DNS レコードを介してドメインの所有権を確認する必要があります。
構成手順
- Firebase コンソール > ホスティング > [カスタム ドメインの追加] に移動します。
- ドメインを入力してください (例:
example.com) - Firebase はレジストラに設定する DNS レコードを提供します
- 検証用の TXT レコードとルーティング用の A レコードを追加します。
- DNS の伝達を待ちます (最大 48 時間、通常は 1 ～ 4 時間)
- Firebase は SSL 証明書を自動的に発行します
Record DNS da configurare:
# Verifica proprietà
TXT @ firebase-hosting-verification=xxxxxxxxxxxxx
# Routing al CDN Firebase
A @ 151.101.1.195
A @ 151.101.65.195
# Sottodominio www (opzionale)
CNAME www my-project.web.app
7. 最適化されたキャッシュヘッダー
正しいキャッシュ構成はパフォーマンスにとって重要です。 Angular がファイルを生成する
名前にハッシュが含まれている (例: main.abc123.js）、キャッシュすることができます
一年中。ファイル index.html ただし、決して暗記してはいけません
ハッシュされたファイルへの参照が含まれているため、キャッシュ内にあります。
{
"hosting": {
"headers": [
{
"source": "/index.html",
"headers": [
{
"key": "Cache-Control",
"value": "no-cache, no-store, must-revalidate"
}
]
},
{
"source": "ngsw.json",
"headers": [
{
"key": "Cache-Control",
"value": "no-cache"
}
]
},
{
"source": "**/*.@(js|css)",
"headers": [
{
"key": "Cache-Control",
"value": "public, max-age=31536000, immutable"
}
]
},
{
"source": "**/*.@(jpg|jpeg|png|gif|svg|webp|avif|ico)",
"headers": [
{
"key": "Cache-Control",
"value": "public, max-age=604800"
}
]
},
{
"source": "**/*.@(woff|woff2)",
"headers": [
{
"key": "Cache-Control",
"value": "public, max-age=31536000, immutable"
}
]
}
]
}
}
8. 代替案との比較
Firebase Hosting は、Angular アプリケーションをデプロイするための唯一のオプションではありません。こちらが比較です 最も一般的な代替手段:
Firebase ホスティングと代替手段
| 特性 | ファイアベース | ヴェルセル | ネットリファイ | AWS S3 + CloudFront |
|---|---|---|---|---|
| 設定 | 単純 | とてもシンプル | とてもシンプル | 複雑な |
| 無料SSL | Si | Si | Si | はい (ACM) |
| グローバルCDN | Si | Si | Si | Si |
| 導入のプレビュー | Si | はい (自動) | はい (自動) | マニュアル |
| ロールバック | インスタント | インスタント | インスタント | マニュアル |
| 無料プラン | 10 GB ストレージ、360 MB/日転送 | 100GBの帯域幅 | 100GBの帯域幅 | 従量課金制 |
| SSRサポート | はい (クラウド機能) | はい（ネイティブ） | はい（機能） | はい (Lambda@Edge) |
9. ローカル展開テスト
自動デプロイを構成する前に、Firebase 構成をローカルでテストすると便利です。
# Build dell'applicazione
npm run build
# Testare Firebase Hosting in locale
firebase emulators:start --only hosting
# Il sito sarà disponibile su http://localhost:5000
# Questo simula esattamente il comportamento di Firebase Hosting:
# - Rewrites SPA
# - Headers personalizzati
# - Redirect rules
# - Clean URLs
# Alternativa: serve direttamente la directory di build
firebase serve --only hosting
導入前チェックリスト
- 本番ビルドはエラーなしで生成されます
- テストはすべて合格します
- ファイル
firebase.json正しいディレクトリを指しています - キャッシュヘッダーが正しく構成されている
- 従来の URL リダイレクトが導入されている
- ローカルエミュレータはサイトを正しく表示します
- Firebase サービス アカウントは GitHub シークレットとして構成されています
- ブランチ保護ルールがアクティブです
結論
この記事では、完全に自動化された展開システムを構築しました。 Firebase ホスティングと GitHub アクション。プル リクエストのプレビュー チャネルを設定しました。 品質管理を備えた生産ワークフロー、緊急事態を管理するためのロールバック戦略、 最適化されたキャッシュとセキュリティ構成。
このアプローチの主な利点は信頼性です。一度設定すると、変更は反映されません。 レビューとテストに合格したものは、手動介入なしで自動的にデプロイされます。 エラーの可能性。何か問題が発生した場合は、クリックするだけでロールバックできます。
次の記事では、セキュリティに関する重要な問題について取り上げます。 の管理 CI/CD パイプラインのシークレット、API キー、サービス トークンを保護する方法を検討する ビルドおよび展開プロセス中の認証情報。