Firebase HostingにVue CLIで作成したビルド済みページをデプロイしてブラウザで表示します。
前提
- Googleアカウントを持っている
- Vue CLIをインストール済み
Firebaseプロジェクトの作成
Firebaseページから「コンソールへ移動」をクリック。移動したらプロジェクトの追加をクリック。
プロジェクト名を適当に決めます。
アナリティクスは今回はオフに
「プロジェクトを作成」を押してしばらくすると新しいプロジェクトが出来上がります。
Vueプロジェクトの開始
デプロイするVueアプリを作成していきます。バージョンは3.8.4を使用しました。
$ vue --version
3.8.4
今回はデフォルト設定のVueプロジェクトを作ります。
$ vue create firebase_deploy_sample
defaultを選択。
Firebase CLIを使ってHostingにデプロイ
先ほど作成したFirebaseのプロジェクトのページから左のメニューから「開発 > Hosting」へと移り、「はじめる」ボタンを押します。
以下に書かれているnpmコマンドを使ってFirebase CLIツールをインストールします。
$ npm install -g firebase-tools
先ほど作成したVueアプリのディレクトリに移動し、Firebaseへのログインとプロジェクトの初期化を行います。Firebase CLIのバージョンは7.2.2を使っています。
$ firebase --version
7.2.2
$ firebase login #自分のGoogleアカウントへログイン
$ firebase init
Hostingにカーソルを合わせてスペースキーで選択し、Enter。
使用するFirebaseプロジェクトを聞かれるので先ほど作ったものを選択。
次にデプロイする対象のディレクトリを聞かれるのでVueをビルドした時に作成されるdistと入力しEnter。（distributionのdistらしいです。）
SPAページかどうか聞かれるのでyを入力。
? Configure as a single-page app (rewrite all urls to /index.html)? (y/N)
これでfirebaseの設定は完了で.firebasercとfirebase.jsonがディレクトリに追加されています。
最後にVueアプリをビルドし、コマンドでデプロイします。Hosting URL: ...にブラウザーでアクセスするとちゃんとページがデプロイされているのがわかるかと思います。
$ npm run build
$ firebase deploy
