Vue CLI3のプロジェクトをFirebaseで公開するまでにやったこと

Vue CLIを開発したプロジェクトをFirebaseで公開するために以下のことを行いました。

これからVue.jsをやってみたい人の
学習の手助けになれば幸いです。

手順は難しいものでなく
公式サイトで紹介されている手順通りにやれば大丈夫でした。

やったこと

Firebase のプロジェクトを作成する。

  1. Firebaseの公式サイトにGoogleアカウントでログインする。
  2. Firebaseのコンソールでプロジェクトを新規作成する。

https://console.firebase.google.com/

Firebase CLIをインストールする

npm install -g firebase-tools

Firebase CLIからFirebaseにログイン

firebase login
// chromeが立ち上がる


Vue.jsのプロジェクトディレクトリでfirebase initを実行

cd my-project
firebase init

firebase initで色々指定を求められましたがVue CLIの公式サイトを参考に以下を選択しました

  • 最初のラジオボタンみたいな選択ではhostingを選択
  • 公開ディレクトリをdistを指定(デフォルトはpublic)
  • プロジェクトは作成したものを指定

firebase.jsonを編集

{
  "hosting": {
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

Vueプロジェクトをビルド

npm run build


Firebaseのプロジェクトにデプロイ

firebase deploy --only hosting

コマンド実行結果に表示されるURLをアクセスしたら
ローカル環境と同じ画面を表示できました。

f:id:hiramatch:20181215220854p:plain

参考

VueCLIの公式サイト
cli.vuejs.org

vue init コマンド実行時の指定や
firebase.jsonの内容を参考にしました。

vue-router公式サイト
router.vuejs.org

vue routerがhistoryモードでのFirebaseの設定を確認

次回

残りの画面を仕上げる