S3 + Cloudfront + Next.jsで静的サイト配信
next.jsのexport機能を使うと静的ファイルが./out配下に生成される。使いやすいようにpackage.jsonにexportコマンドを作った。
code:package.json
{
"scripts": {
...
"export": "next build && next export"
}
}
次にnext exportで静的サイト化してS3に配置する。
S3の静的サイトホスティングについての設定は公式のこの辺を読んでいけば終わり。
Cloudfront設定。S3はhttps配信できないのでCloudfront + ACMを使う
ACMの作成
ここではtrailingSlashという設定を施してexportすることでabout.htmlみたいなファイルではなく/about/index.htmlというファイル吐き出しにしてる。こうすることで/へアクセスしていれば、そこから/aboutのような.htmlなしのルーティングが可能になる。