Firebase hostingする際のエラー対処法

私がFirebaseでホスティングする際にエラーが出て詰まりかけた部分を解説します。

ホスティングまでの流れ

まずはvue cliでプロジェクトを作成します。

vue create プロジェクト名

その後firebase-toolsをインストールします。

$ npm install -g firebase-tools


firebase-toolsのバージョンが変更してるとエラーが出るので、

firebase logout
firebase login


これで一度エラーで詰まりました。

firebase コンソールにてプロジェクトを作成します。
firebase SDKにてコードをコピペし、main.jsに貼り付けます。

// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
import { getAnalytics } from "firebase/analytics";
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries

// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
  apiKey: "",
  authDomain: "",
  projectId: "",
  storageBucket: "",
  messagingSenderId: "",
  appId: "",
  measurementId: ""
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);
 getAnalytics(app);

キーを隠す

ここでfirebaseConfigのデータは盗まれると大変なので、.enbなどを使用し、キーをネットに上げないようにしましょう。

ビルド

アプリをビルドできる状態にし、

npm run build

Firebaseの初期化

$ firebase init hosting

     🔥🔥🔥🔥🔥🔥🔥🔥 🔥🔥🔥🔥 🔥🔥🔥🔥🔥🔥🔥🔥  🔥🔥🔥🔥🔥🔥🔥🔥 🔥🔥🔥🔥🔥🔥🔥🔥     🔥🔥🔥     🔥🔥🔥🔥🔥🔥  🔥🔥🔥🔥🔥🔥🔥🔥
     🔥🔥        🔥🔥  🔥🔥     🔥🔥 🔥🔥       🔥🔥     🔥🔥  🔥🔥   🔥🔥  🔥🔥       🔥🔥
     🔥🔥🔥🔥🔥🔥    🔥🔥  🔥🔥🔥🔥🔥🔥🔥🔥  🔥🔥🔥🔥🔥🔥   🔥🔥🔥🔥🔥🔥🔥🔥  🔥🔥🔥🔥🔥🔥🔥🔥🔥  🔥🔥🔥🔥🔥🔥  🔥🔥🔥🔥🔥🔥
     🔥🔥        🔥🔥  🔥🔥    🔥🔥  🔥🔥       🔥🔥     🔥🔥 🔥🔥     🔥🔥       🔥🔥 🔥🔥
     🔥🔥       🔥🔥🔥🔥 🔥🔥     🔥🔥 🔥🔥🔥🔥🔥🔥🔥🔥 🔥🔥🔥🔥🔥🔥🔥🔥  🔥🔥     🔥🔥  🔥🔥🔥🔥🔥🔥  🔥🔥🔥🔥🔥🔥🔥🔥

You're about to initialize a Firebase project in this directory:

  ＜フォルダ名＞


=== Project Setup

First, let's associate this project directory with a Firebase project.
You can create multiple project aliases by running firebase use --add, 
but for now we'll just set up a default project.

? Select a default Firebase project for this directory: ＜Firebase のプロジェクト名＞ (＜Firebase のプロジェクト名＞)

=== Hosting Setup

Your public directory is the folder (relative to your project directory) that
will contain Hosting assets to be uploaded with firebase deploy. If you
have a build process for your assets, use your build's output directory.

? What do you want to use as your public directory? dist
? Configure as a single-page app (rewrite all urls to /index.html)? No
✔  Wrote dist/404.html
? File dist/index.html already exists. Overwrite? No
i  Skipping write of dist/index.html

i  Writing configuration info to firebase.json...
i  Writing project information to .firebaserc...

✔  Firebase initialization complete!

この質問は超大切なので、しっかり全部理解しましょう。
適当にやると詰みます

ちなみにfirebase initでもできます。その際はhostingをスペースキーを押して選択しましょう。

? Select a default Firebase project for this directory: ＜Firebase のプロジェクト名＞ (＜Firebase のプロジェクト名＞)

この質問ですが、firebaseで紐づけるプロジェクトを選択します。
exist a project
みたいなのが出てくるので選ぶ→ちゃんと自分がさっき作ったプロジェクトにする

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

これは初期設定だとpublicになってしまい、
Welcome Firebase Hosting Setup Complete

というデモサイトが作られてしまうので、必ずdistを選んでください。
私はなぜかdistすらデモサイトになってしまい、ここをdocsにすれば解決しました。

? Configure as a single-page app (rewrite all urls to /index.html)? 

ここはシングルページで良いのでY

? File dist/index.html already exists. Overwrite? No

ここはYにしてしまうとまたデモサイトが作られてしまうので、絶対にN

あとはgithubに自動であげますか？みたいなこと聞かれますが、Nでいいです。

ここまで来ればあとは

'''
$firebase serve
'''

でちゃんとサイトがみれるかローカルで確認してから

$firebase deploy

これで完成です。
お疲れ様でした。