🗂
Next.js + Firebase HostingでnextのImage使ったら403エラーで困った(解決)
Next.js(13.4.9)
firebase-tools(12.4.7)
で、新規に作成したサイトでの作業。
firebase deploy
して、とりあえず<Image>(next/image)で貼った画像を確認したら表示されてない。
え?なんで?そんなことある?
と現象を追い込んでいくと、
- <Image>だと出ない。
- <Image>でもpublic/next.svg, public/vercel.svgは出る
- svgファイルはImageの最適化を通らないためだった。つまり<img>で表示した場合と同じ。つまりファイルは上がってる。
<Image>で表示した画像(でてないけど)を、ブラウザ右クリックから別タブを開いてみると、次の表示。
Firebase Hostingのログで確認すると、403エラーが出てる。
現象としては、画像はアップロードされているが、nextのImageの最適化のほうでの表示が、なんでかトラブってる。
ということだという結論が出る。
結局「なんだかよくわからないけど、Google Cloud(Firebase)側の初期化だかなんだかがうまく動かなくて、どうにもならない状態だろう」という結論になり、次の作業を行う。
firebase init
を実行。Hostingの設定をやり直し。
asia-east1で作っていたのをus-east1に変更。
firebase deploy
でデプロイして確認。
画像が表示されるようになった。ので仮説が正しいと思われる。
Google Cloud Functionsでasia-east1に作成されていたssr〜〜のFunctionを削除。
また
firebase init
して、asia-east1にしてデプロイ。
治った。
あー、もー、こんなしょーもないことに4時間くらいかかったな。
まぁまぁ、ちょいちょいあるクラウド系トラブルだった。
Discussion