CI/CDとクラウドへのデプロイ

モダンなフロントエンド開発では、ソースコードをコミットするだけでビルド・テスト・デプロイまで自動化される「CI/CDパイプライン」の構築が主流です。
本章では、GitHub ActionsによるCI/CD導入、Firebase HostingやNetlify、Vercelといった代表的クラウドサービスへのデプロイ戦略を具体的に解説します。

---

1. GitHub ActionsによるCI/CD構築

GitHub Actionsは、GitHub上での操作（push、pull requestなど）をトリガーとして、任意の処理を自動で実行できるCI/CDサービスです。

■ ワークフローファイルの作成

.github/workflows/deploy.yml を作成し、以下のように設定します：

 name: Build and Deploy Angular on: push: branches: [ main ] jobs: build: runs-on: ubuntu-latest steps: - uses: actions/checkout@v3 - name: Use Node.js uses: actions/setup-node@v3 with: node-version: 18 - name: Install dependencies run: npm install - name: Run tests run: npm run test -- --watch=false - name: Build Angular app run: npm run build -- --configuration=production - name: Deploy to Firebase uses: w9jds/firebase-action@v13 with: args: deploy --only hosting env: FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }} 

この構成により、mainブランチにpushされるたびに、Angularのビルド・テスト・Firebase Hostingへのデプロイが自動で行われます。

---

2. Firebase Hostingへのデプロイ

Googleが提供する Firebase Hosting は、Angularとの親和性が高く、手軽にSSL対応の本番環境を構築できます。

■ セットアップ手順

1. npm install -g firebase-tools
2. firebase login
3. firebase init（Hostingを選択）
4. firebase deploy

ビルド後の出力ディレクトリ（通常 dist/ 以下）を firebase.json に指定してください。

例：
"public": "dist/your-app-name/browser"

---

3. Netlify/Vercelによる手軽なデプロイ

より手軽な選択肢として、NetlifyやVercelなどの「ゼロ構成デプロイ」も人気です。GitHub連携により、リポジトリを指定するだけでCI/CD環境が自動生成されます。

■ Netlifyの特徴

• GitHubと連携 → 自動デプロイ
• フォーム処理やリダイレクト設定が柔軟
• ビルドコマンド：npm run build
• 公開ディレクトリ：dist/your-app-name

■ Vercelの特徴

• Next.jsと親和性が高いが、Angularも対応可
• 無料プランでもSSL付き独自ドメイン設定可
• 複数ブランチのプレビュー機能が強力

---

4. 環境ごとの切り替え（dev/staging/prod）

Angularでは angular.json に複数のビルド構成を定義できます。

■ 例：本番用構成の切り替え

ng build --configuration=production

環境ごとのAPIエンドポイントやフラグは environment.ts / environment.prod.ts で管理可能です。

---

まとめ

CI/CDは、開発者が高品質なアプリを素早く、安全にデプロイするための重要な基盤です。
GitHub Actions による自動化と Firebase・Netlify・Vercel などクラウドサービスを組み合わせることで、開発から公開までのフローが劇的に効率化されます。
次章では、プロジェクトを継続成長させるための設計戦略や、開発チームでの運用方法など、実務での定着に向けた総まとめを行います。