Expressなしで、最短でNuxt（SSR）をfirebaseで公開してみる。

expressのミドルウェアとしてnuxtをfirebaseで公開するのをあちらこちらで見ましたが、
expressなしでも行けるのでは・・・？ということで、やってみました。

環境は、
・Windows10
・Visual Studio Code
・Node 10.15.3
使用。
Firebaseコンソールでプロジェクトは制作済みとします。

####【目次】
（１）Firebase の初期化
（２）functions下にnuxtをインストールする
（３）Functions の準備およびHostingからFunctionsを呼ぶまで。
（４）ビルド＆デプロイ

では、やってみます。

（１）Firebase の初期化

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)  → Functions、Hosting
? Select a default Firebase project for this directory: (Use arrow keys) → 作成済みプロジェクトを指定

--- Functions関連の質問 ---

? What language would you like to use to write Cloud Functions? (Use arrow keys) → 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

（２）functions下にnuxtをインストールする

nuxtのインストール

cd functions
npx create-nuxt-app nuxt-app

? Project name → なんでもOK
? Project description → なんでもOK
? Author name → なんでもOK
? Choose a package manager → Npm
? Use a custom UI framework (Use arrow keys) → None
? 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) →なし
? Choose linting tools (Press <space> to select, <a> to toggle all, <i> to invert selection) →なし
? Use a custom test framework (Use arrow keys) → none
? Choose rendering mode (Use arrow keys) → Universal

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

functions/nuxt-app/package.jsonから
functions/package.jsonに、scripts、dependencies、devDependenciesを移動します。

scriptのstartがダブりますが、もともとあったほうを削除。

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

ついでに、enginesのnodeバージョン指定を8から10に変更しておきます。

  "engines": {
    "node": "10"
  },

functions/nuxt-app/.git
functions/nuxt-app/node_modules
functions/nuxt-app/package.json
functions/nuxt-app/package-lock.json
は、不要なので、削除

package.json、package-lock.jsonを除くファイル（※フォルダはそのまま）を上の階層に移動
.editorconfig
.gitignore（※上書きでOK）
nuxt.config.js
README.md

nuxt.config.jsに、以下追加。

  srcDir: 'nuxt-app',
  build: {
    publicPath: '/assets/'
  }

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

npm install

を実行しておく。

（３）Functions の準備およびHostingからFunctionsを呼ぶまで。

1) /functions/nuxt.config.js

export default {
↓
module.exports = {

後ほどrequireで読み込むため。
詳細はわからないのですが、importよりもrequire推奨らしい。

2) /functions/index.js

const functions = require('firebase-functions')
const { Nuxt } = require('nuxt')

const config = require('./nuxt.config.js')
const nuxt = new Nuxt(config)

exports.nuxtServer = functions.https.onRequest(async (request, response) => {
  const result = await nuxt.renderRoute(request.originalUrl, { request })
  response.send(result.html)
})

3) /firebase.json

  "hosting": {
[中略]
    "rewrites": [
      {
      "source": "**",
      "function": "nuxtServer"
      }
    ]
  }
}

これで、hostingから、functionsが呼ばれます。

（４）ビルド＆デプロイ

/publicの中にあるファイル（index.html、404.html）を削除しておく。

ビルド

npm run build

生成された/functions/.nuxt/dist/clientの中身を、
/public/assets/フォルダに移動

firebase deploy

で、nuxtデフォルトページが公開されます。
ソースを見ると、確かにSSRされているのが確認できると思います。

以上、expressを使わずに、nuxt（ssr）をfirebaseで公開するでした。

もしなにか、ご意見あればコメントくださいませ。
では。