如何在 8.0 版中使用 `target: "serverless"` 使用 Next.js 正确实现无服务器 s-s-r

Posted 2023-02-22

【中文标题】如何在 8.0 版中使用 `target: "serverless"` 使用 Next.js 正确实现无服务器 s-s-r

【英文标题】：How to properly implement serverless s-s-r with Next.js using `target: "serverless"` in version 8.0

【发布时间】：2019-07-07 18:55:12

【问题描述】：

Next.js 8.0 刚刚引入了一个新的target: "serverless" 配置设置，在此blog post 上进行了描述。我设置了一个基本的 hello world 应用程序 (here) 来测试它。将.next/serverless/pages/index.js 的输出复制粘贴到谷歌云函数（它们相当于AWS Lambda）并让它调用render()，如上述博客文章中所述。

我遇到的问题是页面本身渲染得很好，但是它试图在与 lambda 相同的域中获取静态资产（脚本文件），这当然不起作用，因为除了 lambda 之外什么都没有脚本。

您可以在这里看到这种情况：

我的想法是使用 Next.js 的这个新特性来实现微前端架构。 pages/ 中的每个页面都可以有自己的开发团队/生命周期，并在后端进行相应的缩放。这是此功能的主要卖点之一，对吧？

解决这个问题的标准方法是什么？我需要为静态资产设置单独的服务器吗？然后将两者都放在某种负载平衡器或路由器后面？如果是这样，那不是违背了使用它来开发微前端的目的吗，因为静态资产将包括“index.js”、“about.js”和每个页面的脚本文件，并且需要重新部署任何时候更新任何页面？

希望我说的有道理。任何帮助表示赞赏！

【参考方案1】：

我需要为静态资产设置单独的服务器吗？

我是新的 nextjs，但是是的，我相信这就是你所需要的。

由于您使用 GCP，因此您可能想尝试 Firebase，因为它包含 Google Cloud Functions（FB 功能是单独打包和销售的 Google Cloud Functions）和静态托管，可满足您的要求，包括您的详细信息提到了。

另一个问题是，nextjs 的这个新的无服务器功能似乎更面向 AWS Lambda，因为它将函数单独打包。您可能已经知道，但无论如何我会注意到 GCP 是面向“项目”的，并且您项目中的所有功能都共享一个入口点。我不会详细说明，因为这不是您要问的问题，但this popular SO question 会详细说明如何做到这一点。

编辑：我写了那个然后想起了this FB sample...一种基于旧版本的 nextjs 在 Firebase 上托管 nextjs 应用程序的不同方式。

【讨论】：

谢谢！您提供的信息和链接真的很有帮助。但从某种意义上说，在按照您的建议玩转 FB 之后，我更确定我正在尝试做错事。似乎 lambdas / 云函数不是实现微前端的一种方式，因为各个 UI 服务仍然需要一个单独的服务器来存储静态资产，这首先破坏了将它们拆分的意义。

【参考方案2】：

为了让 next.js 与您的谷歌云功能一起使用，您需要创建一个 next.config.js（我假设您已经这样做了）并添加资产前缀

const isProd = process.env.NODE_ENV === 'production'
module.exports = 
    target: 'serverless',
    assetPrefix: isProd ? 'https://yourRegion-projectId.cloudfunctions.net/functionName' : '',

在此之后，再次 npm 构建和部署。

Google Cloud 函数的免费调用次数为 2,000,000。 Firebase 为 125,000。

更新 - Firebase 免费调用现在是每月 2,000,000 次

【讨论】：

根据这里firebase.google.com/pricing，现在 Firebase 似乎也是每月 200 万次免费调用