はじめに Next.js をプロジェクトに採用したものの、S3 + CloudFront の構成にどうやって組み込むのかを色々苦心したので同じような悩みを持つ人のために記事に残しておきたいと思います。Vercel を使えば Next.js との相性が良いのでとても楽ですが、構成にAWS縛りがあるとか色々事情はありますよね。そこをなんとか解決していきたいと思います。 また、以下の記事にもあるように、普通にデプロイしようとすると CloudFront はサブディレクトリからルートオブジェクトを返さないので、Lambda@Edgeと統合させてわざわざindex.htmlを追加する処理を書いてあげたりしなければいけないわけです。そういう処理をしたくない方も本記事は参考になるかと思います。 ゴール CloudFront のドメインからページにアクセスできる 直接、S3の静的ホスティングされたサイトに
