Next.jsをAmplifyでホスティングしCloudFrontで特定のパスで呼ばれるようにしたが、cssやjsファイル、画像が見つからないと怒られた時の対応

最近仕事でNext.jsを使い始めたのですが、一番ハマったことなので記事にしておきます。

ネットで解決方法を探したのですが、やりたいことと一致する記事には会えなかったのでもしかしたら参考になるかもしれません。

まず結論

最終的に設定したこととしては、

画像のurlを設定する際に、amplifyのURLが設定されるようにしてあげる

この記事が、コードも書いてあり参考になりました

CloudFrontのビヘイビアで、パスパターンに/_next/*を設定しオリジンにはAmplifyのURLを設定してあげる

（今回これで解決はしましたが、割と無理矢理な気はしています。もし新たに別でNext.jsを立ち上げて同じようにCloudFrontのビヘイビアを設定した場合は詰むので、もしもっと良い方法がありましたら教えていただきたいです）

です。

試行錯誤の結果なので、cssやjsファイルの部分に関してはこれでいいのか微妙ですが、やったこととしては以上なので、覚えている範囲で試したことを次に書いていこうと思います。

まず起きた事象としては、

Next.jsをAmplifyでホスティングしCloudFrontで特定のパスで呼ばれるように設定しました。

実際にURLにアクセスしてみると、 CSSが効いておらず装飾されていない文字列が表示されていました。

また、画像も表示されていませんでした。

どんなエラーが出ている確認するためにDevToolsを見てみると、cssファイルとjsファイル、そして画像ファイルを見にいこうとして404を返しているという状態でした。

ただ、ローカルでは問題なく表示されているのと、Amplify側で確認した時も問題なかったので、ファイルが元々無いという問題ではないことは分かっている状態でした。

話は戻ってDevToolsで404が出ているファイルのパスを確認すると、ClourFrontで設定している飛び先のURL/画像のパスとなっており意図しないところのパスを見にいこうとしているのが原因のようでした。

正しくはAmplify側でビルドしてcssやjsファイルを出力するのでそのファイルを見に行って欲しかった（AmplifyのURL/画像のパスが正しいURL）

Next.jsにはassetPrefixという設定があり、これをつけてあげることで/_next/以下のファイルの前にURLをつけてあげることができるものです。

このページの最後に書いてあるのですが、publicフォルダは対象外用のようで自分で実装してねと書いてあります。

やりたかったこととしてはこれでできそうなので意気揚々と設定してみましたが、この方法では上手くいきませんでした。

これでできれば完璧だったのですが、、、

もしかしたらこの設定を使う際に設定しておくべきことが他にもあったのでは無いかと未だに少し思います。

assetPrefixではダメでしたが、似たような設定にbasePathというのがあるので、これならと思い設定してみましたが、これもダメでした。

関係ないだろうとは思いつつ、rewritesという設定を使って別のパスに飛べるようにしたりCORSを設定してみたりしましたが、ダメでした。

また、最終手段として/_next/以下のファイルをS3に上げてそのURLを読んでみるという方法も考えていました。

AmplifyでビルドしたファイルがS3にあるはずなのですが、見た目上では分からないので確実に見に行けるようにS3に置けばいいのではと予想していました。

結局試すことはなかったですが。

画像のurlを設定する際に、amplifyのURLが設定されるようにしてあげる

この記事が、コードも書いてあり参考になりました

CloudFrontのビヘイビアで、パスパターンに/_next/*を設定しオリジンにはAmplifyのURLを設定してあげる