Webアプリを開発する際、手動でビルドしてアップロードするのは手間がかかります。
特に、本番環境やテスト環境へ頻繁に更新する場合、自動化することで作業の効率を大幅に向上させることができます。
この記事では、GitHub Actionsを活用し、GitHubリポジトリにコードをプッシュすると、自動的にReactアプリをビルドし、AWS S3へデプロイする方法を詳しく解説します。
前提条件
本記事では以下の環境を前提としています。
- Reactで作成されたアプリケーションがある
- AWS S3に静的サイトをホスティングできる環境がある
- CloudFrontを使用し、キャッシュの削除を行う
- GitHubリポジトリが存在し、GitHub Actionsを利用できる
また、AWSの認証情報はGitHubの「シークレット」として登録しておく必要があります。
Settings ＞ Secrets and variables ＞ Actionsから、以下のシークレットを追加してください。
| シークレット名 | 説明 |
|---|---|
| AWS_ACCESS_KEY | AWSのアクセスキー（GitHub ActionsがAWSに接続するために必要） |
| AWS_SECRET_ACCESS_KEY | AWSのシークレットアクセスキー（アクセスキーとセットで使用） |
| AWS_REGION | デプロイ先のAWSリージョン（例：us-east-1 や ap-northeast-1） |
| AWS_S3_BUCKET_NAME | デプロイ先のS3バケット名（Reactのビルド成果物をアップロードする場所） |
| AWS_CLOUD_FRONT_ID | CloudFrontのディストリビューションID（キャッシュ削除のために使用） |
GitHub Actionsの設定ファイル
以下に示すのは、GitHub Actionsのワークフロー設定ファイル（.github/workflows/s3deploy.yml）の例です。
この設定により、特定のブランチへプッシュした際に自動でビルドとデプロイが実行されます。
設定ファイルの例
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
name: S3 Auto Deploy on: push: branches: - v* jobs: deploy: name: Build & Deploy runs-on: ubuntu-latest timeout-minutes: 5 steps: - name: リポジトリのコードを取得 uses: actions/checkout@v4 - name: Node.jsのセットアップ uses: actions/setup-node@v4 with: node-version: v20.12.0 - name: 環境ファイルのリネーム run: | cp -f ./.env.dev ./.env - name: 必要なパッケージのインストール run: npm install - name: Reactアプリのビルド run: npm run build env: CI: false - name: AWSの認証情報を設定 uses: aws-actions/configure-aws-credentials@v4 with: aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY }} aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }} aws-region: ${{ secrets.AWS_REGION }} - name: S3バケットを空にする run: aws s3 rm s3://${{ secrets.AWS_S3_BUCKET_NAME }} --recursive - name: ビルドしたファイルをS3へアップロード run: aws s3 sync ./dist s3://${{ secrets.AWS_S3_BUCKET_NAME }} - name: CloudFrontのキャッシュ削除 uses: chetan/invalidate-cloudfront-action@v2 env: DISTRIBUTION: ${{ secrets.AWS_CLOUD_FRONT_ID }} PATHS: "/*" AWS_REGION: ${{ secrets.AWS_REGION }} AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY }} AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }} |
設定ファイルの詳細解説
on: の設定
|
1 2 3 4 |
on: push: branches: - v* |
この設定により、v で始まるブランチにプッシュされた際にワークフローが実行されます。
jobs: の設定
|
1 2 3 4 5 |
jobs: deploy: name: Build & Deploy runs-on: ubuntu-latest timeout-minutes: 5 |
このジョブでは、最新のUbuntu環境でワークフローを実行し、5分以内に完了しなければ処理を中断するようにしています。
リポジトリのコードを取得
|
1 2 |
- name: リポジトリのコードを取得 uses: actions/checkout@v4 |
リポジトリの最新コードを取得し、ワークフロー環境へダウンロードします。
Node.jsのセットアップ
|
1 2 3 4 |
- name: Node.jsのセットアップ uses: actions/setup-node@v4 with: node-version: v20.12.0 |
ReactのビルドにはNode.jsが必要なため、バージョン20系をセットアップします。
環境ファイルのリネーム
|
1 2 |
- name: 環境ファイルのリネーム run: mv ./.env.dev ./.env |
.env.dev というファイルを .env にリネームし、本番環境用の設定を適用します。
パッケージのインストール
|
1 2 |
- name: 必要なパッケージのインストール run: npm install |
プロジェクトに必要なライブラリをインストールします。
Reactアプリのビルド
|
1 2 3 4 |
- name: Reactアプリのビルド run: npm run build env: CI: false |
npm run build を実行し、最適化された静的ファイルを build/ フォルダに生成します。
AWSの認証情報を設定
|
1 2 |
- name: AWSの認証情報を設定 uses: aws-actions/configure-aws-credentials@v4 |
GitHubシークレットに保存したAWSのアクセスキーを使用し、AWS CLIを実行できるようにします。
S3へアップロード
|
1 2 |
- name: ビルドしたファイルをS3へアップロード run: aws s3 sync ./build s3://${{ secrets.AWS_S3_BUCKET_NAME }} |
ビルドされたファイルを指定したS3バケットへ同期します。
CloudFrontキャッシュの削除
|
1 2 |
- name: CloudFrontのキャッシュ削除 uses: chetan/invalidate-cloudfront-action@v1.2 |
CloudFrontのキャッシュを削除し、最新の変更が即座に反映されるようにします。
まとめ
このワークフローを設定することで、Reactアプリの更新作業を自動化できます。
- コードをGitHubにプッシュするだけで、自動的にビルドが実行される
- ビルドされたファイルがS3にアップロードされる
- CloudFrontのキャッシュがクリアされ、即座に最新の変更が反映される
手作業の負担を減らし、スムーズにデプロイを行いたい方はぜひ導入を検討してみてください。
コメント