🚢

Vite + ReactアプリをS3 + CloudFrontで公開し、GitHub Actionsで自動デプロイする方法

に公開
React
S3
GitHub Actions
CloudFront
Vite
tech

はじめに

Reactアプリを公開する際、AWSの S3 + CloudFront はよく使われます。
さらに、GitHub Actions を組み合わせることで、自動的にデプロイする仕組みも整えられます。

全体の手順

  1. Vite + React プロジェクトを準備
  2. Viteでビルド設定(vite.config.ts)を調整
  3. AWSでS3バケットとCloudFrontを設定
  4. 手動でS3にデプロイして動作確認
  5. GitHub Actionsを使って自動デプロイ

1. Vite + React プロジェクトを準備

npm create vite@latest my-app -- --template react-ts
cd my-app
npm install

ローカルで確認：

npm run dev

2. Viteのビルド設定

vite.config.ts に base の指定を追加しておくと、CloudFront配下でも正しく動作します。

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  base: '/',
})

SPAでは、ブラウザのURLパスとアプリケーション内のルーティングが一致しない場合に問題が発生することがありますが、base: '/'を設定することで、ルートパスからの相対パス解決が正しく行われ、CloudFront経由でのアクセス時にもルーティングが正常に機能します。

ビルド実行：

npm run build

これで dist/ フォルダが出力されます。

3. S3とCloudFrontの設定

  1. S3バケット作成

    • パブリックアクセスのブロックは有効のままでOK
    • 静的ウェブサイトホスティングは不要(CloudFront経由で配信するため)

  2. CloudFrontディストリビューション作成

    • オリジンにS3バケットを指定
    • デフォルトのルートオブジェクトに index.html を設定
    • 必要に応じてキャッシュポリシーやHTTPSを設定

  3. 動作確認

    • aws s3 sync dist/ s3://your-bucket-name --delete
    • CloudFrontのURLにアクセスしてアプリが表示されることを確認

4. GitHub Actionsで自動デプロイ

リポジトリのルートに .github/workflows/deploy.yml を作成します。

name: Deploy to S3

on:
  push:
    branches:
      - main  # mainブランチにpushしたときに実行

jobs:
  deploy:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout source
        uses: actions/checkout@v4

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: 18

      - name: Install dependencies
        run: npm ci

      - name: Build app
        run: npm run build

      - name: Sync S3
        uses: jakejarvis/s3-sync-action@master
        with:
          args: --delete
        env:
          AWS_S3_BUCKET: ${{ secrets.AWS_S3_BUCKET }}
          AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
          AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
          AWS_REGION: ap-northeast-1
          SOURCE_DIR: "dist"

      - name: Invalidate CloudFront cache
        uses: chetan/invalidate-cloudfront-action@v2
        env:
          DISTRIBUTION: ${{ secrets.AWS_CLOUDFRONT_DISTRIBUTION_ID }}
          PATHS: "/*"
          AWS_REGION: ap-northeast-1
          AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
          AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
  • jakejarvis/s3-sync-actionはS3デプロイ専用の便利アクション
  • aws s3 syncを簡単に使えるようにラップしている
  • 認証やCLIのインストールを気にせず、YAMLに数行書くだけでS3に反映できる

5. Secretsの設定

GitHubリポジトリの Settings > Secrets and variables > Actions で以下を設定します：

  • AWS_S3_BUCKET
  • AWS_ACCESS_KEY_ID
  • AWS_SECRET_ACCESS_KEY
  • AWS_CLOUDFRONT_DISTRIBUTION_ID

まとめ

  • ViteでReactアプリをビルドしてS3に配置
  • CloudFrontで配信することで高速かつHTTPSに対応
  • GitHub Actionsを使えばpush時に自動デプロイ可能

これでCI/CDを備えた運用環境が構築できます

Discussion