FirebaseとNuxt.jsで、CRUDのベストプラクティスを作ってみる。（主にFirebaseまわりについて）

FirebaseとNuxt.jsで、CRUDのベストプラクティスを作ってみます。

できあがったもののプレビューはこちらから
■nuxt-basic-crud2
https://nuxt-basic-crud2.firebaseapp.com

作ったファイルは以下にアップしています。
■dog-ears/nuxt-basic-crud
https://github.com/dog-ears/nuxt-basic-crud

【環境】
・Windows10
・Visual Studio Code
・Node（Nodist）

ホスティングは、firebase hostingを使用する。
データベースは、Cloud Firestoreを使用する。

Nuxtは、サーバーサイドレンダリング（SSR）させる。
yarnは使わず、npmを使う。

（１）環境の準備

###1) Visual Studio Codeをインストール

###2) Nodeは、Nodistを使用。

■Nodist（公式）
https://github.com/nullivex/nodist/releases

2020年2月現在、Cloud FunctionsのNode.jsのバージョンは、10.15.3

■The Node.js 10 Runtime（英語）
https://cloud.google.com/functions/docs/concepts/nodejs-10-runtime?hl=en

nodistインストール後、下記実行

nodist + 10.15.3
nodist 10.15.3

nodeのバージョンは、10.15.3
npmのバージョンは、6.4.1
npxのバージョンは、10.2.0

#（２）Firebase の準備およびhostingテストまで。
###1) firebaseコンソールでやること
firebaseコンソールをブラウザで開く
https://console.firebase.google.com

googleアカウントでログインする。

プロジェクトの作成
googleアナリティクスは使用するとする。

Databaseを選択し、「データベースの作成」を選ぶ
「テストモードで開始」を選んで、「有効にする」を押す

Hostingを選択し、始めるを選ぶ。

###2)Firebase CLIのインストールおよびデプロイまで
ローカルにプロジェクトフォルダを作成する。
以後、[project_folder]とする。

Visual Studio Codeで、プロジェクトフォルダを開きコンソールから、以下実行

CLIのインストール

npm install -g firebase-tools

ログインと初期化

firebase login
firebase init

? Are you ready to proceed?
→ Y

? Which Firebase CLI features do you want to set up for this folder? Press Space to select features, then Enter to confirm your choices. (Press <space> to select)
→ Firestore、Functions、Hosting

? Select a default Firebase project for this directory:
→Use an existing project
→ 先ほど作ったプロジェクトを指定

— Firestore関連の質問 —

? What file should be used for Firestore Rules? (firestore.rules)
→ そのままenter

? What file should be used for Firestore indexes? (firestore.indexes.json)
→ そのままenter

— Functions関連の質問 —

? What language would you like to use to write Cloud Functions?
→ Javascript

? Do you want to use ESLint to catch probable bugs and enforce style? (y/N)
→ n

? Do you want to install dependencies with npm now?
→ Y

— Hosting関連の質問 —

? What do you want to use as your public directory? (public)
→ そのままenter

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

これで、Firebaseの初期化が完了しました。
ディレクトリ構成は以下のようになっているかと思います。

[プロジェクトディレクトリ]
┣functions
┃┣node_modelus
┃┣.gitignore
┃┣index.js
┃┣package-lock.json
┃┗package.json
┣public
┃┣404.html
┃┗index.html
┣.firebaserc
┣.gitignore
┣firebase.json
┣firestore.indexes.json
┗firestore.rules

firebase serve

で、ローカルサーバーが立ち上がり、
http://localhost:5001
で、functionsのページが、
http://localhost:5000
で、Welcome Firebase Hosting Setup Completeのページが開きます。

ctrl + cでいったんサーバーを終了。

firebase deploy

で、
https://[プロジェクト名].firebaseapp.com/
にページがアップされます。

#（３）Functions の準備およびHostingからFunctionsを呼ぶまで。
###1) Node10ランタイムの設定
（参考）SSR モードの Nuxt.js を Firebase に Deploy する Tutorial
https://qiita.com/okamuuu/items/c9f2989241af4a1bf588

node10ランタイムを使えるようにします。

/functions/package.json

"engines": {"node": "8"}
↓
"engines": {"node": "10"}

###2) FunctionのhelloWorldテスト
/functions/index.js内に、helloWorldがコメントアウトされているので、
こちらを有効化します。
ついでに、function名をhelloWorldからnuxtServerに変えておきます。

