Vue.js/vue-cli を Google Firebase にデプロイする

# はじめに

シンプルな Vue.js アプリケーションを Google Firebase にデプロイしたときの手順です。
Vue.js アプリは vue create xxxx コマンドにてあらかじめ作成済みとします。

# 手順

## firebase-tools のインストール

```
npm install -g firebase-tools
```

## Firebase にログイン

https://console.firebase.google.com/?hl=ja

## プロジェクト追加

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/83224/02ebbf70-3ef5-dcf0-db5c-1edf676dc091.png" width="50%" height="50%" />

## プロジェクト名とプロジェクトID

* プロジェクト名：任意
* プロジェクトID：全ユーザーでユニークなIDかつ、変更不可、URLなどに使用

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/83224/cfda5c8d-1d22-fe79-9eb0-dcf20c391828.png" width="50%" height="50%" />

## Google アナリティクス

Google アナリティクスでアクセス解析などができます。
デフォルトの「有効」のままで良いです。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/83224/52f673cc-cec8-ce89-90e0-13b1622c112b.png" width="50%" height="50%" />

## Google アナリティクスの構成

Google アナリティクスで使用するアカウントを指定します。
通常は「Default Account for Firebase」で良いです。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/83224/133053ea-69df-cb60-e086-996c7c93b116.png" width="50%" height="50%" />

## 完了

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/83224/2f7e4b85-aec3-ff2b-8a38-bd668e07c62d.png" width="50%" height="50%" />

## アプリ追加

「プロジェクトの概要」画面から Web のアイコン「 </> 」をクリックします。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/83224/4da137bb-5b30-fc53-559c-eb6a759a92a4.png" width="50%" height="50%" />

## アプリの登録

* ニックネーム：任意（プロジェクト名と同じで良いかと）
* 「このアプリの Firebase Hosting も設定します」：チェックを入れます
* サイト：デフォルトで生成されている「プロジェクトID」と同名のサイトで良いです

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/83224/61ed0df4-be49-face-e0c7-0d3a083146ff.png" width="50%" height="50%" />

## Firebase SDK の追加

今回は Firebase SDK を使わないのでそのまま進みます。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/83224/9f8f24f8-f105-0f3d-8213-17df059d020f.png" width="50%" height="50%" />

利用する場合は public/index.html ファイルの body タグ下部に下記スクリプトを貼り付ける？


## Firebase CLI のインストール

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/83224/cb269c2b-c92b-0619-c373-a80cb1df1c17.png" width="50%" height="50%" />


## Firebase デプロイ

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/83224/bf0d15b1-a52b-6260-0a8f-405b6cc714a6.png" width="50%" height="50%" />

## firebase init

ローカルで Firebase の初期設定を行う。
設定は firebase.json に記録されるので、後から設定変更する場合は firebase.json を編集する。

「y」で進む。

```
C:\Users\fukuchan-senpai\work\my-vue>firebase init

     ######## #### ########  ######## ########     ###     ######  ########
     ##        ##  ##     ## ##       ##     ##  ##   ##  ##       ##
     ######    ##  ########  ######   ########  #########  ######  ######
     ##        ##  ##    ##  ##       ##     ## ##     ##       ## ##
     ##       #### ##     ## ######## ########  ##     ##  ######  ########

You're about to initialize a Firebase project in this directory:

  C:\Users\fukuchan-senpai\work\my-vue

? Are you ready to proceed? (Y/n) y
```

ホスティングを選択する。

```
? Which Firebase CLI features do you want to set up for this folder? Press Space
 ( ) Database: Deploy Firebase Realtime Database Rules
 ( ) Firestore: Deploy rules and create indexes for Firestore
 ( ) Functions: Configure and deploy Cloud Functions
>(*) Hosting: Configure and deploy Firebase Hosting sites
 ( ) Storage: Deploy Cloud Storage security rules
 ( ) Emulators: Set up local emulators for Firebase features
 ( ) Remote Config: Get, deploy, and rollback configurations for Remote Config
```

「Use an existing project」を選択する。

```
=== Project Setup

First, let's associate this project directory with a Firebase project.
You can create multiple project aliases by running firebase use --add,
but for now we'll just set up a default project.

? Please select an option: (Use arrow keys)
> Use an existing project
  Create a new project
  Add Firebase to an existing Google Cloud Platform project
  Don't set up a default project
```

Firebase で作成済みのプロジェクトを選択する。

```
=== Project Setup

First, let's associate this project directory with a Firebase project.
You can create multiple project aliases by running firebase use --add,
but for now we'll just set up a default project.

? Please select an option: Use an existing project
? Select a default Firebase project for this directory:
  my-xxxx (my-xxxx)
  my-xxxx (my-xxxx)
  my-xxxx (my-xxxx)
> my-vue-fb (my-vue-fb)
```

* public ディレクトリはデフォルトの「public」ではなく、「dist」を選ぶ
* Vue.js は SPA なので、index.html に rewrite するは「Yes」で
* GitHub 連携は任意で
* index.html ファイルが存在している場合は上書きしない

```
=== Hosting Setup

Your public directory is the folder (relative to your project directory) that
will contain Hosting assets to be uploaded with firebase deploy. If you
have a build process for your assets, use your build's output directory.

? What do you want to use as your public directory? dist
? Configure as a single-page app (rewrite all urls to /index.html)? Yes
? Set up automatic builds and deploys with GitHub? No
? File dist/index.html already exists. Overwrite? No
i  Skipping write of dist/index.html

i  Writing configuration info to firebase.json...
i  Writing project information to .firebaserc...

+  Firebase initialization complete!
```

## ビルド

Vue.js にてビルド

```
npmで
>npm run build

yarnで
>yarn build
```

## firebase deploy

Firebase にデプロイ

```
C:\Users\fukuchan-senpai\work\my-vue>firebase deploy

=== Deploying to 'my-vue-fb'...

i  deploying hosting
i  hosting[my-vue-fb]: beginning deploy...
i  hosting[my-vue-fb]: found 2 files in dist
+  hosting[my-vue-fb]: file upload complete
i  hosting[my-vue-fb]: finalizing version...
+  hosting[my-vue-fb]: version finalized
i  hosting[my-vue-fb]: releasing new version...
+  hosting[my-vue-fb]: release complete

+  Deploy complete!

Project Console: https://console.firebase.google.com/project/my-vue-fb/overview
Hosting URL: https://my-vue-fb.web.app
```

# 確認

ブラウザから該当URLにアクセスしてページが表示されることを確認します。
https://[サイト名].web.app

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/83224/78b3e16e-1e11-0300-d093-f5c3ad2fb853.png" width="50% hight="50%" />