Nuxt 服务器中间件不适用于 Firebase Cloud Functions

Question

我正在尝试将 Nuxt app on Firebase to take advantage of SSR. This app use Nuxt server middleware 部署为 API 端点（以发送邮件）。

它在本地运行良好，但一旦部署，也无法模拟。当我尝试查询它时收到 404 响应，但我不明白为什么。有人已经设法使用 Nuxt 中间件在 Firebase 上创建了一个 API 端点吗？

注意：我分享的回购 link 仅包含重现问题的最低限度（不是我的整个应用程序）。

nuxt.config.js

const webpack = require("webpack")
const { config } = require('dotenv')
config({ path: `../.env` })

module.exports = {
  mode: "universal",
  ...
  modules: [
    "@nuxtjs/pwa",
    [
      "@nuxtjs/firebase",
      {
        config: { ... },
        services: {
          analytics: true,
          performance: true,
          functions: true
        },
        onFirebaseHosting: true,
      }
    ]
  ],
  buildModules: ["@nuxtjs/axios"],
  serverMiddleware: ["./api/contact"],
  ...
}

src/index.js

const functions = require("firebase-functions")
const express = require("express")
const { Nuxt, Builder } = require("nuxt")
const cors = require('cors')
const app = express()

app.use(cors({ origin: true }))

const config = {
  dev: false,
  buildDir: ".nuxt",
  build: {
    publicPath: "/assets/"
  }
}
const nuxt = new Nuxt(config)

exports.nuxtapp = functions.https.onRequest(async (req, res) => {
  if (config.dev) {
    const builder = new Builder(nuxt)
    await builder.build()
  } else {
    res.set("Cache-Control", "public, max-age=300, s-maxage=600");
    await nuxt.ready()
  }
  app.use(nuxt.render)
  return app(req, res)
})

src/api/contact.js

const express = require("express")

const app = express()
app.use(express.json())

app.get("/", function (req, res) {
  res.status(405).json({ error: "Query invalid" });
})

app.post("/", function (req, res) {
  ...
})

module.exports = {
  path: "/api/contact",
  handler: app
}

调试日志

[debug] [2021-02-05T03:22:21.137Z] [functions] Got req.url=/nuxt-firebase-ssr-41d40/us-central1/nuxtapp/api/contact/, mapping to path=/api/contact/ {"metadata":{"emulator":{"name":"functions"},"message":"[functions] Got req.url=/nuxt-firebase-ssr-41d40/us-central1/nuxtapp/api/contact/, mapping to path=/api/contact/"}}
[debug] [2021-02-05T03:22:21.158Z] [runtime-status] [22988] Ephemeral server handling POST request {"metadata":{"emulator":{"name":"functions"},"function":{"name":"nuxtapp"},"message":"[runtime-status] [22988] Ephemeral server handling POST request"}}
[info] >  » Rendering url /api/contact/ {"user":"» Rendering url /api/contact/","metadata":{"emulator":{"name":"functions"},"function":{"name":"nuxtapp"},"message":"\u001b[90m> \u001b[39m » Rendering url /api/contact/"}}
[debug] [2021-02-05T03:22:21.160Z] [runtime-status] [22988] Ephemeral server survived. {"metadata":{"emulator":{"name":"functions"},"function":{"name":"nuxtapp"},"message":"[runtime-status] [22988] Ephemeral server survived."}}
[debug] [2021-02-05T03:22:21.192Z] <<< [apiv2][status] POST http://localhost:5001/nuxt-firebase-ssr-41d40/us-central1/nuxtapp/api/contact/ 404
[debug] [2021-02-05T03:22:21.193Z] <<< [apiv2][body] POST http://localhost:5001/nuxt-firebase-ssr-41d40/us-central1/nuxtapp/api/contact/ [stream]
[info] i  hosting: 127.0.0.1 - - [05/Feb/2021:03:22:21 +0000] "POST /api/contact/ HTTP/1.1" 404 - "http://localhost:5000/" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4324.104 Safari/537.36" {"metadata":{"emulator":{"name":"hosting"},"message":"127.0.0.1 - - [05/Feb/2021:03:22:21 +0000] \"POST /api/contact/ HTTP/1.1\" 404 - \"http://localhost:5000/\" \"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4324.104 Safari/537.36\""}}
[info] i  functions: Finished "nuxtapp" in ~1s {"metadata":{"emulator":{"name":"functions"},"function":{"name":"nuxtapp"},"message":"Finished \"nuxtapp\" in ~1s"

Answer 1

我对 nuxt 不太熟悉，但看起来您没有将配置加载到您在 src/index.js 中创建的实例中。我认为应该是：

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

至少，您在 src/index.js 中的配置对象可能需要定义 serverMiddleware 属性。我很确定 new Nuxt() 不会自动加载 nuxt.config.js 文件。

Nuxt 服务器中间件不适用于 Firebase Cloud Functions

Nuxt server middleware doesn't work on Firebase Cloud Functions

middleware

express

firebase

google-cloud-functions

nuxt.js