如何通过云功能将Nuxt SSR应用程序部署到Firebase？

Question

[我遵循此medium post作为指导，将我的nuxt应用程序托管在Firebase托管上。

但是，当我随后访问url时，部署过程已经完成，我收到Cannot GET /错误消息。如果查看功能日志，我会看到该功能完成并显示404错误。

这是我的functions / index.js

const functions = require('firebase-functions')
const admin = require("firebase-admin")
const { Nuxt } = require('nuxt-start')
const nuxtConfig = require('./nuxt.config.js')

admin.initializeApp()

const config = {
  ...nuxtConfig,
  dev: false,
  debug: true,
  buildDir: "nuxt",
  publicPath: "public",
}

const nuxt = new Nuxt(config)

exports.ssrapp = functions.https.onRequest(async (req, res) => {
  await nuxt.ready()
  nuxt.render(req, res)
})

这是firebase配置

{
  "functions": {
    "source": "functions",
    "predeploy": [
      "npm --prefix src run build && rm -rf functions/nuxt && cp -r src/nuxt/ functions/nuxt/ && cp src/nuxt.config.js functions/"
    ]
  },
  "hosting": {
    "predeploy": [
      "rm -rf public/* && mkdir -p public/_nuxt && cp -a src/nuxt/dist/client/. public/_nuxt && cp -a src/static/. public/ && cp -a public_base/. public/"
    ],
    "public": "public",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "function": "ssrapp"
      }
    ]
  }
}

项目结构是这个

/
 /src
 /functions
 /public
 /public_base

[运行firebase deploy时，我确实看到/ src的内容被复制到/ functions / nuxt。为了进行测试，我也有我的/ functions / package.json文件，包括我在[[/src/package.json文件中的所有依赖项。

我如何启动并运行此应用？如果您需要更多详细信息，请告诉我。

更新＃1

我尝试使用命令firebase serve --only functions,hosting -p 5004为主机和功能提供服务。

像这样运行服务器给了我更多的见解。具体来说，我在加载时收到了此警告消息，然后在加载页面时导致了实际错误消息。

WARN Module @firebase/app not found. Silently ignoring module as programatic usage detected

我没有将此包安装在functions目录中，因为我的src目录中也没有。但是，将其安装在/ functions内并重新启动开发服务器后，该警告消息消失了，并且还出现了我在页面加载中遇到的错误。
我还发现了一些与vue有关的警告，vue-server-renderer和vue-template-compiler没有运行相同的版本。
现在一切似乎都正常了！

Answer 1

您的配置和结构看起来正确。

我也是大约一年前用我的应用程序完成的，但遇到了同样的问题。它与功能代码本身有关。我也尝试使用nuxt.render(req, res)（Docs），但是它对我没有用，所以我最终使用了nuxt.renderRoute(route)（Docs）。这工作得很好。

您可以将代码更改为类似以下内容：

exports.ssrapp = functions.https.onRequest(async (req, res) => {
  await nuxt.ready()

  const result = await nuxt.renderRoute(req.path) // Returns { html, error, redirected }
  res.send(result.html) // Sends html as response
})

这对我有用。您应该考虑捕获任何错误。我希望这能解决您的问题。
这只是一个变通方法，如果有人知道nuxt.render为何不起作用，我很想知道。因此，我的应用程序浪费了很多时间...