🗂

Next.js + Firebase HostingでnextのImage使ったら403エラーで困った(解決)

2023/09/24に公開

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>で表示した画像(でてないけど)を、ブラウザ右クリックから別タブを開いてみると、次の表示。
Image-Next.js 403error

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