S3 + CloudFront + Nuxt.jsを使いSSGで静的サイトを公開する

調べてもなかなか適切な情報がなかったので備忘録。

基本的な考え方

結構単純です。Lambdaとかリダイレクトルールとか一切使いません。

1. S3で静的サイトホスティングを設定する
   これだけで、
   a. /sub -> /sub/ に書き換え（HTTPリダイレクト）
   b. /sub/ -> /sub/index.html に転送(HTTPサーバで言うrewrite)
   の設定がされます。
   これだけで、nuxtのSSGに完全対応できます。

2. CloudFrontで、1で設定した静的サイトホスティングのドメインを指定する。
   重要！
   CloudFrontでS3のオリジンを指定しようとすると、
   同じアカウントで登録されたS3のドメインがサジェストされます。
   でも、これを使ってはいけません。無視です。
   あくまで静的サイトホスティングのドメインを指定します。

Nuxt.js対応という意味ではこれで終わりで、
あとは通常のS3 + CloudFrontと同じです。

キャッシュポリシー

上記の通りでも最低限の運用ができますが、
Nuxt.jsでは、_nuxt以下のファイルにはハッシュが付きますので、
この部分だけキャッシュポリシーを変えるのが理想的です。
そこで以下のようにキャッシュを設定します。

ブラウザキャッシュ(s3へのアップロード時に指定）

# /_nuxt/ 以下
aws s3 cp ./dist/_nuxt s3://bucketName/_nuxt --recursive --exclude ".git/*" --cache-control "max-age=86400"
# それ以外
aws s3 cp ./dist s3://bucketName/ --recursive --exclude ".git/*" --exclude "_nuxt/*" --cache-control "no-cache"; 

CloudFrontキャッシュ(Behaviourで指定）

/_nuxt/* -> 86400秒(1日)
Default -> 10秒

Compress Objects AutomaticallyをONにするのを忘れないように。

数字はあくまで一例なので、運用状況次第で変わる部分かと思いますが、10秒というのは「更新があったらすぐに反映してほしいが、高負荷時にオリジンに負荷がいかないように」という基準、1日は、「理想は永続的にキャッシュしてほしいが、トラブル時に一応消える手段を持ちたい」という基準ですが、プロモーションサイトならともかく、会員制サイトだと、1日は短すぎるでしょう。1ヶ月〜1年くらいが妥当なラインかと思います。

余談

この記事の内容と論理的には何も関係ないのですが、上記の設定をしてページを読み込ませたら、ネットワーク使用量が画像とフォントを除いて57kという非常に優秀な結果になりました。Nuxt.js優秀過ぎる。

S3ともCloudFrontともほぼ関係ないですけどね（Compress Objects Automatically)に依存する結果ではあるけど）。