/functions/index.js

// exports.helloWorld = functions.https.onRequest((request, response) => {
// response.send("Hello from Firebase!");
// });
↓
exports.nuxtServer = functions.https.onRequest((request, response) => {
response.send("Hello from Firebase!");
});

ローカルサーバーで確認してみる。

firebase serve --only functions:nuxtServer

無事、Hello from Firebase!が表示されました。

###3) HostingからFunctionsを呼び出す。
次に、hostingから、functionsを呼ぶようにします。

/firebase.json

"hosting": {
[中略]
  "rewrites": [
    {
      "source": "**/*.*",
      "destination": "/404.html"
    },
    {
      "source": "**",
      "function": "nuxtServer"
    }
  ]
}
}

※rewritesの上の行の]の後に、「,」を足すのを忘れずに。

拡張子付きのアドレスにアクセスした場合、ファイルがあれば表示。
なければ、notFoundページを表示するようにしました。
それ以外のアドレスは、すべてnuxtServerファンクションを呼ぶようにしてます。

ローカルテスト

firebase serve --only functions:nuxtServer,hosting

http://localhost:5000/hoge
などを開くと、helloWorldが実行されます。
※ただし、ルートに関しては、/public/index.htmlがあるため、そちらの表示が優先されます。

確認後、/publicフォルダの中にあるindex.htmlファイルは、不要なので、削除します。

#（４）functions下にnuxtをインストールする
functions下にnuxtをcliでインストールしようと思います。
ただ、普通にfunctionsフォルダで、

npx create-nuxt-app

を実行すると、package.json等が上書きされてしまうので、
いったん下の階層（nuxt-src）にインストールします。

Visual Studio Codeのターミナルで、下記実行

cd functions
npx create-nuxt-app nuxt-src

? Project name
→ なんでもOK

? Project description
→ なんでもOK

? Author name
→ なんでもOK

? Choose a package manager
→ Npm

? Use a custom UI framework (Use arrow keys)
→ Buefy

? Use a custom server framework (Use arrow keys)
→ none

? Choose Nuxt.js modules (Press <space> to select, <a> to toggle all, <i> to invert selection)
→DotEnvのみ選択

? Choose linting tools (Press <space> to select, <a> to toggle all, <i> to invert selection)
→ ESLint、Prettierを選択

? Use a custom test framework (Use arrow keys)
→ none

? Choose rendering mode (Use arrow keys)
→ Universal

? Choose development tools
→ jsconfig.json

インストール完了後、

cd ./nuxt-src
npm run dev

を実行すると、.nuxtフォルダが生成され、
ローカルサーバーが立ち上がり

で、テストページを確認できました。

ローカルサーバーは、ctrl+cでいったん停止しておきます。
/functions/nuxt-src/.nuxtフォルダもいったん削除。

次にnuxtのルートフォルダを一つ上のfunctionsに移動します。

functions/nuxt-src/package.jsonから
functions/package.jsonに、下記のように表記を移動します。

■scripts
→ そのまま全部追加。

startのみ、ダブるのでもともとあったfunctionsのstartは削除します。

"start": "npm run shell", // → こちらを削除
"start": "nuxt start",

ついでに、npm run serveとnpm run deployで、hostingもサーブ・デプロイするように変更しておきます。

"serve": "firebase serve --only functions",
"deploy": "firebase deploy --only functions",
↓
"serve": "firebase serve --only functions,hosting",
"deploy": "firebase deploy --only functions,hosting",

■dependencies、devDependencies
→ まるごと移動でOK

移動が完了したら、
functions/nuxt-src/内の
・node_modules
・package.json
・package-lock.json
・.git ※あれば
は削除します。

nuxt-srcに残ったファイル（※フォルダはそのまま）を上の階層に移動
.editorconfig
.env
.eslintrc.js
.gitignore（※上書きでOK）
.prettierrc
jsconfig.json
nuxt.config.js
README.md

移動したnuxt.config.jsに、以下追加。

srcDir: 'nuxt-src'
build: {
/*
** You can extend webpack config here
*/
extend(config, ctx) {}
},
↓
build: {
/*
** You can extend webpack config here
*/
extend(config, ctx) {},
publicPath: '/assets/'
},

上記すべて終わったら、functionsフォルダで

