Nuxt で Firebase を使う (Cloud Firestore & Hosthing)

株式会社ROLOさんが主催しているJavaScript Buildersで受けたHands-onでやったことを復習も兼ねて調べながらメモ。

1. Nuxtのプロジェクトを作成

$ npx create-nuxt-app <Project Name>
$ cd <Project Name>

create-nuxt-appをインストールした覚えがないのですが、npxコマンドだとそのままプロジェクトが作成できるっぽい!?

Nuxt.jsの起動

$ yarn run dev

ブラウザでhttp://localhost:3000にアクセス

Nuxt.jsで静的ファイルの生成

$ yarn run generate

2. プロジェクトをFirebaseに接続する

Firebaseのコンソールから新規プロジェクトを作成している前提。

2-1. Firebase CLIのインストール

Firebase CLIは、Firebase プロジェクトの管理、表示、デプロイを行うためのさまざまなツールを提供します。

firebaseを使うプロジェクトを今後もつくりそうならglobalにインストールしてしまって良いと思います。

$ npm install -g firebase-tools

2-2. FirebaseアカウントにPCを接続

$ firebase login

コマンドを実行するとgoogleアカウントの選択画面が表示されるので、Firebaseを使用しているアカウントを選択してFirebase CLIに許可を与える

2-3. Firebaseの設定をプロジェクトに追加

NuxtでFirebaseを使いたいので、1.のcreate-nuxt-appで作成したNuxtプロジェクトディレクトリのトップで下記コマンドを実行

$ firebase init

firebase init コマンドでは、新規ディレクトリは作成されません。新しいプロジェクトをゼロから開始する場合は、先にディレクトリを作成し、その新しいディレクトリに移動してから、init コマンドを実行する必要があります。
出典: Firebase CLI リファレンス  |  Firebase

コマンドを実行するとターミナル上で色々と訊かれます。

? Which Firebase CLI features do you want to setup for this folder? Press Space to sele
ct features, then Enter to confirm your choices.

どのサービス使うか
上下ボタンで使いたいサービスに移動してスペースキーで選択 ※ 日本語入力になっているとスペースで選択できないので注意
データベース(firestore)とホスティング(Hosting)を選択

? Select a default Firebase project for this directory

どのFirebaseプロジェクトを利用するか
予め作っておいたプロジェクトを選択

? What file should be used for Firestore Rules? (firestore.rules)

データベース(firestore)のルールファイル名は何にするか

? What file should be used for Firestore indexes? (firestore.indexes.json)

