CloudFrontを使ったページ公開時に詰まった経験のある方、これからページ公開をやりたい方はぜひみていただけると幸いです。
使用するAWSサービス
- S3
- CloudFront
- (Route53)
0. HTMLを生成
Next.jsのプロジェクトでは、ページを生成する方法としてSPA（シングルページアプリケーション）、SSG（静的サイト生成）、SSR（サーバーサイドレンダリング）の3つの選択肢があります。今回はSSG（静的サイト生成）を対象に手順を説明します。なお、SPAの設定も大きくは変わりませんが、SSRはLambdaなどサーバーが必要になるため、別記事で詳しく説明します。
手順:
next.config.mjs に以下を設定します
/** @type {import('next').NextConfig} */
const nextConfig = {
output: 'export'
};
export default nextConfig;
これにより、静的なHTMLファイルが、outディレクトリに生成されます
そして、生成されたファイルをAWS S3バケットに配置します。直接アクセスさせず、次のステップで作成するCloudFront経由でのアクセスのみを許可します。
手順:
- AWS Management Consoleにログインし、S3サービスに移動します
- 新しいバケットを作成するか、既存のバケットを選択します
- outディレクトリの内容を選択したS3バケットにアップロードします
なぜCloudFrontを使用するのか：
- パフォーマンス向上: CloudFrontはAWSのCDN（コンテンツ配信ネットワーク）サービスであり、グローバルなエッジロケーションを通じてコンテンツをキャッシュし、ユーザーに対して高速に提供します
- セキュリティ: CloudFrontを介してアクセスを管理することで、S3バケットの直接アクセスを防ぎ、セキュリティを向上させることができます
- 柔軟な設定: CloudFrontは多様なオプションと設定が可能で、複雑な要件にも対応できます
2. 外部からS3のオブジェクトにアクセスさせる（CloudFront）
CloudFrontを設定し、S3バケットのオブジェクトへアクセスできるようにルーティングを設定します。
手順:
- AWS Management ConsoleでCloudFrontサービスに移動し、新しいディストリビューションを作成します
- オリジン設定で、S3バケットをオリジンとして指定します
- オリジンアクセスコントロール（OAC）を有効にし、CloudFrontがS3バケットへアクセスできるようにします
オリジンとビヘイビア：
オリジン: オリジンとは、CloudFrontがコンテンツを取得する元のサーバーやストレージのことを指します。通常、オリジンはS3バケット、HTTPサーバー（例えば、EC2インスタンスや他の外部サーバー）などが使用されます。
ビヘイビア：CloudFrontが特定のパスに対してどのようにリクエストを処理するかを定義する設定です。ビヘイビアはキャッシュの設定やリダイレクトルールなど、リクエストに対する具体的な動作を決定します。
3. CloudFront経由のアクセス許可をS3に与える
OAC経由でのアクセスを許可するために、CloudFrontが生成するアクセスポリシーをS3バケットに設定します
手順:
S3バケットの「パーミッション」タブに移動し、バケットポリシーを編集します。
CloudFrontが生成したアクセスポリシーをコピーし、バケットポリシーに追加します。
以下のコードはOACを生成した時に勝手に生成してくれるのでそれを使用してください。
あくまで以下は一例です。
{
"Version": "2012-10-17",
"Statement": [
{
"Effect": "Allow",
"Principal": {
"Service": "cloudfront.amazonaws.com"
},
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::your-bucket-name/*",
"Condition": {
"StringEquals": {
"AWS:SourceArn": "arn:aws:cloudfront::your-cloudfront-distribution-id"
}
}
}
]
}
4. (オプション) カスタムドメインを設定する
カスタムドメインを設定して、ユーザーが覚えやすいURLでサイトへアクセスできるようにします。
手順:
AWS Management ConsoleでRoute 53サービスに移動し、ドメインを登録または既存のドメインを選択します。
新しいAレコードを追加し、エイリアスとしてCloudFrontディストリビューションを指定します。
CloudFrontディストリビューションの設定で、カスタムドメインを追加し、SSL証明書を設定します。
これで、Next.jsを使用したSSGサイトのデプロイと公開が完了しました。
以下、デプロイしたもの（宣伝）
法人設立しました！（正確には登記中ですが）
the3合同会社と申します。
色々手が回っておらず情報が不足していますがITをメインとして扱う会社となります。
何か相談事等、お引きあいございましたらよろしくお願いいたします。
技術スタック等はQiitaにある通り、高度なセキュリティ以外となります。