QR忘れ物アプリ (1) 環境構築 [Vue,Vuetify,Firebase]

# はじめに
Vue + Firebaseの記事が少なく手間取ったため、のちにプロジェクトを作るときの記録として残しておきます。

# 環境
- Windows 10
    - WSL1 （ビルド、エミュレーター用）
        - Node 10
    - Visual Studio Code
    - Google Chrome
- UI フレームワーク
    - Vue 2（Vue 3はVuetifyに未対応（2021/4 現在））
        - Vue CLI v4.5.12
    - Vuetify
- Firebase 8.3.1
    - Firebase CLI
    - Firebase Auth
        - Firebase Auth UI
    - Firebase Realtime Database (RTDB)
    - Firebase Hosting
    - Firebase Functions
    - Firebase Emulator Suite
        - Auth, RTDB, Hosting, Functions

# Vue環境構築
## node 10のインストール
aptではnode 10はインストールできないので、nvmを使う[^1]

```bash
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash
nvm install 10
nvm use 10
```

## Vueのインストール[^2]

```bash
npm install vue
```

## Vueプロジェクトをqr-lost-and-foundのディレクトリに作る

```bash
vue create qr-lost-and-found
# Preset ->Manually select features
# Features -> Babel, Router, Vuex, Linter
# Vue.js version -> 2.x
# history mode for router -> Yes
# Use history mode for router -> Yes
# Linter / formatter config -> Prettier
# Additional lint features -> Lint on save
# Config location for Babel, ESLint -> In dedicated config files
# Save this as a preset -> N
```

## Gitのinitial commitを行う

```bash
cd qr-lost-and-found
git config --global user.email {your email}
git config --global user.name {your username}
git add -A
git commit -m "initial commit"
```

## Vuetifyを追加

```bash
vue add vuetify
# preset -> Default
```

## Vueの設定変更
`vue.config.js`にpublicPathを追加して、ローカルのindex.htmlファイルをクリックして閲覧できるようにする。[^3]
vue uiからも設定の変更可能。その場合、`vue ui`コマンドで開いて、プロジェクト設定>Vue CLI>公開パスを`./`にする。

```
module.exports = {
  transpileDependencies: ["vuetify"],
  publicPath: './'
};
```

## Build
正常にインストールできているかを確認するためにビルドする。

```bash
npm run build
```
`./dist/index.html`をブラウザで開いてVuetifyの画面が表示されることを確認する。

# Firebase環境構築
## Firebaseプロジェクト作成
二番煎じになるので、詳しくは書きません。[Firebaseプロジェクト作り方]を参考に作ってください。
## Firebase CLIをインストール
Firebase CLIを使い、プロジェクトのテンプレートを作ることができます。

```bash
npm install firebase-tools
```

## Firebaseのアカウントにログインし、プロジェクトを初期化する。
`firebase`はFirebase CLIのコマンドです。
通常の設定からの変更点としてはPublic Directoryを`dist`に設定にしていることが挙げられます。これは、Vueのビルド先が`dist` であるためです。

```bash
firebase login
firebase init
# Features: Database, Functions, Hosting, Emulator
# Project: Use an existing project
# Select project: Firebaseで自分の作ったプロジェクトを選択
# Database security rules: Enter
# Language: Javascript
# ESLint: No
# Install dependencies now: Y
# Public directory: dist
# Configure as SPA: N
# Automatic build and deploy: N
# Overwrite public/index.html: N
# Emulators setup: Authentication, Functions, Database, Hosting
# Port for auth: Enter
# Port for functions: Enter
# Port for database: Enter
# Port for hosting: Enter
# Enable Emulator UI: Y
# Port for Emulator UI: Enter
# Download the emulators now: y
```

## Firebase SDKをインポート
public/index.html内に登録します。
`?useEmulator=true`になっており、Emulatorを使う設定になっています。

```javascript
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <!-- update the version number as needed -->
    <script src="/__/firebase/8.3.1/firebase-app.js"></script>
    <!-- include only the Firebase features as you need -->
    <script src="/__/firebase/8.3.1/firebase-auth.js"></script>
    <script src="/__/firebase/8.3.1/firebase-database.js"></script>
    <script src="/__/firebase/8.3.1/firebase-functions.js"></script>
    <!-- 
      initialize the SDK after all desired features are loaded, set useEmulator to false
      to avoid connecting the SDK to running emulators.
    -->
    <script src="/__/firebase/init.js?useEmulator=true"></script>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>
```

## Build
再びテストのためビルドします。先ほどのビルドより時間がかかります。

```bash
npm run build
```
`./dist/index.html`をブラウザで開いて先ほどと同じくVuetifyの画面が表示されることを確認します。

# 次回
Firebase Auth + Firebase Auth UIを用いてログインページを作ります。

# コメント
>
- Firebase + Vueの組み合わせの設定方法で参考にしたリンク: https://qiita.com/fukuchan-senpai/items/4ea6cd97c196689d152e
- QRコードは(株)デンソーウェーブの登録商標です

[Firebaseプロジェクト作り方]: https://qiita.com/fukuchan-senpai/items/4ea6cd97c196689d152e
[^1]: https://askubuntu.com/questions/1273438/how-to-install-node-js-version-10-on-ubuntu-18-04
[^2]: https://vuejs.org/v2/guide/installation.html
[^3]: https://github.com/vuejs/vue-cli/issues/5162