Closed2
Next.js+S3+CloudFront のハマりポイント解決まとめ(動的パスが効かない,next/imageが使えないなど)
takecchi概要
仕事の要件上Next.jsのSSG,CSR縛りが発生したので構成上のハマりポイントメモ
構成
インフラ
- AWS CloudFront
- AWS S3
アプリケーション
- Next.js v12.3.4
備考
上記の構成上SSRは使用不可。SSGまたはCSRのみ対応
$ next build && next export
これで生成されたものをS3に置いてるだけ
takecchiハマりポイントと解決方法
next/imageが使えない
画像の最適化ができないのでオフにする必要がある。 12.3以上対応
URLパスパラメータ(Dynamic Routes)が効かない(404ページになる)
ローカルで動かす分には良いのだが、例えば/posts/[postId]というページを作って実際にデプロイした際にい404となってしまった。
理由は簡単でCloudFrontが/posts/1へのリクエストに対して/posts/[postId]/index.htmlを返してくれない為。それはそう。
対応（インフラに手を加えない暫定対応）
ちゃんとした方法は別にある(後述)が、諸事情で構成を変えられなかった為以下で対応。
かなりトリッキーな実装になるが、404ページからリダイレクトさせるようにする。
追記
/posts/1/?hoge=fugaといったようにクエリパラメータが付いた場合router.isReadyがtrueにならず遷移が起こらなかったのでrouter.isReady関係なく遷移するように修正が必要。
実際に書いたコード
本来的には
今回は"インフラの構成がいじれない"ということでパス解決をアプリケーションの404ページに実装したが、本来的にはCloudFrontのオリジンやビヘイビアでパス解決してあげましょう。
このスクラップは2023/04/21にクローズされました