GitHub Actions で作る実践 CI/CD パイプライン

GitHub Actions の基本構造

GitHub Actions のワークフローは YAML ファイルで定義し、.github/workflows/ に配置します。

name: CI

on:
  push:
    branches: [main]
  pull_request:
    branches: [main]

jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
      - run: npm ci
      - run: npm test

キャッシュ戦略

依存関係のインストールは CI の中で最も時間がかかる処理のひとつです。actions/cache を使ってキャッシュすることで大幅に時間を短縮できます。

- uses: actions/setup-node@v4
  with:
    node-version: 20
    cache: 'npm'  # package-lock.json をキーにして自動キャッシュ

環境変数の安全な扱い

API キーやトークンは GitHub Secrets に登録し、ワークフロー内から参照します。

- name: Deploy to Vercel
  env:
    VERCEL_TOKEN: ${{ secrets.VERCEL_TOKEN }}
  run: npx vercel --prod --token $VERCEL_TOKEN

絶対にやってはいけないこと：

• Secrets を echo でログに出力する
• 機密情報をコミットする
• ワークフローのログに表示される変数名に Secrets を使う

並列実行でビルドを高速化

複数のジョブは needs キーで依存関係を制御し、独立したジョブは並列実行できます。

jobs:
  lint:
    runs-on: ubuntu-latest
    steps:
      - run: npm run lint

  type-check:
    runs-on: ubuntu-latest
    steps:
      - run: npm run type-check

  test:
    runs-on: ubuntu-latest
    steps:
      - run: npm test

  deploy:
    needs: [lint, type-check, test]  # 全て通過したらデプロイ
    runs-on: ubuntu-latest
    steps:
      - run: npm run deploy

Slack 通知連携

デプロイの成否を Slack に通知することで、チームへの共有が自動化できます。

- name: Notify Slack on success
  if: success()
  uses: slackapi/slack-github-action@v1
  with:
    payload: |
      {
        "text": "✅ デプロイ完了: ${{ github.ref_name }}"
      }
  env:
    SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }}

- name: Notify Slack on failure
  if: failure()
  uses: slackapi/slack-github-action@v1
  with:
    payload: |
      {
        "text": "❌ デプロイ失敗: ${{ github.ref_name }}"
      }
  env:
    SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }}

PR 時のプレビューデプロイ

Vercel や Netlify を使っている場合、PR 時に自動でプレビュー環境を作成できます。

on:
  pull_request:
    types: [opened, synchronize]

jobs:
  preview:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - name: Deploy Preview
        run: npx vercel --token ${{ secrets.VERCEL_TOKEN }}

まとめ

GitHub Actions は設定が YAML だけで完結し、豊富なマーケットプレイスアクションを活用できるのが強みです。まず CI（テスト・リント）から始め、慣れたら CD（デプロイ自動化）へと段階的に拡張していくのがおすすめです。