npm install

を実行しておく。

npm run devすると、
WARN No .env file found in …
が出るので、.env関連を修正する。

nuxt用の.envモジュール「@nuxtjs/dotenv」
公式を見ると、
modulesではなく、buildModulesに入れろと書いてあったので、
buildModdulesに移動しつつ、オプションでパスの指定をします。

buildModules: [
....（中略）
// Doc: https://github.com/nuxt-community/dotenv-module
['@nuxtjs/dotenv', { path: __dirname }]
],

#（５）ESlintがらみの設定変更
nuxtをインストールした時点で、
基本的なルールは設定されており、

npm run lint

で、lintチェックを実行できます。

実際に、lintチェックを実行したところ、
\functions\index.js
で、エラーが３つほど出ました。

修正をするにあたり、
まず、functions下に移動した.eslintrc.jsと.prettierrcを
VisualStudioCodeで使えるようにします。

※拡張機能のESLint、Prettierはインストールしておく。

■VisualStudioCodeでESLint拡張機能が動かない気がする時に確認したこと
https://note.kiriukun.com/entry/20190817-eslint-not-working-in-vscode

設定 – eslint.workingDirectories
をワークスペースで定義する。

settings.json
"eslint.workingDirectories": [
  "./functions"
]

これでfunctions/index.htmlを開くと、
エラー箇所に赤波線が表示されます。
赤波線にカーソルを合わせて、「クイックフィックス」→fix this pretier/pretier problem
で、自動的に修正されます。

次に、基本ルールですが、
初期設定でconsole.logが使用禁止のため、
このルールを修正します。

functions/.eslintrc.js

rules: {
'no-console': 'off',

上記のルールで、console出力があってもエラー表示をしなくなります。

#（６）function「nuxtServer」で、nuxtをよびだしレンダリングする。
/functions/index.js
を、下記のように変更

コンフィグ内、@nuxtjs/eslint-moduleは残していると、デプロイ後に
Error: could not handle the request
が、発生する。
（ログを見ると、FATAL Cannot find module ‘@nuxtjs/eslint-module’と表示される）
なので、コンフィグを読み込んだ後に、@nuxtjs/eslint-moduleを除外する。

また、index.jsでrequireを使ってnuxt.config.jsを読み込むため、
nuxt.config.jsを以下のように修正します。

export default {
↓
module.exports = {

この時点で、npm run lint で、チェックすると、

1:1 error Unexpected module.exports, please use export default instead nuxt/no-cjs-in-config

が、出る。

CommonJSのrequireを使うなというエラー。
ルールから除外する。

/functions/.eslintrc.js
のrulesに、下記追加

'nuxt/no-cjs-in-config': 'off',

エラーが出なくなった。

nuxtをビルドする

npm run build

ローカルでfirebase サーバーを確認してみる

npm run serve

デプロイしてみる

npm run deploy

→見える（ただしエラーあり。）
/assetsにクライアントスクリプトを探しに行ってしまうので、
.nuxt/dist/clientの中身を/public/assetsにコピー。
これで、エラーが出なくなります。

npm buildしたときに自動的に.nuxt/dist/clientのなかみを
/public/assetsにコピーするようにする

npm install --save-dev cpx rimraf

下記ファイルを修正

/functions/package.json

"scripts": {
  "postbuild": "npm run remove-assets && npm run copy-assets",
  "remove-assets": "rimraf ../public/assets",
  "copy-assets": "cpx ./.nuxt/dist/client/** ../public/assets",

これで npm run buildを実行すると、
/public/assets
内が、自動的に更新される。

/public/assetsは、git対象外にするので、.gitignoreに
public/assets
を追加します。

#（７）nuxtを修正する。
必要パッケージを入れる

npm install dayjs firebase htmlspecialchars vuexfire

.envの設定

デフォルトの設定では、サーバーサイドでしか読み取れない。
下記の対応をすることで、クライアントサイドでも読み取れるようになる。

/functions/nuxt.config.js
先頭に以下追加

require('dotenv').config()

Nuxtの修正内容は、以下のコミット履歴から確認できます。

だいぶ投稿が長くなってしまったので、Nuxtの詳細については割愛します。

リポジトリをクローンして、.env.sampleから.envファイルを作って、
npm run devすれば、コンソールで処理の流れが終えるようにしているので、
見ていただければと思います。