如何将react-native-web应用部署至Heroku？部署崩溃问题求助

我太懂这种部署到Heroku就崩溃的挫败感了——之前帮同校的朋友解决过几乎一样的React Native Web部署问题，下面是我亲测有效的完整部署流程，一步步跟着来应该能搞定你的超时崩溃问题：

一、先把本地环境确认好 #

• 先确保你的项目在本地能正常运行生产构建：执行npm run build，然后用npx serve -s build启动，访问http://localhost:3000确认功能正常，这一步能排除项目本身的代码问题
• 安装Heroku CLI并登录：打开终端执行heroku login，按照提示完成账号登录

二、调整项目配置（关键！超时崩溃大多出在这） #

1. 修正package.json的脚本和依赖
   • 首先，把serve添加到生产依赖（不能放devDependencies，Heroku生产环境不会装dev依赖）：

     npm install --save serve
     

   • 然后修改package.json里的scripts字段，确保有正确的生产启动和构建命令：

     "scripts": {
       "web": "react-scripts start", // 本地开发用的命令保留
       "build": "react-scripts build", // 生产构建命令，输出到build目录
       "start": "serve -s build" // 生产环境启动命令，用serve托管静态文件
     }
     

   • 新增engines字段，指定和你本地一致的Node.js和npm版本（避免版本兼容问题）：

     "engines": {
       "node": "18.x",
       "npm": "9.x"
     }
     

2. 添加Heroku必需的配置文件
   • 在项目根目录创建Procfile（注意首字母大写，没有任何后缀），内容只有一行：

     web: npm start
     

     这是告诉Heroku启动web服务的具体命令
   • 检查.gitignore文件，确保build/和node_modules/都在忽略列表里（Heroku会在部署时自动构建和安装依赖，不需要把这些文件提交到git）

三、部署到Heroku的操作步骤 #

1. 初始化git仓库（如果还没做的话）：

   git init
   git add .
   git commit -m "Prepare for Heroku deployment"
   

2. 创建Heroku应用（替换成你想要的应用名）：

   heroku create your-unique-app-name
   

3. 如果你的项目需要环境变量（比如API地址），用这个命令设置：

   heroku config:set REACT_APP_API_URL=https://your-api-endpoint.com
   

4. 推送代码到Heroku部署：

   git push heroku main
   

   （如果你的主分支是master，就把main换成master）
5. 部署完成后，打开应用看看：

   heroku open
   

四、如果还是有问题？排查技巧 #

• 最常见的超时原因：你之前可能用了react-scripts start作为Heroku的启动命令，这是开发服务器，会一直等待热重载连接，Heroku会认为服务没启动成功，60秒后就会杀掉进程——换成serve -s build就解决了
• 查看实时日志找错误：

  heroku logs --tail
  

  日志里会显示具体的崩溃原因，比如依赖缺失、端口错误、构建失败等
• 确认所有生产必需的依赖都在dependencies里，比如serve、react-scripts这些不能放在devDependencies

内容的提问来源于stack exchange，提问作者Syahrul Ardiansyah