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

Question

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

SSR与托管的静态资产一起正常工作。例如，当将中间件部署在具有Firebase功能/主机的Firebase上（或使用firebase serve）时，中间件仅在客户端上执行，而不是在服务器上执行（例如，第一次通过SSR加载时）。

我有以下项目结构：

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请示火力使用功能

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

我还添加了从src/package.json到的所有依赖项functions/package.json。

在npm run buildin src文件夹中，已构建的Nuxt客户端文件（firebase/nuxt/dist/client/*）和应用程序的静态文件（src/static/*）public在部署之前已复制到该文件夹中（用于Firebase静态托管和CDN）。

使用此设置，将静态资产托管和SSR部署在Firebase上时似乎可以正常工作，但是middleware/asyncData/nuxtServerInit/etc使用Firebase功能在服务器端进行渲染时，静态资产托管和SSR 不会执行。

例如，在本地（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/

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