Vercel Pro プランで複数環境（dev/stg/prd）を GitHub Actions で実現した

dev ブランチ  → dev 環境（開発用）
stg ブランチ  → stg 環境（ステージング）
main ブランチ → prd 環境（本番）

.github/
├── actions/
│   └── create-env/
│       └── action.yml           # .env 作成（Composite Action）
└── workflows/
    ├── hanasho-ec-web_cicd.yml  # CI/CD メイン
    ├── hanasho-ec-web_preview.yml # Preview
    ├── _deploy.yml              # CD 共通処理（Reusable Workflow）
    └── _preview.yml             # Preview 共通処理（Reusable Workflow）

# hanasho-ec-web_cicd.yml
name: Hanasho EC Web CI/CD

on:
  push:
    branches: [main, stg, dev]
  pull_request:
    types: [opened, reopened, synchronize]

jobs:
  setup:
    # node_modules のキャッシュ作成

  type-check:
    needs: setup
    # 型チェック（並列実行）

  lint:
    needs: setup
    # Lint（並列実行）

  test:
    needs: setup
    # テスト（並列実行）

  deploy:
    name: CD (${{ github.ref_name }})
    needs: [type-check, lint, test]
    if: github.event_name == 'push'
    uses: ./.github/workflows/_deploy.yml
    with:
      # 三項演算子で環境を動的に決定
      environment: ${{ github.ref_name == 'main' && 'production' || github.ref_name == 'stg' && 'stg' || 'dev' }}
      vercel_env: ${{ github.ref_name == 'stg' && 'stg' || 'production' }}
    secrets: inherit

# _deploy.yml
name: Deploy

on:
  workflow_call:
    inputs:
      environment:
        required: true
        type: string
      vercel_env:
        required: true
        type: string

jobs:
  deploy:
    runs-on: ubuntu-latest
    environment: ${{ inputs.environment }}
    env:
      VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
      VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
    steps:
      - uses: actions/checkout@v4

      - uses: actions/setup-node@v4
        with:
          node-version: '24.13.0'
          cache: 'npm'

      - run: npm install -g vercel

      - run: vercel pull --yes --token=${{ secrets.VERCEL_TOKEN }}

      # Composite Action で .env 作成
      - uses: ./.github/actions/create-env
        with:
          api_base_url: ${{ secrets.API_BASE_URL }}
          api_key: ${{ secrets.API_KEY }}
          app_env: ${{ secrets.APP_ENV }}

      - name: Build
        run: |
          vercel build \
            ${{ inputs.vercel_env == 'production' && '--prod' || '' }} \
            --token=${{ secrets.VERCEL_TOKEN }}

      - name: Deploy
        run: |
          vercel deploy --prebuilt \
            ${{ inputs.vercel_env == 'production' && '--prod' || '' }} \
            --token=${{ secrets.VERCEL_TOKEN }}

# .github/actions/create-env/action.yml
name: 'Create .env file'

inputs:
  api_base_url:
    required: true
  api_key:
    required: true
  app_env:
    required: true

runs:
  using: 'composite'
  steps:
    - shell: bash
      run: |
        cat <<EOF > .env
        API_BASE_URL=${{ inputs.api_base_url }}
        API_KEY=${{ inputs.api_key }}
        APP_ENV=${{ inputs.app_env }}
        EOF

# hanasho-ec-web_preview.yml
name: Hanasho EC Web Preview

on:
  pull_request:
    types: [opened, reopened, synchronize]

jobs:
  preview:
    name: Preview (${{ github.base_ref }})
    uses: ./.github/workflows/_preview.yml
    with:
      # PR のターゲットブランチに応じて環境を決定
      environment: ${{ github.base_ref == 'main' && 'preview-prd' || github.base_ref == 'stg' && 'preview-stg' || 'preview-dev' }}
    secrets: inherit

# Before: 3つのジョブが常に表示される
jobs:
  cd-dev:
    if: github.ref_name == 'dev'
  cd-stg:
    if: github.ref_name == 'stg'
  cd-prd:
    if: github.ref_name == 'main'

# After: 実行されるジョブだけ表示
jobs:
  deploy:
    name: CD (${{ github.ref_name }})
    with:
      environment: ${{ github.ref_name == 'main' && 'production' || ... }}