Viteで作成したReactプロジェクトをFirebaseでデプロイすると「Firebase Hosting Setup Complete」画面が表示される事象の解消方法

はじめに

お疲れ様です、りつです。

FirebaseでReactのWebアプリをデプロイしようとしたのですが、うまくいかなかったので記事にまとめます。

問題

上記のサイトを元にfirebase deployまで行い、ホスティングURLから画面を確認すると、以下のように「Firebase Hosting Setup Complete」画面が表示されてしまいました。

原因

firebase initで初期設定を行う際、以下の質問で回答した内容に誤りがありました。

? What do you want to use as your public directory?

私はnpm run buildを実行したらbuildディレクトリが作成されると思い、buildと回答しました。

しかし、今回作成したプロジェクトはViteで作成しているため、npm run buildで実際に作成されるディレクトリ名はdistでした。

本来参照すべきはdistディレクトリなのですが、回答を誤った結果buildディレクトリ配下のindex.htmlが参照され、「Firebase Hosting Setup Complete」画面が表示されてしまいました。

解決方法

以下の手順にて、Webアプリが画面上に表示されるようになりました。

1. buildディレクトリの削除
2. firebase.jsonの修正
3. firebase deployの実行

【 補足 】firebase.jsonの修正内容

• 修正前の状態

修正が必要なのは、hostingのpublicの設定です（以下の画像の赤線部分）。

今回の場合、buildではなくdistが正しいため、以下のようにソースコードを修正しました。

• 修正後のソースコード

firebase.json

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

おわりに

単純な原因でしたが解消できてよかったです。
無事Webアプリを公開することができました！

参考