Firebaseでデプロイ成功したにも関わらず、アプリのトップページを表示できない

はじめに

原因がわからず、試行錯誤してしまったので、記事に残します。

問題

Firebaseでデプロイ成功したにも関わらず、アプリのトップページを表示できない

以下の形で、デプロイ成功したという画面は出るが、アプリのトップページを表示できない

Welcome
Firebase Hosting Setup Complete
You're seeing this because you've successfully setup Firebase Hosting. Now it's time to go build something extraordinary!

Open Hosting Documentation

解決方法

firebase.jsonのpublic"の値を"public"ではなく "dist"にする必要があった。
public/index.htmlではなく、dist/index.htmlを読み込む必要があるため。
上記画像は、public/index.htmlを読み込んでいるだけだった。

firebase.json

{
  "hosting": {
    "public": "dist",  // **変更箇所**
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

おわりに

Firebaseの登録、デプロイ方法を間違えたのかと思い、作り直してしまいました。

参考

React(SPA)アプリをFirebase Hostingにデプロイ
https://zenn.dev/yumemi_inc/articles/2020-10-06-react-firebase-deploy

Firebase上にReactアプリを公開【2024年版】
https://zenn.dev/conecone/articles/058755b87fec41