VueでFirebaseを使用する（DatabaseとHosting）

# はじめに
Vue.jsのプロジェクトでfirebaseを使用したので、その方法をまとめたいと思います。
firebaseのデータベースとホスティングを使用しました。
環境はvue-cliを使用しています。
[Vue.jsの環境構築](https://qiita.com/minuro/items/a7defcb9dbe4ac06856b)

# firebaseのプロジェクト作成
まず、firebaseのプロジェクトを作成します。
[firebaseのページ](https://firebase.google.com/?hl=ja)に行きGoogleアカウントでログインします。その後、コンソールへ移動すると以下のページになります。
`プロジェクトを追加`を選択します。（まだプロジェクトがない場合は、プロジェクトを作成のようなボタンがあります）
<img width="1440" alt="スクリーンショット 2020-01-04 18.53.25.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311225/3404b70f-1776-2953-92ed-8addcbcede2d.png">
任意の名前を設定します。
<img width="1439" alt="スクリーンショット 2020-01-04 18.53.39.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311225/ee415c81-f4cb-1b7b-6b5a-981e869d782a.png">
任意でGoogleアナリティクスを有効にします。
<img width="1440" alt="スクリーンショット 2020-01-04 18.54.14.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311225/f9ed7572-88a4-3f01-6c3d-dce6efa48058.png">
アカウントは`Default Account for Firebase`を選択します。
<img width="1440" alt="スクリーンショット 2020-01-05 21.38.37.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311225/450a7326-eb20-429a-8703-f9a523853d14.png">
以上でプロジェクトの作成は完了です。

# firebaseにアプリの追加
次に、作成したプロジェクトにアプリを追加します。
プロジェクトのページから`</>`というマークのボタンを押下します。
<img width="1440" alt="スクリーンショット 2020-01-04 18.56.19.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311225/8824027c-9866-6a7a-03ff-feb467071a3d.png">
任意のアプリ名を入力します。
<img width="1438" alt="スクリーンショット 2020-01-04 18.56.28.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311225/f40a2742-6a81-0aa2-6329-395efaec4b7b.png">
以下のスクリプトをVue.jsのソースファイルに記述することでfirebaseを導入します。（後ほど使用します。）
ここは閉じても、プロジェクトの設定から同様の内容を確認できます。
<img width="1440" alt="スクリーンショット 2020-01-04 18.57.03.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311225/83a29f5a-da1d-8108-cabb-dae94e1b3aca.png">

# Vueにfirebaseの追加
コンソールを起動し、Vue.jsで作成したプロジェクトのあるディレクトリで以下のコマンドを実行します。

```
npm install firebase
```
コマンド実行後、`main.js`を開き、以下の内容を追記します。

```js:main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import vuetify from './plugins/vuetify';
import firebase from 'firebase' // ※追加

Vue.config.productionTip = false

// ※追加 -ここから-
// Your web app's Firebase configuration
const firebaseConfig = {
  apiKey: "〜",
  authDomain: "〜",
  databaseURL: "〜",
  projectId: "〜",
  storageBucket: "〜",
  messagingSenderId: "〜",
  appId: "〜",
  measurementId: "〜",
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
firebase.analytics();
// ※追加 -ここまで-

new Vue({
  router,
  store,
  vuetify,
  render: h => h(App)
}).$mount('#app')

```
追加する内容は、`import firebase from 'firebase'`と、先ほどのスクリプトの以下の部分です。
<img width="699" alt="スクリーンショット 2020-01-04 18.57.03のコピー.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311225/e61446f0-9d9d-9961-5442-bdfd5e138f38.png">
以上で、firebaseを使用する準備は完了です。

# Databaseの使用
firebaseのDatabaseを使用する準備をします。
プロジェクトのページの左側にある`Database`を押下後、`データベースの作成`を押下します。
<img width="1440" alt="スクリーンショット 2020-01-04 20.10.05.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311225/defd06e2-6e66-499c-73f9-46b0b3f586c1.png">
本番環境かテストモードを選択します。
<img width="1440" alt="スクリーンショット 2020-01-04 20.10.14.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311225/5300af1a-ae28-db5f-de2e-fd98628dc0b0.png">
ロケーションを選択します。
東京を表す`asia-northeast1`を選択します。(2は大阪らしいです)
<img width="1438" alt="スクリーンショット 2020-01-04 20.10.28.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311225/66614c24-bf39-173f-6f02-f4ae293e63ae.png">
これで準備は完了です。
実際にソースで記述する方法は割愛いたします。

# Hostingの使用
firebaseでホスティングを行います。
※ホスティングだけであれば、`Vueにfirebaseの追加`の内容はしなくても大丈夫です。

プロジェクトのページの左側にある`Hosting`を押下後、`始める`を押下します。
以降の手順は、基本的には手順通りに実行すれば問題ありません。
<img width="1440" alt="スクリーンショット 2020-01-05 15.47.37.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311225/b33e398d-aedc-255e-23be-2a109c4291c3.png">

## 1.Firebase CLI のインストール
コンソールで以下のコマンドを実行します。

```
npm install -g firebase-tools
```
## 2.プロジェクトの初期化
まず、以下のコマンドでfirebaseにログインします。

```
firebase login
```
ログイン後、以下のコマンドで、初期化を行います。

```
firebase init
```
初期化時にいくつか質問があるので、以下のように入力します。

使用するサービスが聞かれますので、↓キーで`Hosting`にカーソルを移動後、スペースキーで選択します。
その後、エンターキーで決定します。

```
? Which Firebase CLI features do you want to set up for this folder? Press Space to select features, then Enter to confirm your choices. (Press <space> to select, <a> to toggle all, <i> to invert selection)
 ◯ 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

```
次に、初期化するプロジェクトを聞かれます。
すでに作成したプロジェクトを初期化するため、`Use an existing 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 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 
```
次に、公開ディレクトリを聞かれます。
vueでは、デフォルトでビルドすると`dist`というディレクトリが公開ディレクトリになるため、特に設定を変えていない場合は、`dist`と入力して、エンターキーを押下します。

```
=== 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
```
最後に、SPAかどうか聞かれるので、`y`を入力して、エンターキーを押下します。

```
? Configure as a single-page app (rewrite all urls to /index.html)? Yes
```
## 3.プロジェクトのビルド
次に、Vue.jsのプロジェクトをビルドします。
以下のコマンドを実行するだけです。

```
npm run build
```

## 4.Firebase Hosting へのデプロイ
最後に、実際にfirebaseにホスティングします。
以下のコマンドを実行します。

```
firebase deploy
```
実行結果の最後に、`Hosting URL`があるので、そのURLにアクセスすると、公開できていることが確認できます。