如何通过云功能将 Nuxt s-s-r 应用部署到 Firebase？

Posted 2023-02-22

【中文标题】如何通过云功能将 Nuxt s-s-r 应用部署到 Firebase？

【英文标题】：How to deploy Nuxt s-s-r app to firebase through cloud functions?

【发布时间】：2020-07-18 12:03:24

【问题描述】：

我按照 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.s-s-rapp = 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": "s-s-rapp"
      
    ]
  

项目结构是这样的

/
 /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

我没有在函数目录中安装这个包，因为我的 src 目录中也没有它。但是，在 /functions 中安装它并重新启动开发服务器后，该警告消息消失了，随之而来的是我在页面加载时遇到的错误。

我还发现了一些与 vue、vue-server-renderer 和 vue-template-compiler 没有运行相同版本有关的警告。

现在似乎一切正常！

【参考方案1】：

您的配置和结构看起来不错。

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

你可以把你的代码改成这样：

const  Nuxt  = require('nuxt')

...

exports.s-s-rapp = 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 不起作用，我很想知道。我因此在我的应用程序上浪费了很多时间......

【讨论】：

感谢弗洛里安！将在今天早上晚些时候进行测试并通知您

嘿弗洛里安。起初我使用 nuxt-start 包加载 nuxt。但是，在调用 nuxt.renderRoute 时，我收到一条错误消息，提示 renderRoute 不是函数。通过阅读文档，我可以看到他们没有使用 nuxt-start，而是使用了 nuxt 包中的 loadNuxt。但是，现在我收到了一个找不到 firebase 命名空间错误。您是如何在您的应用中创建 nuxt 实例的？

哦，是的，我忽略了这一点。我使用常规的 nuxt 包进行导入。不过，我不熟悉 nuxt-start 包。 const Nuxt = require('nuxt')

【参考方案2】：

我尝试使用命令firebase serve --only functions,hosting -p 5004 在本地提供托管和功能。

通过这样做，我能够发现一堆警告和错误，例如

FATAL 

Vue packages version mismatch:

- vue@2.5.21
- vue-server-renderer@2.6.11

This may cause things to work incorrectly. Make sure to use the same version for both.

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

然后我确保这些 vue 包确实运行相同的版本。然后我还在/functions/package.json 中添加了@firebase/app 包（但是，/src/package.json 中不存在。

我再次运行本地服务器，一切正常。然后我部署到 firebase，一切都按预期工作。

【参考方案3】：

以下对我有用（使用 nuxt-start 代替）：

const functions = require("firebase-functions");
const  Nuxt  = require("nuxt-start");

const config = 
  dev: false
;

const nuxt = new Nuxt(config);

let isReady = false;

async function handleRequest(req, res) 
  if (!isReady) 
    try 
      isReady = await nuxt.ready();
     catch (error) 
      process.exit(1);
    
  
  await nuxt.render(req, res);


exports.nuxts-s-r = functions.https.onRequest(handleRequest);