javascript - 将 Vue/Nuxt 应用程序作为具有 SSR 的通用应用程序部署到 Firebase

Question

我正在尝试将我的 Universal Nuxt.js 应用程序部署到 Firebase。有关执行此操作的所有信息似乎都已过时，我无法使其完全正常工作。
SSR 似乎与托管的静态 Assets 一起工作。但是，例如，中间件仅在客户端上执行，而不是在服务器上执行(例如，当它首次通过 SSR 加载时)，当它部署在具有 firebase 功能/托管(或使用 firebase serve )的 firebase 上时。
我有以下项目结构:

project
└─ /functions (firebase functions including `nuxt/` built files)
└─ /src (nuxt app, using `create-nuxt-app` starter template)
└─ /public (includes static files and built nuxt client files)
└─ firebase.json

在 src/nuxt.config.js设置构建选项

mode: 'universal',
...
buildDir: process.env.NODE_ENV === 'development' ? '.nuxt' : '../functions/nuxt',
build: {
  publicPath: process.env.NODE_ENV === 'development' ? '/public/' : '/',
  extractCSS: true,

  ...
}

在 functions/package.json设置为使用节点 v8

"engines": {
  "node": "8"
},
...

和以下到 functions/index.js

const functions = require('firebase-functions');

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

const app = express()

// Set Nuxt.js options
const config = {
  dev: false,
  buildDir: 'nuxt',
  build: {
    publicPath: '/'
  },
}

const nuxt = new Nuxt(config)

function handleRequest(req, res) {
  res.set('Cache-Control', 'public, max-age=300, s-maxage=600')
  nuxt.renderRoute('/')
    .then(result => {
      res.send(result.html)
    })
    .catch(e => {
      res.send(e)
    })
}
app.get('*', handleRequest)
exports.nuxtapp = functions.https.onRequest(app)

在 firebase.json指示firebase使用该功能

"rewrites": [
  {
    "source": "**",
    "function": "nuxtapp"
  }
]

我还添加了来自 src/package.json 的所有依赖项至 functions/package.json .
在 npm run build在 src文件夹，构建的 Nuxt 客户端文件 ( firebase/nuxt/dist/client/* ) 和应用程序的静态文件 ( src/static/* ) 被复制到 public部署之前的文件夹(用于 Firebase 静态托管和 CDN)。
使用此设置，静态 Assets 托管和 SSR 在部署到 Firebase 时似乎可以工作，但 middleware/asyncData/nuxtServerInit/etc使用 Firebase 函数在服务器端呈现时未执行。
例如，在本地开发模式下( npm run dev)，中间件在服务器/客户端上都可以正常工作。
在 Firebase 上部署时，我错过了什么或做错了什么？
谢谢!

Answer 1

如果您使用的是 Nuxt 2.12>，则您的 nuxt.config.js 文件不需要具有“mode”属性。只需使用目标:https://nuxtjs.org/docs/configuration-glossary/configuration-target/ (静态也适用于 SSR)
您的中间件目录用于将要在客户端和 SSR 中执行的中间件放置在用户访问的每个页面中。但是，如果您正在寻找与云功能一起使用的服务器中间件，您可以使用 Nuxt 服务器中间件:https://nuxtjs.org/docs/configuration-glossary/configuration-servermiddleware/
(查看此文档以获取有关中间件与服务器中间件的详细信息)