【Firebase】デプロイ時に「Firebase Hosting Setup Complete」の画面が出てきてしまう

はじめに

課題のアプリを作成してFirebaseへデプロイを行った際に、コマンド上ではデプロイが成功していたものの実際のURLでは以下のような画面が出現しました。

この画面が出てくる現象と原因についての備忘録記事です。

考えられる原因

①firebase initでの初期化時にビルド先としてdistが登録されていない

firebaseを使う際には初回にfirebase initによる初期化処理が必要になります。その中の質問文で以下のようなものが出てきます。

What do you want to use as your public directory? 

この質問はfirebaseでのデプロイとして使用したいディレクトリを聞かれています。
事前にnpm run buildを行っていた場合はdistのフォルダが作成されており、そのディレクトリをデプロイ対象とすることでデプロイを行いたいことになります。

ですが、上記の質問でdist以外のものを登録していると正しく反応できずにFirebase Hosting Setup Completeの画面が出てしまいます。

②既存のdistファイルを上書きしてしまっていた

仮にdistにindex.htmlが入っている状態でfirebase initを行った場合、下記の質問が出てくることがあります。

File dist\index.html already exists. Overwrite?

この質問は「すでにindex.htmlが存在します。上書きしますか？」と言う質問なので、Yesを選択するとFirebase Hosting Setup Completeが入ったHTMLに上書きされてしまいます。

対策

①事前にnpm run buildをしてdistフォルダを作成する

firebaseでのデプロイ時にWhat do you want to use as your public directory?でdistを入力するにはあらかじめdistフォルダを作成する必要があります。
buildを行ってdistフォルダを作成しておきましょう。

②jsonの記述をdistに対応するように修正する

今回のfirebaseの処理を行うためのjsonファイルとしてfirebase.jsonがありました。
このファイルのhostingのpublicがdistになっていなかったのでdistに変更しました。

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

③どうしても直らない場合は再度firebase initする

ここまでの過程を対応しても直らない場合は再度firebaseを初期化すると直る場合があります。
一度firebase initし、設定を再入力してみましょう。

参考資料