データベース(firestore)のインデックスのファイル名 (インデックスファイルはちょっと理解できてない

? What do you want to use as your public directory? (public)

FirebaseのHosthingにアップして公開するディレクトリ
Nuxtの場合は静的ファイルの生成がdistディレクトリになるのでdistと入力

? Configure as a single-page app (rewrite all urls to /index.html)? (y/N)

SPA様に設定するか

質問が終わるとFirebase関連のファイルが生成される

• .firebaserc
• firebase.json
• firestore.indexes.json
• firestore.rules
• dist/index.html

2.4. Firebaseにデプロイ

下記コマンドで、デプロイするディレクトリに指定した./dist内がアップロードされる

$ firebase deploy

3. Firebaseの接続情報を.envファイルから読み込めるようにする

Nuxt.js の dotenv-module を利用する事で、こういった環境個別の設定情報を .env ファイルを用いて柔軟に切り替えることが出来るようになります。
.env 内の変数情報は、Nuxt 内にて、 process.env.API_URL のようにして参照する事が可能です。
出典: Nuxt.js で dotenv を活用する – chatbox.blog

@nuxtjs/dotenvのインストール

$ yarn add @nuxtjs/dotenv

3-1. Nuxtでdotenvモジュールの使用を設定

nuxt.config.jsのmodulesに設定を追加

module.exports = {
  /*
  ** Nuxt.js modules
  */
  modules: [
    '@nuxtjs/dotenv',
  ],
}

3-2. .envファイルにfirebaseの接続情報を記述

.envファイルの作成

$ touch .env

firebaseプロジェクトの設定から</>アイコンをクリックして表示される接続情報を.envファイルに設定します。
.envファイルはNuxtのプロジェクトでは自動的に.gitignoreされているので間違ってgit pushしてしまう心配が無いそうです！

</>をクリックすると接続情報がモーダルで表示される

FB_API_KEY=<FIREBASE_API_KEY>
FB_AUTH_DOMAIN=<FIREBASE_ AUTH_DOMAIN>
FB_DATABASE_URL=<FIREBASE_DATABASE_URL>
FB_PROJECTID=<FIREBASE_PROJECT_ID>
FB_STORAGE_BUCKET=<FIREBASE_ STORAGE_BUCKET>
FB_MESSAGING_SENDER_ID=<MESSAGING_SENDER_ID>

3-3. Nuxtでfirebaseの接続をする

pluginsディレクトリにFirebaseと接続するためのプラグインを作成する
Nuxtでは(Vueでは？)自前のライブラリはpluginsディレクトリ内に置くお作法っぽいです。

plugin/firebase.js

import firebase from "firebase";

// .env に設定した値を取得してる
const config = {
  apiKey: process.env.FB_API_KEY,
  authDomain: process.env.FB_AUTH_DOMAIN,
  databaseURL: process.env.FB_DATABASE_URL,
  projectId: process.env.FB_PROJECTID,
  storageBucket: process.env.FB_STORAGE_BUCKET,
  messagingSenderId: process.env.FB_MESSAGING_SENDER_ID
}

if (!firebase.apps.length) {
  firebase.initializeApp(config)
}

export default firebase

nuxt.config.jsにプラグインのパスを追加
nuxt.config.js

module.exports = {
  /*
  ** Plugins to load before mounting the App
  */
  plugins: [
    '~/plugins/firebase',
  ],
}

Firebaseを使用するページのテンプレートでプラグインを読み込み pages/index.vue

<script>
import firebase from "~/plugins/firebase.js"
</script>

nuxt.config.jsにプラグインのパスを書けば自動的に全ページで使えるようになる訳ではなく、 プラグインを使用したいページで都度importする必要があるようです。

nuxt.config.jsにパスを書くのは静的化したりする時に何をbundlするかってのをwebpackみたいに明示化してるって感じなのでしょうか？(理解しきれてない部分です。

fc. プラグイン - Nuxt.js

4. Cloud Firestoreのデータにアクセス

ページからFirebaseのリアルタイムデータベースCloud Firestoreに接続してデータ/追加を取得します

pages/index.vue

<script>
import firebase from "~/plugins/firebase.js"

const db = firebase.firestore();
const settings = { timestampsInSnapshots: true };
db.settings(settings);

// データの取得(全件)
const getItems = async () => {
  return db.collection('<collection_name>')
    .orderBy('createdAt', 'asc')
    .get();
};

// データの追加
const addItem = async (content) => {
  return db.collection('<collection_name>').add({
    ...content,
    createdAt: new Date(), // createAt フィールドがないとエラーが表示されるっぽい。
  })
  .then((res) => {
    console.log('Add Document with ID:', res.id);
    return res.id;
  })
  .catch((err) => {
    console.error('Error: Add Document', err);
    throw err;
  });
};
</script>

これでFirebaseとの連携はできているので、データの取得・追加メソッドを適時実行するようにすればOK
yarn run devしておけばホットリロードで作っている最中のものが確認できます。
Cloud Firestoreを使ったアプリが完成したら下記コマンドで静的ファイルを生成して、Firebaseにデプロイ。

$ yarn run generate
$ firebase deploy

まとめと感想

本当に簡単にFirebaseと連携したものを作り公開まですることができました！！(2,3時間程度で)
新しいことが出来るようになるって、たーのしー！
色々なサービスを使って簡単に取りあえず動くものが作れるってのはモチベーションの維持にもとても良いですね。

と、同時に設定ファイルのことや、Nuxtフレームワークのお作法とか、まだまだ理解できてない部分もあり特にVue.jsを理解してないとNuxtのお作法の理解は難しそうだなーって部分と静的化されたもファイルの中を見ておらずブラックボックスなままで、どうやって静的なHTML+CSS+JavaScriptからFirebaseに接続しているのかって部分を理解しなければと新しい課題も見つかりました。
素晴らしいHands-onを開催してくれて本当にありがたい。

情報格差について感じたことのポエム（書いているうちに長くなったので読む必要なし）

東京 無料の勉強会もHands-onもめっちゃ多くてマジヤヴァイ。
インターネッツや本だけじゃなく、リアルに触れらる情報へのアクセスの容易さや身近に直に尋ねることが出来る人が多いって環境の格差があるとそりゃ田舎ちほーと差が生じるよっなーってほぼ限界集落の田舎ちほー送りになってたマンとしては実感してる日々です。ホントありがたい限りです。
ありがとうconnpass！ (Doorkeeperのイベントは有料のが多い肌感

インターネットやSNSで情報得られるやろ！ってご意見もあるかと思いますが、インターネットは能動的に検索しなければ情報は得られず、探している情報以外は得にくいと感じています。
そして検索して出てきた情報が実際に使ってみてどうなのか？とかやり方が沢山出てくるようなジャンルではどういう思想でどのやり方を選択するのがスマートなのか？といった事を判断するのが特に知識の乏しいジャンルを学び始めた人にとっては難しいと思うのです。
故に身近に実際に使っている人が多く居て、その人達の意見を聞ける場が多いという環境は、検索ではでで来なかった別のアプローチなど予期せぬ知識を得られる場にもなっているという意味で、インターネットやSNSだけの環境より優位だと感じています。

つまり、本屋がない地域でもアマゾンがあれば本は買えるけど、本屋をぶらついて偶然目に入ったモノを立ち読みして良かったから買った。とか装丁が綺麗な本だったからジャケ買いした。というような偶然の出逢いは困難。というような感覚です。

モノの時代から、金融の時代になり、情報の時代を経て、知識の時代になるのであれば、知識に触れられる機会が用意な場所の方が優位になるのではないか、という感覚。
「銃・病原菌・鉄」や「未来に先回りする思考法」とかに影響を受けているのでこんな感覚なのだと思うけれど。

---

[参考]

• Nuxt.js - The Vue.js Framework
  • プラグイン - Nuxt.js
• 【Nuxt.js】create-nuxt-appでNuxt.js(v2.0.0)を始める - Qiita
• 【v2対応】Nuxt.jsとFirebaseを組み合わせて爆速でWebアプリケーションを構築する - Qiita
  • Nuxt.js で dotenv を活用する – chatbox.blog
  • GitHub - nuxt-community/dotenv-module: Loads your .env file into your application context
• Firebaseの始め方 - Qiita
• Firebase を JavaScript プロジェクトに追加する  |  Firebase
  • Firebase CLI リファレンス  |  Firebase
    • GitHub - firebase/firebase-tools: The Firebase Command Line Tools
    • firebase-toolsのコマンドの使い方 - Qiita
  • データベースを選択: Cloud Firestore または Realtime Database  |  Firebase
• Firestore の Timestamp の仕様変更による警告と、その対処 - Qiita

Nuxt.jsビギナーズガイド―Vue.js ベースのフレームワークによるシングルページアプリケーション開発