🐷
Next.jsのプロジェクトを静的ページとしてCloudFrontで配信する
やってみたら割と簡単にできた。
Next.jsもCloudFrontもいいものですね・・・。
今回、ごくシンプルな個人ブログサイトを作ってデプロイしてみた。
手順
- Next.jsプロジェクトを静的ページとしてビルド
- https://nextjs.org/docs/pages/building-your-application/deploying/static-exports に従う
- 要は
next.config.js
のmodule.exports
にoutput: 'export'
を追加してnext build
する ->out
ディレクトリが作成される
- S3バケットを作成する
- 「パブリックアクセスをすべてブロック」をオフにする
-
out
ディレクトリの中身をS3バケットにアップロードする - CloudFrontのディストリビューションを作成する
- オリジンとして上記S3バケットを指定
- デフォルトルートオブジェクトに
index.html
を指定 - カスタムヘッダーで
Referer: https://<ディストリビューションのドメイン名>/*
を指定
- 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の設定などは下記エントリを参考にさせていただきました。
Discussion