5分でvueのアプリを作りfirebaseにhostingする

はじめに

こちらの記事を参考にvueアプリをfirebaseにhostingできたのでメモ

準備

グローバル環境にvue-cliを導入

$ npm i vue-cli -g

firebase CLIをグローバル環境に導入

$ npm install -g firebase-tools

firebaseにログイン

$ firebase login

firebaseのプロジェクトを作成する
https://firebase.google.com/

Vueアプリの作成

テンプレは色々あるが、今回はwebpackを使用

vue init webpack ＜アプリ名＞

その後色々聞かれるが、手っ取り早くhostinbgしたい方は全てenterで大丈夫です。

ローカルサーバーでホストできるか確認

<アプリ名>のディレクトリに移動後、プロジェクトが作成されていることを確認。
下記のコマンドを実行し、ローカルサーバーを立ち上げる。

$ npm install  # 少し時間かかる
$ npm run dev

サーバーが立ち上がっているかlocalhost:8080から確認。

firebaseにホストする

vueアプリをデプロイができる形に変えるためビルドする。

$ npm run build

distフォルダが生成される。

firebaseの初期化＆デプロイ

firebaseにホストできるように初期化

$ firebase init

下記の質問ではdistを指定する。

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

なお、間違ってしまっても下記ファイルから編集できる。

firebase.json

{
  "hosting": {
    "public": "dist",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

デプロイは下記コマンドで一発

$ firebase deploy

出来上がったもの

工事中ですが、一応完成したアプリ
https://aboutme-dc98f.firebaseapp.com/
https://toruokada.tokyo/

firebaseだと簡単にドメインの設定もできる。
あと、vue-routerにmode: 'history'を追記するとURL末尾の#を取り除くことができる。
HTML5 History モード

export default new Router({
  mode: 'history',
  routes: [
    //省略
  ]
})