Vue.jsで作成したアプリをfirebaseにデプロイする方法(Firebase Hosting Setup Completeへの対処)

2959 ワード
Firebase Vue.js FirebaseHosting Vue.js テキストリンク

概要

React.jsやVue.jsで作成したアプリのホスティングの方法にはいくつかありますが、今回はVue.jsのfirebase Hostingによるホスティング方法について説明します。
Firebase Hosting Setup Completeの対処法がイマイチ見つからなかったので、多く出ている方法ですが今回記事にしました。

手順

1, firebaseにログインする

// firebase-cliをインストールする
npm install -g firebase-tools

//firebase にログインする。
firebase login

※ログアウト方法は　firebase logout

こんな画面が出てくるので、「許可」を押して下さい。

成功すると、こんな感じの画面になります。

2, 必要な設定をして、リリースする


//初期化処理を行う
firebase init

// サービスを選択する
→「Hosting」を選択
→Projectを選択。
(firebase側で手動で作っていればUse an existing project )
(なければ Create a new project )

// 以下の質問に下記画像のように回答する
What do you want to use as your public directory? (public) dist
Configure as a single-page app (rewrite all urls to /index.html)? Yes
File dist/index.html already exists. Overwrite? No

// デプロイする。
firebase deploy

// 下記のように表示されるので、Hosting URLをブラウザで開くと、デプロイが確認できる。
✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/プロジェクト名/overview
Hosting URL: https://プロジェクト名.firebaseapp.com

3,Firebase Hosting Setup Completeへの対処

もしも、リリースしたページにアクセスしたのに
Firebase Hosting Setup Complete
としか表示されないことがあるかと思います。
これはfirebaseがホスティングしているファイルパスが正しくない場合に起きる状態です。

対処としては、下記２点が正しくできているかを確認してください。
１、firebase.jsonのpublicがdistになっているか

２、distを削除して、firebase initを再度実行し、下記設定でできていることを確認してください。