使用 SSR 将 Vue/Nuxt 应用程序作为通用应用程序部署到 Firebase

Question

我正在尝试将我的 Universal Nuxt.js 应用程序部署到 Firebase。 有关执行此操作的所有信息似乎都已过时，我无法使其完全正常工作。

SSR 似乎与托管的静态资产一起工作。 但是，例如，中间件仅在客户端上执行 - 而不是在服务器上执行（例如当它首次通过 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 in src文件夹中，构建的 Nuxt 客户端文件 ( firebase/nuxt/dist/client/* ) 和应用程序的静态文件 ( src/static/* ) 在部署之前被复制到public中（对于 firebase static托管和 CDN）。

使用此设置，静态资产托管和 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/

（查看此文档以获取有关中间件与服务器中间件的详细信息）