理系公務員のプログラミング日記

FireBase Hostingでアプリをデプロイしよう

FireBaseのプロジェクトを作る

Firebaseのトップから任意のプロジェクトを作ります。

マイアプリからWebアプリケーションを登録する

プロジェクトの概要の設定（歯車）マーク→アプリの追加からWebアプリを選ぶ。

このアプリのFirebase Hostingも設定します。をクリックする。

再びトップの設定（歯車）マークから、ロケーションの選択画面は東京のasia-northeast1または大阪のasia-northeast2を選択

Webアプリケーション側で設定をしていく

firebase-toolsをダウンロード

npm install -g firebase-tools

firebaseにログイン

firebase login

この画面で Yes を入力すると、ブラウザが立ち上がって認証の画面に飛びます

i  Firebase optionally collects CLI usage and error reporting information to help improve our products. Data is collected in accordance with Google's privacy policy (https://policies.google.com/privacy) and is not used to identify you.

? Allow Firebase to collect CLI usage and error reporting information? Yes

戻ったら、firebaseを初期化します。

firebaseを初期化

firebase init

こんな感じのアスキーアートが出ます

Realtime Database と　Hosting を利用する

利用するサービスにスペースキーで選択できます。

今回は、Realtime Database と Hostingを選択してください。

Realtime Databaseの設定

省略

Hostingの設定

最初はどのフォルダをデプロイするのかを聞かれています。distとしてください。

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

そのほかはYesとし、最後のGitHubの連携については今回はNoとしておきます。

? Configure as a single-page app (rewrite all urls to /index.html)? Yes
? Set up automatic builds and deploys with GitHub? No

###　 ビルドする

Vueで作ったアプリケーションをビルドします。

ビルドでは、開発していたアプリケーションを本番のサーバーで運用するために、VueをJavaScriptに変換したり、コメントや空白などの実行に必要ではないコードを削除する作業などを行います。

ビルドを行った結果は、Vueでは distフォルダに出力されるので、上記のHostingの設定の中で、このフォルダを指定しました。

npm run build

デプロイする

buildが完了したらデプロイしてください。

firebase deploy --only hosting