Zenn
🐷

Next.jsのプロジェクトを静的ページとしてCloudFrontで配信する

2023/12/15に公開
AWS
Next.js
tech

やってみたら割と簡単にできた。
Next.jsもCloudFrontもいいものですね・・・。

今回、ごくシンプルな個人ブログサイトを作ってデプロイしてみた。

手順

  1. Next.jsプロジェクトを静的ページとしてビルド
  2. S３バケットを作成する
    • 「パブリックアクセスをすべてブロック」をオフにする
  3. outディレクトリの中身をS３バケットにアップロードする
  4. CloudFrontのディストリビューションを作成する
    • オリジンとして上記S3バケットを指定
    • デフォルトルートオブジェクトにindex.htmlを指定
    • カスタムヘッダーでReferer: https://<ディストリビューションのドメイン名>/*を指定
  5. S３バケットポリシーを追加する
    • 以下のような内容
    {
  "Version": "2012-10-17",
  "Statement": [
    {
      "Sid": "Statement1",
      "Effect": "Allow",
      "Principal": "*",
      "Action": "s3:GetObject",
      "Resource": "arn:aws:s3:::<S3バケット名>/*",
      "Condition": {
        "StringLike": {
          "aws:Referer": "<カスタムヘッダーでRefererに指定した値>"
        }
      }
    }
  ]
}

以上でCloudFrontからサイトが配信されるようになった！

感想

AWS側の細かい設定でよくわかってない部分もあるが、とりあえずさっと配信できることが確認できた。

今回配信したサイトはContentfulで作成したコンテンツを利用しているが、Next.jsでSSGとしてビルドすることで、静的コンテンツとして配信できる。
ビルド時にコンテンツを引っ張ってきてページを作成するので、コンテンツを追加・変更するたびにデプロイする必要がある。
しかし、シンプルでコンテンツの追加や編集がそこまで頻繁ではない（かつコンテンツの容量がそこまで大きくない）場合、CMS側のRateLimitとかも心配しなくて済むし、良い構成じゃないかと思う。

参考URL

AWSの設定などは下記エントリを参考にさせていただきました。
https://zenn.dev/hamo/articles/0a96c4d27097bd

Discussion