如何使用heroku-22部署reactapp？

Question

当我部署到 heroku 时收到此消息：

remote: =====! create-react-app-buildpack has reached end-of-life 
remote:        This build may succeed, but the buildpack is no longer maintained.
remote:        On the Heroku-22 stack and beyond, this may fail to build at all.
remote:
remote:        Please consider migrating to https://nextjs.org or https://remix.run to develop React apps which are deployable using Heroku's Node.js buildpack https://github.com/heroku/heroku-buildpack-nodejs, or you may develop your own create-react-app deployment with Node.js and Nginx buildpacks.  

我正在使用这个构建包：

https://github.com/mars/create-react-app-buildpack

但heroku将不再支持它。我不知道如何将我的reactapp迁移到nextjs或remix，有人知道支持新版本heroku的替代构建包吗？

Answer 1

旧答案

您使用的构建包已被弃用，并且无法在 Heroku-22 上运行。我所做的简单解决方案是推迟升级 Heroku 堆栈，直到发布 Create-React-App 的新构建包。不过Heroku-18 已被弃用，因此您应该升级到 Heroku-20。

heroku stack:set heroku-20

更新答案（截至2023年1月5日）

如果您有一个没有环境变量的静态网站，则可以使用 Express 服务器来运行静态预构建资产。基于这篇 Medium 文章的说明。

1. 通过 Heroku 中应用程序的设置选项卡从 Heroku 中删除当前构建包。
2. npm install express使用(或yarn add express)安装 Express
3. scripts/heroku-start.js创建一个包含以下内容的文件：

const express = require('express');
const path = require('path');
const app = express();
const port = process.env.PORT || 3000;
app.use(express.json());
// Your static pre-build assets folder
app.use(express.static(path.join(__dirname, '..', 'build')));
// Root Redirects to the pre-build assets
app.get('/', function(req,res){
  res.sendFile(path.join(__dirname, '..', 'build'));
});
// Any Page Redirects to the pre-build assets folder index.html that // will load the react app
app.get('*', function(req,res){
  res.sendFile(path.join(__dirname, '..', 'build/index.html'));
});
app.listen(port, ()=>{
  console.log("Server is running on port: ", port)
})

4. Procfile创建一个包含以下内容的文件：

web: node scripts/heroku-start.js

5. 将 Heroku 堆栈设置为 Heroku-22 并部署。