はじめに
Vue + Firebaseの記事が少なく手間取ったため、のちにプロジェクトを作るときの記録として残しておきます。
環境
- Windows 10
- WSL1 （ビルド、エミュレーター用）
- Node 10
- Visual Studio Code
- Google Chrome
- WSL1 （ビルド、エミュレーター用）
- UI フレームワーク
- Vue 2（Vue 3はVuetifyに未対応（2021/4 現在））
- Vue CLI v4.5.12
- Vuetify
- Vue 2（Vue 3はVuetifyに未対応（2021/4 現在））
- 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
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash
nvm install 10
nvm use 10
Vueのインストール2
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ファイルをクリックして閲覧できるようにする。3
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コードは(株)デンソーウェーブの登録商標です