💭

CloudRunにNext13(v13.5.3)をデプロイしたがpublicフォルダの画像が表示されない

2023/10/18に公開

GCPのCloud RunにNext13をデプロイしていたときに起こった問題。
localでは普通通り動作していたのにデプロイしたら画像が全て表示されていない。
chrome開発者ツールのネットワークで確認してみるとpublicから呼び出している画像が全て

"url" parameter is valid but upstream response is invalid

いつも通りpublicフォルダに画像をいれてパスで画像を読み込んでいたが全てだめだった。

結論

結論を先に書くと、今回の問題はNextのバージョンが悪かった。

問題が起きたバージョン
next13.5.3
(環境補足)
nodeは18-alphine

解決方法

nextのバージョンをnext13.5.4に上げた。

解決に至ったissue

https://github.com/vercel/next.js/issues/53715
どうやらnext13.5.3を使っていると起こるらしい(他に13.4.13あたりでも起きている)。

コメントに書かれている解決方法としては

  • next13.5.2に下げる
  • next13.5.4に上げる

使用しているバージョンを確認すると同じくnext13.5.3だったので変えてみたところ画像は表示されるようになった。

今回私の場合はnext13.5.4にバージョンアップしたら解決したが、next13.5.2next13.5.4下でも依然として表示されない人もいるよう。
ただコメントの人たちや私のように解決できる場合もあるので、バージョン変更による問題がない状況なら試してみるのはいいと思う。

余談

解決方法ではなかったが確認したところ。
publicフォルダがないのでは?からdockerでpublicフォルダをコピーしているか確認。

COPY --from=builder /app/public ./public

これ。
Dockerfileには書いていたので今回は違った。
https://github.com/vercel/next.js/discussions/49803

Discussion