個人的備忘録：Next.js フロントエンドのビルド・テスト用GitHub Actionsワークフロー整理②

はじめに

本記事では、Next.jsで作成したフロントエンドアプリケーションをAWS S3とCloudFrontに自動デプロイするGitHub Actionsワークフローについて整理します。

この内容は、受講しているITスクールのハッカソンにおいて、チームメンバーの方が作成してくださったものを、レビューした際にまとめたものです。（いろいろと作業いただき、ありがとうございます。）

ビルド後、素早く本番環境へ反映するための仕組みを整えることが目的です。

書こうと思ったきっかけ

この内容は、あくまでチームメンバーの方に環境やファイルを整えていただいたうえでのものとなります。

開発中のアプリケーションを本番環境へ手動でアップロードするのは手間がかかり、ヒューマンエラーのリスクも高まるため、ビルド完了後に自動デプロイする流れを作りたいと考えました。

特に、S3へのアップロードとCloudFrontキャッシュの無効化をワンストップで行うため、このワークフローを設計いただきました。

ワークフローの概要（2025/04/27）

このGitHub Actionsワークフローは、ビルド済みのNext.jsフロントエンドをS3にデプロイし、CloudFrontのキャッシュを無効化するために作成されています。

トリガー条件

• 「Build and Test Next.js Frontend」ワークフローが成功した後（mainブランチ対象）
• 手動実行（workflow_dispatch）

実行内容

1. ビルド成果物をダウンロード

   • 事前にアップロードされているビルド成果物（アーティファクト）を取得し、outディレクトリに展開します。

2. AWS認証情報の設定

   • GitHub Secretsに登録されたAWSアクセスキー情報を使ってAWS CLIを設定します。

3. S3へデプロイ

   • outディレクトリの内容を、指定したS3バケット（例：xxx-frontend）に同期。不要ファイルは削除（--deleteオプション）。

4. CloudFrontキャッシュの無効化

   • CloudFrontのキャッシュを無効化し、最新デプロイが即座に反映されるようにします。

補足ポイント

• workflow_dispatchで手動実行時は、オプションでrun_idを指定可能。
• 成功したビルド成果物が対象であり、失敗したものは対象外。

まとめ

このワークフローにより、ビルド後のS3デプロイとCloudFrontキャッシュクリアを完全自動化でき、リリース作業のミス防止とスピードアップに繋がりると思っています...！

作成いただいた方、本当にありがとうございます...！

まずはこのベースを固め、信頼性の高い本番リリースフローを目指していきます。