Next.js+NextAuth.jsをAmplifyにデプロイしてInternal Server Errorが発生した際の解決方法
デザインエンジニアのりょーたです。
AWS Amplifyを初めて使ったのですが、Next.jsで作ったアプリをデプロイした際に、NextAuth.jsの認証周りで「500 Internal Server Error」が発生し解決に時間がかかったので記事で残します。
結論
結論、めちゃくちゃ遠回りしていただけだった😇
以下のリンクを参照して欲しいのですが、要はNext.js(SSR)だとAmplifyのコンソールで環境変数を登録するだけだとサーバー側でランタイムにアクセスできないみたいです
NextAuth.jsはエラーの原因ではなかったのですが、このアプローチで調べた時に、同じ解を提供している記事がなかったので、このタイトルにしました。（僕が入門者だからここで引っかかってるだけかもしれないですが、、）
以下、独り言。
まじか。使用しているフレームワークを自動で判別できるなら、よしなにしてくれよ🙃（できそうなのに。知らんけど。）
やったこと
「NextAuth 本番環境 エラー」みたいなキーワードで出てくる対応方法は一通り試した。
Q. NEXTAUTH_URLとNEXTAUTH_SECRETがないと本番で動かないけど設定してますか？
A. Amplifyのコンソールにある環境変数で設定済み
Q. NEXTAUTH_URLの代わりにNEXTAUTH_URL_INTERNALを設定するといいかもよ？
A. 設定しても動かない
Q. [...nextauth]ファイルのパスが違うのでは？
A. ちゃんと/pages/api/auth/直下にあるから問題なし
Q. コードにsecret追加したら動いたよ
export default NextAuth({
providers: [...],
+ secret: process.env.NEXTAUTH_SECRET,
callbacks: {},
})
A. 試したけど動かない
このあたりで似たような記事ばかりになってきて、ふとamplifyのログを見てないなと思った。コンソールにログ見れそうなところがなくて。。（言い訳）
Cloud Watchにログがはかれていて、NextAuth.jsとは別の部分で、環境変数にアクセスできていなさそうなエラーが出力されていた。
その時初めて、Amplifyの環境変数の設定に問題があるのかと思い、調べてみると、一瞬で上記の記事に出会った。
教訓
認証回りの処理の際に500 Internal ServerErrorが画面に表示されていたので、NextAuth関連のエラーだと思い込んでずっと調べていたけど、詳しいエラーがどこかに出力されていないかをまず確認するところから始めるべきだった。
慣れてくると、当たりをつけて調べてしまいがちだけど、普段触れない領域は特に、現状を正確に把握することが一番大事ですね。以上です🙇♂️
Discussion