はじめに

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を使う¹

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

Vueのインストール²

npm install vue

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

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を行う

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を追加

vue add vuetify
# preset -> Default

Vueの設定変更

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

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

Build

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

npm run build

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

Firebase環境構築

Firebaseプロジェクト作成

二番煎じになるので、詳しくは書きません。Firebaseプロジェクト作り方を参考に作ってください。

Firebase CLIをインストール

Firebase CLIを使い、プロジェクトのテンプレートを作ることができます。

npm install firebase-tools

Firebaseのアカウントにログインし、プロジェクトを初期化する。

firebaseはFirebase CLIのコマンドです。
通常の設定からの変更点としてはPublic Directoryをdistに設定にしていることが挙げられます。これは、Vueのビルド先がdist であるためです。

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を使う設定になっています。

<!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

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

npm run build

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

次回

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

コメント

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