firebase functions next example

Firebase-GCP审查的弃用新示例

---

next.js ssr应用程序在云功能上用于firebase the Firebase Hosting

托管next.js ssr react应用程序在firebase托管的云功能上的云功能上。

这是随附的媒体帖子，正在写一篇新帖子，以描述新的项目结构，Firebase部分部署，对前/deploy挂钩的Firebase支持以及这些新功能解决的问题。

为什么？

在云功能上托管您的SSR Next.js应用程序，可以实现低成本，自动缩放的SSR应用程序体验，以利用Firebase的Sweet Developer Experience。

如何？

Firebase Hosting可以将路由重写为为我们的服务器端渲染的云功能。JS应用程序。使用一个重写规则，该规则可以捕获所有路线，然后我们可以在托管URL而不是firebase云功能URL上托管我们的SSR应用程序。

而不是：

https://us-central1-<project-name>.cloudfunctions.net/<function-name>

我们可以使用：

<project-name>.firebaseapp.com/

然后，可以使用Next.js来实现SSR与热模块重新装载，服务器和客户端路由，路由级别代码 - 拆分，路由预取更多的反应！

通过这种方法克服了在火箱上托管SSR的许多问题。在此处创建问题之前，请参考媒体帖子。

重要的！

• 该示例使用firebase-tools作为DevDepentency，该示例是通过yarn从node_modules/.bin/ Folder运行的。 YARN将从node_modules/.bin/的package.json或二进制脚本中运行脚本。 npm run不会检查.bin文件夹中是否有可执行文件，因此，如果使用npm ，则必须更改脚本以从node_modules/.bin/或安装全球范围内将firebase二进制运行，否则将其从firebase-tools列表中删除。请查看下一个。JSRepo的示例，以建议我如何使用npm 。

• 确保您正在运行节点6.11.5 ，因为函数模拟器需要此操作。我建议ASDF作为版本管理器，并添加ASDF .tool-versions文件以定义节点运行时。

• 如果使用_app.js ，您可以在部署的云功能上收到以下错误：

   { Error: Cannot find module '@babel/runtime/regenerator'...
  

  尽管Next.js将@babel/runtime作为依赖关系，但您必须将其直接作为依赖项安装在此项目中。

安装

git clone https://github.com/jthegedus/firebase-functions-next-example
cd firebase-functions-next-example
yarn install

登录到Firebase CLI

这用作DEV依赖性，而不是全局安装。我发现这是一个更好的开发经验。

yarn fblogin

Next.js开发

标准Next.js开发带有热模块的重新装载等

yarn dev

本地测试

yarn serve

这终于现在起作用了！注意：您必须在.firebaserc文件中定义了有效的firebase项目ID，因为serve命令确实检查了项目是否存在。我相信这与确保相对路线与您部署的应用程序保持一致，因为您的URL中使用了<project id> 。

对于那些想深入研究实际发生的事情的人，请运行此命令：

yarn serve --debug

部署到firebase

您需要将项目连接到您的Firebase项目。在.firebaserc或运行firebase init中编辑名称，然后选择不覆盖任何文件。

部署托管资源和重写云功能

yarn deploy-app

部署功能不用于SSR

部署功能组中指定的所有功能。编辑此脚本以添加更多功能组。 - 有关如何使用功能组，请参见部分部署文档。

yarn deploy-funcs

将所有东西都部署到firebase

yarn deploy-all

清洁dist文件夹

yarn clean

代码兼容性的注释

一切都在Ubuntu 17.04的Bash上进行了测试。这应该在Windows上的Ubuntu上的bash上起作用，而无需任何更改。如果您希望获得Windows Native支持，请提交问题，以便我们可以兼容Windows。请报告任何MACOS错误，因为我无法访问设备进行测试。我的开发环境可以在这里找到。