NuxtとfirebaseによるWebサービス開発最初の一歩 #Firebase

はじめに

最近、「Nuxtとfirebaseでサービス開発する」系の記事が増えています。
* 結婚パーティーのため Nuxt と Firebase でサーバーレスなご祝儀を納品した話 - 病みつきエンジニアブログ
* 【v2対応】Nuxt.jsとFirebaseを組み合わせて爆速でWebアプリケーションを構築する - Qiita
* Nuxtとfirebaseによるサービス開発から100人の初期ユーザーの獲得までにやったこと - Qiita

記事を試してみようと思っている人もたくさんいると思いますが、説明を端折っていたりするためそのままでは動くところまで試してみることができないケースが多いと思います。そこで、現段階(2019/4/9)で、Nuxt.jsでfirebaseを最も簡単に試すことができる記事を紹介します。基本的はそのままで動作しますので変更した箇所のみ記載しています。
※) Nuxt.jsのインストールとFirebaseアカウント作成が事前に必要です。
ソースコードはGithubにあります。記事中の.envファイルに作成したFirebaseサービスの情報を記載すれば動くと思います。

導入編

Nuxt.jsで新規Webサービス(SPA)を作成し、Firebaseにdeployするところまで行います。
この記事だけでFirebaseのHosting機能が体験できます。
FirebaseでNuxt.jsで作成した新規(デフォルト)Webサービスがコマンド一発(firebase deploy)でdeployできるのは新鮮です。

変更点

Nuxtプロジェクト作成

Nuxt.jsのドキュメントに記載されているコマンドでプロジェクトを作成しました。
bash $ yarn create nuxt-app nuxt-firebase-todo ? Project name nuxt-firebase-todo ? Project description My exceptional Nuxt.js project ? Use a custom server framework none ? Choose features to install (Press <space> to select, <a> to toggle all, <i> to invert selection) ? Use a custom UI framework none ? Use a custom test framework none ? Choose rendering mode Single Page App ? Author name (適当な名前を設定) ? Choose a package manager yarn

Firebase関連のモジュールインストール後のビルドエラー

Nuxt v2.5.1だと以下のエラーが発生するためcore-jsも手動でインストールしないといけないらしい。
Nuxt2.5でのエラー：core-js/modules/es6.array.find in ./.nuxt/client.js

$ yarn add firebase-tools
$ yarn run dev
friendly-errors 08:12:42 To install them, you can run: npm install
 --save core-js/modules/es6.array.find core-js/modules/es6.array.iterator
   core-js/modules/es6.date.to-string core-js/modules/es6.function.name
   core-js/modules/es6.object.assign core-js/modules/es6.object.keys 
   core-js/modules/es6.object.to-string core-js/modules/es6.promise 
   core-js/modules/es6.regexp.constructor core-js/modules/es6.regexp.match 
   core-js/modules/es6.regexp.replace core-js/modules/es6.regexp.search 
   core-js/modules/es6.regexp.split core-js/modules/es6.regexp.to-string 
   core-js/modules/es6.string.includes core-js/modules/es6.string.iterator 
   core-js/modules/es6.string.repeat core-js/modules/es6.string.starts-with 
   core-js/modules/es6.symbol core-js/modules/es7.array.includes 
   core-js/modules/es7.promise.finally 
   core-js/modules/es7.symbol.async-iterator core-js/modules/web.dom.iterable

$ yarn add core-js@latest2.6.5

ログイン機能

/plugins/firebase.jsに直接記述するのはセキュリティ的に問題がありますので、dotenvを使いました。

$ yarn add @nuxtjs/dotenv
$ cat .env
FIREBASE_API_KEY=
FIREBASE_AUTH_DOMAIN=プロジェクトID.firebaseapp.com
FIREBASE_DATABASE_URL=https://プロジェクトID.firebaseio.com
FIREBASE_PROJECT_ID=プロジェクトID
FIREBASE_STORAGE_BUCKET=プロジェクトID.appspot.com
FIREBASE_MESSAGING_SENDER_ID=898540664043

$ cat nuxt.config.js
...
  modules: [
    '@nuxtjs/dotenv'
  ],
...

$ cat plugins/firebase.js
import firebase from 'firebase/app'
import 'firebase/auth'      // ログイン(認証)はこれだけでもOKです
import 'firebase/firestore' // データベース機能で使います
import 'firebase/database'  // データベース機能で使います

if (!firebase.apps.length) {
  firebase.initializeApp({
    apiKey: process.env.FIREBASE_API_KEY,
    authDomain: process.env.FIREBASE_AUTH_DOMAIN,
    databaseURL: process.env.FIREBASE_DATABASE_URL,
    projectId: process.env.FIREBASE_PROJECT_ID,
    storageBucket: process.env.FIREBASE_STORAGE_BUCKET,
    messagingSenderId: process.env.FIREBASE_MESSAGING_SENDER_ID
  })
}

export default firebase

データベース機能

ソースコードの変更なしで実行できました。

最後に

Nuxt.jsでFirebaseの機能(一部)を試してみるための記事を紹介しました。
Nuxt.jsとfirebaseでWebサービス開発する手助けになれば幸いです。

書籍

Nuxt.jsの使い方は以下の書籍が参考になりました(特に4章と5章)。
Nuxt.jsビギナーズガイド―Vue.js ベースのフレームワークによるシングルページアプリケーション開発 | 花谷拓磨 |本 | 通販 | Amazon

開発環境構築

「anyenv」が便利です。検索してみてください。