🐷

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

2023/12/15に公開

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

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

手順

  1. Next.jsプロジェクトを静的ページとしてビルド
  2. S3バケットを作成する
    • 「パブリックアクセスをすべてブロック」をオフにする
  3. outディレクトリの中身をS3バケットにアップロードする
  4. CloudFrontのディストリビューションを作成する
    • オリジンとして上記S3バケットを指定
    • デフォルトルートオブジェクトにindex.htmlを指定
    • カスタムヘッダーでReferer: https://<ディストリビューションのドメイン名>/*を指定
  5. S3バケットポリシーを追加する
    • 以下のような内容
    {
      "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