GitHub Actions で AWS S3 に静的ファイルのディレクトリごとデプロイする方法を備忘録として残しておく

事前準備

  • GitHub Actions 用の IAM ユーザを作成
  • GitHub の Environments に上記 IAM ユーザのシークレットを登録
    • Environments > Environment Secrets
  • S3 のバケットを作成（ホスティングする場合は公開設定にする）
  • S3 のバケット名はグローバルでユニークにする必要がある

前提

  • S3 のバケットは作成済
  • Package Manager は npm を使用(yarn でも可)
  • npm build で dist フォルダ配下にデプロイ資産が作成される

実際のコード

name: cd-dev
on:
  push:
    branches:
      - "develop"
  workflow_dispatch:

jobs:
  build-deploy:
    runs-on: ubuntu-latest
    environment: develop
    steps:
      - name: Checkout
        uses: actions/checkout@v4

      # ①
      - uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: 'npm'
          cache-dependency-path: ${{ github.workspace }}/package-lock.json

      - name: Install Dependencies
        run: npm install

      - name: Build
        run: npm run build

      - name: Configure AWS Credentials
        uses: aws-actions/configure-aws-credentials@v1
        with:
          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
          aws-region: ${{ secrets.AWS_REGION }}

      - name: Deploy to S3
        run: aws s3 sync ./dist s3://<<S3 Buckets Name>> --delete # ②

      # ③
      - name: Clear cache
        run: aws cloudfront create-invalidation --distribution-id <<CloudFront Distribution ID>> --paths "/*"

ポイントの説明

  • ①
    • 依存パッケージをキャッシュする
      • cache: npm or yarn
      • cache-dependency-path: package-lock.json のパスを指定
  • ②
    • –delete を付与するとバケットには存在するが、ディレクトリにはないファイルがあった場合に、バケットのファイルを削除する
  • ③
    • CloudFront のキャッシュが有効になっている場合は以下も行う