deploy-frontend-main.yml

name: Frontend CI/CD to S3 for main

on:
  push:
    branches:
      - main
    paths:
      - 'frontend/**' # frontendディレクトリ配下の変更時のみ実行
  workflow_dispatch:  # GitHub UIからの手動実行を許可

env:
  FORCE_JAVASCRIPT_ACTIONS_TO_NODE24: true # 利用しているActionツールで推奨されているNode.js24を強制的に利用させる

# OIDC認証のための権限設定
permissions:
  id-token: write
  contents: read

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    defaults:
      run:
        working-directory: ./frontend

    steps:
      - name: Checkout repository
        uses: actions/checkout@v6

      # AWS認証情報の設定 (OIDC)
      - name: Configure AWS credentials
        uses: aws-actions/configure-aws-credentials@v6
        with:
          role-to-assume: arn:aws:iam::<AWS Account ID>:role/<IAM Role名>
          aws-region: ap-northeast-1

      # Node.js環境のセットアップとキャッシュ
      - name: Setup Node.js
        uses: actions/setup-node@v6
        with:
          node-version: '22'  # package.jsonの定義より
          cache: 'yarn'       # yarnを使用
          cache-dependency-path: 'frontend/yarn.lock'

      # 依存関係のインストール　(yarnを使用)
      - name: Install dependencies
        run: yarn install --frozen-lockfile

      # Next.jsのビルド実行
      - name: Build Next.js app
        run: yarn build

      # S3へのデプロイ
      - name: Deploy to S3
        run: |
          aws s3 sync ./dist/ s3://<S3 bucket名>/ --delete

      # CloudFrontのキャッシュクリア
      - name: Invalidate CloudFront Cache
        run: |
          aws cloudfront create-invalidation \
            --distribution-id <Distribution ID> \
            --paths "/*"

      # Slackへの結果通知 (サードパーティ製のアクションを使用)
      - name: Notify to Slack
        uses: rtCamp/action-slack-notify@v2
        if: always() # 成功・失敗に関わらず最後に必ず実行
        env:
          SLACK_WEBHOOK: ${{ secrets.SLACK_WEBHOOK_URL }} # 同名のsecretsにSlack WebHook URLを設定しておく
          SLACK_CHANNEL: '<通知先CH名>'
          SLACK_TITLE: 'Frontend CI/CD Deploy Result'
          SLACK_COLOR: ${{ job.status == 'success' && 'good' || 'danger' }}
          SLACK_MESSAGE: 'Deploy to S3 & CloudFront completed with status: ${{ job.status }}'