将静态 create-react-app 项目部署/迁移到 Heroku-22 堆栈
将静态 create-react-app 项目部署/迁移到 Heroku-22 堆栈
Migrate static create-react-app to Heroku-22 Stack (image by Author)
最近我不得不迁移一个较旧的静态 创建反应应用 项目最新 Heroku-22 堆。如果您的应用程序使用最新的编程语言版本和包，或者可能需要更新代码库的专用项目，那么迁移到新的 Heroku 堆栈可能非常容易。在迁移静态 create-react-app 项目的具体场景中，我发现现有的 Heroku buildpack 不再支持并且没有精简的迁移方式。本文介绍了一种迁移您的 静止的 创建反应应用 **** 到 Heroku-22 以最小的努力堆叠。
如果您在 Heroku 上有应用程序，迟早您会收到这些通知的变体。
Heroku notification of stack depreciation (image via Author)
运动部件：
Heroku 和 Heroku 堆栈
Heroku 是一个以应用程序为中心的平台，开发人员几乎无需基础架构知识即可部署、扩展和管理他们的应用程序。和 Heroku 附加组件 开发人员可以附加数据库、安全服务、图像处理或可扩展的搜索服务。 Heroku 应用程序在 Dynos 上运行。 Dynos 是（非常简单地说）运行代码的专用虚拟环境。测功机具有称为堆栈的操作系统“版本控制”。偶尔，Heroku 会合理地更新堆栈，以提供对新操作系统、最新编程语言和安全更新的访问。新 Stacks 不需要经常更换，但一旦更换，开发人员可能需要升级他们的应用程序才能得到最新版本的支持。
更多信息 Heroku 堆栈
Create-react-app（和其他静态反应应用程序）
我在这里的特殊用例是 创建反应应用 因为它带有用于构建静态资产的脚本—— npx 运行构建 并且没有开箱即用的生产 Web 服务器。想一想，本指南可以针对任何可以通过资产编译器“构建”静态资产的 React 应用程序进行修改 网页包 , gulp.js ，或其他。
问题
当前所有解释将 create-react-app 部署到 Heroku 的指南都没有考虑 Heroku-22 堆栈。过时的文档 ** （在撰写本文时）：**
- https://create-react-app.dev/docs/deployment/#heroku
- https://blog.heroku.com/deploying-react-with-zero-configuration
当前的文档使用了一个已经达到并具有生命力的构建包—— https://github.com/mars/create-react-app-buildpack
当您在 Heroku-22 堆栈上使用 buildpack 时，即使是 buildpack 作者本人也会收到以下消息。
=====！ create-react-app-buildpack 已报废
此构建可能会成功，但不再维护构建包。
在 Heroku-22 堆栈及更高版本上，这可能根本无法构建。
请考虑迁移到 https://nextjs.org 或者 https://remix.run 开发可使用 Heroku 的 Node.js buildpack 部署的 React 应用程序 https://github.com/heroku/heroku-buildpack-nodejs, 或者您可以使用 Node.js 和 Nginx buildpacks 开发自己的 create-react-app 部署。
*资源： https://github.com/mars/create-react-app-buildpack/blob/master/bin/compile#L29
正如 buildpack 作者建议的那样，您可以考虑将整个应用程序迁移到 https://nextjs.org/ 或者 混音运行 .我个人没有走这条路，因为我的应用程序很小，而手头的任务只是更新基础设施。如果您有一个经常接触或更新的应用程序，您可能会考虑该路径。
需要注意
- 部署一个 创建反应应用 Heroku-22 或任何其他堆栈开箱即用。这将通过
npx 开始将在其中运行应用程序的脚本 发展 模式 .开发模式要慢得多，会暴露您的源代码，并且可能会导致巨大的内存问题并使 Heroku dyno 完全崩溃。这就是为什么你需要一种不同的方法来运行 生产方式 . - create-react-app 建议的另一个选项是使用 服务 ，一个静态资产服务器。该软件包需要全局安装，因此它不能在 Heroku 上开箱即用。如果它是通过 serve-handler 实现的，它就可以工作，此时它类似于下面的快速服务器解决方案。
解决方案
一个简单的 express.js 可以运行静态预构建资产的 Web 服务器，这就是我们所需要的。
步骤1：
将快递服务器包添加到项目中
**第2步：
** 为文件中的静态资产创建 Express Server 脚本/heroku-start.js
// 创建新文件 scripts/heroku-start.js 常量表达 = 要求（“表达”）；
常量路径 = 要求（'路径'）;
常量应用程序 = 快递（）；
常量端口 = process.env.PORT || 3000; app.use(express.json()); // 您的静态预构建资产文件夹
app.use(express.static(path.join(__dirname, '..', 'build'))); // 根重定向到预构建资产
app.get('/', function(req,res){
res.sendFile(path.join(__dirname, '..', 'build'));
}); // 任何页面重定向到预构建资产文件夹 index.html // 将加载反应应用程序
app.get('*', function(req,res){
res.sendFile(path.join(__dirname, '..', 'build/index.html'));
}); app.listen(端口，()=>{
console.log("服务器正在端口上运行：", 端口)
})
**第 3 步：
** 创建一个 档案 定义运行 Web 服务器的 Web 进程的文件。
网络：节点脚本/heroku-start.js
更多关于 Heroku Procfile
第4步：
部署您的代码。 Heroku 将自动运行 npx 运行构建 第一的。这将编译您的资产并为生产做好准备。
完整的源代码： https://github.com/velles/create-react-app-heroku-22-stack
结论
希望这将打开您升级到 Heroku-22 堆栈的道路。如果在不久的将来有一个新的 Heroku buildpack 支持开箱即用的部署，我不会感到惊讶。
联系人
我是首席软件和机器学习工程师， AWS 认证机器学习 & AWS 认证解决方案架构师 .
随时了解我的最新文章和项目 在 Medium 上关注我 .
其他联系人：
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明
