vue-cli + Firebase toolsの初期設定 資料

# ◇ 開発環境

- Mac : mojave
- Node.js : v10.x~
- npm : v6.x~
- yarn : v1.19~
- vue-cli : v3.12~
- firebase-tools : v7.6~

※自分はApple大好きマンなのでwindowsで開発環境を構築することは基本的に考慮してないです。
 
# ◇ 事前準備

1. Googleアカウント作成
2. Firebaseのコンソールでプロジェクト作成
3. 開発マシンにNode.jsのインストール
4. 開発マシンにyarnをインストール
5. 開発マシンにvue-cliをインストール

もしくは下記を参考に`Docker + Vue CLI` 環境でも可。

https://qiita.com/s_sh/items/3ddc4a2b0f01a45ae5a6

# ◇ SDKのインストール

## ■ Firebase

[Firebaseのトップページ](https://firebase.google.com/?hl=ja) から
『使ってみる』→ 『プロジェクトを追加』に移動して
指示に従って進めて行ってください。
プランは Spark を選択してください。
アクセスが少なければ無料で使えます。
個人開発程度であれば無料枠内で収まります。
アナリティクスはどちらでも結構です。
Firebase側のプロビジョニングは多少時間がかかります。

## Firebaseでプロジェクトを作成

### - firebase のリージョン選択

firebaseのコンソールからプロジェクトを作成した後、
『Project Overview』の右側の歯車からsettingsに移動して
`Google Cloud Platform（GCP）リソース ロケーション` を設定します。
※ リージョンは後から変更できません

### - firebase のアプリ名の設定

マイアプリのセクションでアプリのニックネームなどを設定しておきます。
HostingのチェックもONにします。

### - firebaseのサービスを有効化する

サイドバーから『Database』『Storage』『Functions』の各ページから
使い始めるボタンを押下して有効化する。
ルールの選択ができますが、本番稼働させるわけではないのでテストモードでOKです。

## firebase toolsのインストールとプロジェクトの紐付け

```bash:firebaseの準備
$ yarn global add firebase-tools

# アカウント設定
$ firebase login

# 違うアカウントでログインしていた場合
$ firebase logout
$ firebase login // 別アカウントでログイン

# プロジェクト確認
$ firebase projects:list
```

```text:実行結果
┌──────────────────────┬──────────────┬──────────────────────┐
│ Project Display Name │ Project ID   │ Resource Location ID │
├──────────────────────┼──────────────┼──────────────────────┤
│ fb-sample            │ fb-sample    │ asia-northeast1      │
└──────────────────────┴──────────────┴──────────────────────┘
```

## Vue.js + Firebaseの場合

### 1) vueプロジェクトを先に作る 

vue-cliのいつもの流れで、vue.config.jsも適宜作成します。

```bash:vue.jsのプロジェクトファイル群を作成
$ vue create fb-sample
```

上記を実行すると色々聞かれますが、デフォルトでOKです。
SCSSを使いたい勢は下記のvue.config.jsなど色々設定変更が必要です。

```bash:fb-sample/vue.config.jsを追加
$ cd fb-sample // vue create したディレクトリに移動する
$ touch vue.config.js
```
### 2) firebaseの初期設定

下記コマンドを実行

```bash:fb-smaple/
$ firebase init
```

#### Firebaseのサービス選択

実行すると使用するfirebaseサービスの選択を求められます。
下記4種を選んで置けばとりあえずOKです。

- Firestore
- Functions
- Hosting
- Storage

#### 設定ファイルの名前

あとは設定ファイルの名前設定も求められますが、デフォルトでOKです。
`firebase.json`など色々聞かれます。

#### プロジェクト内のソースコード

ソースコードが新規作成か既存かを聞かれますが
`Use an existing project` でOKです。
『vue create fb-sample 』のソースコードをそのまま使って
firebaseの設定ファイルだけ追加していきます。

#### SPAとして公開するディレクトリの設定

Hosting Setup が聞かれるので `dist` で設定してください。
『yarn build』を実行すると`dist` 配下に静的ファイルとして出力されます。

### 3) firebaseの設定した後のディレクトリ構成の想定

```txt:ディレクトリ構成
workspace (任意のディレクトリ vue createコマンドはこのディレクトリで実行)
└── fb-sample (vue create で作られるディレクトリ)
     ├── dist/ (firebase deployコマンドでディレクトリ内のファイルが転送される)
     ├── node_modules/ (package.jsonを元にyarn installでインストールされたファイル群)
     ├── public/ 
     ├── src/
     │     ├── assets/
     │     │     ├── scss/ (SCSSを使う場合は任意で配置、vue.config.jsで設定が必要)
     │     │     │     ├── _mixin.scss
     │     │     │     └── _variables.scss
     │     │     ├── logo.png
     │     │     └── logo.svg
     │     │
     │     ├── components/
     │     ├── plugins/
     │     │   ├── auth.js (Firebaseのサービス毎に設定ファイルを分割)
     │     │   ├── cloudStorage.js (Firebaseのサービス毎に設定ファイルを分割)
     │     │   ├── firebaseConfig.js (Firebaseのアクセストークンとか)
     │     │   ├── firestore.js (Firebaseのサービス毎に設定ファイルを分割)
     │     │   └── vuetify.js
     │     │
     │     ├── views/
     │     │   ├── 各ページ.vue
     │     │   ...etc
     │     │
     │     ├── App.vue
     │     ├── main.js 
     │     ├── registerServiceWorker.js (PWA)
     │     ├── router.js　(vue-router)
     │     └── store.js (vuex)
     │
     ├── tests/
     │     ├── e2e/
     │     └── unit/
     │
     ├── README.md
     ├── babel.config.js
     ├── firebase.json (URLのリダイレクトを設定する場合などに編集する)
     ├── firestore.indexes.json
     ├── firestore.rules (Cloud Firestoreのアクセス権限を定義するファイル)
     ├── jest.config.js
     ├── package.json
     ├── postcss.config.js　
     ├── storage.rules (Cloud storageのアクセス権限を定義するファイル)
     ├── vue.config.js （任意で作成、vue-cliの設定を上書きします）
     └── yarn.lock (絶対編集しないこと)
```

### ４) deployするディレクトリはdistを指定する

firebase.jsonを編集する

```json:編集後のfirebase.json
前略
  "hosting": {
    "public": "dist", ←これに変更する
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  },
後略
```

### 5) 開発用サーバーを起動する

```bash:vue-cliの場合
$ yarn serve
```

### 6) デプロイしてみる

lintで先にチェックしてからビルドすると精神的に楽な気がする
ちなみに開発サーバーを起動しているとコマンドを実行できないので
`ctrl + c` でサーバーを停止するか、別ウィンドウから
下記のコマンドを実行しましょう。

```bash:ローカルからfirebaseにdeploy
$ yarn lint --fix
$ yarn build
$ firebase deploy
```


## ■ 参考資料 (という名のリファレンスのインデックス)

### ● Firebase

Cloud firestore

- https://firebase.google.com/docs/firestore/manage-data/add-data?hl=ja
- https://firebase.google.com/docs/firestore/quickstart?authuser=0
- https://firebase.google.com/docs/firestore/query-data/get-data?hl=ja
- https://firebase.google.com/docs/firestore/query-data/listen?hl=ja
- https://firebase.google.com/docs/firestore/security/secure-data?hl=ja#the_request_variable

Cloud strage

- https://firebase.google.com/docs/storage/web/start?authuser=0
- https://firebase.google.com/docs/storage/web/upload-files?hl=ja
- https://firebase.google.com/docs/storage/web/create-reference?authuser=0
- https://firebase.google.com/docs/storage/web/download-files?authuser=0
- https://firebase.google.com/docs/storage/security/start?authuser=0

Firebase Authentication

- https://firebase.google.com/docs/auth/web/start?hl=ja
- https://firebase.google.com/docs/auth/web/firebaseui
- https://firebase.google.com/docs/auth/web/manage-users?hl=ja/#get_the_currently_signed-in_user

### ● 後書き

他の機能はGCP・Firebaseで連携して色々やりたくなった時に記事にまとめようかと思います。
firestoreのバックアップとかpush通知とかメール配信とかML系APIを使う時とかだといいなぁ

次回作にご期待ください。（未完）

### ● 追記

#### Docker + firebase tools

```zsh
# localhost環境へアクセスしない。
$ firebase login:ci --no-localhost
```