React应用Heroku部署成功后崩溃，求解决方案及GitHub自动部署配置

API 探路者

2026-6-30

React应用Heroku部署构建成功但崩溃的问题

我的React应用在localhost、Vercel、Render、Netlify都能正常运行，但部署到Heroku时，构建成功但应用崩溃。已经尝试添加mars/create-react-app Buildpack，问题仍未解决，希望将GitHub仓库与Heroku关联实现自动部署。

package.json代码

{
  "homepage": "https://www.kmnahidulislam.com/",
  "name": "kmnahidulislam",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "colorthief": "^2.3.0",
    "enzyme": "^3.11.0",
    "enzyme-adapter-react-16": "^1.15.6",
    "gh-pages": "^2.1.1",
    "jest-canvas-mock": "^2.3.1",
    "lottie-react": "^2.4.0",
    "react": "^16.10.2",
    "react-dom": "^16.10.2",
    "react-easy-emoji": "^1.8.1",
    "react-headroom": "^3.0.0",
    "react-reveal": "^1.2.2",
    "react-scripts": "^5.0.1",
    "react-test-renderer": "^16.10.2",
    "react-twitter-embed": "3.0.3",
    "sass": "^1.32.8"
  },
  "scripts": {
    "predeploy": "npm run build",
    "start": "node fetch.js && react-scripts start",
    "build": "node fetch.js && react-scripts build",
    "deploy": "gh-pages -b master -d build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "format": "prettier --write \"../../*.{js,css,json,scss}\"",
    "check-format": "prettier -c \"../../*.{js,css,json,scss}\""
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.3%",
      "not ie 11",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      ">0.3%",
      "not ie 11",
      "not dead",
      "not op_mini all",
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
    "dotenv": "^8.6.0",
    "prettier": "^2.3.1"
  }
}

Heroku构建日志

-----&gt; Building on the Heroku-22 stack
-----&gt; Determining which buildpack to use for this app
-----&gt; Node.js app detected       
-----&gt; Creating runtime environment       
NPM_CONFIG_LOGLEVEL=error       
NODE_VERBOSE=false       
NODE_ENV=production       
NODE_MODULES_CACHE=true       
-----&gt; Installing binaries       
engines.node (package.json):  unspecified       
engines.npm (package.json):   unspecified (use default)       
Resolving node version 20.x...       
Downloading and installing node 20.11.0...       
Using default npm version: 10.2.4       
-----&gt; Installing dependencies       
Installing node modules       
added 1558 packages, and audited 1559 packages in 23s       
252 packages are looking for funding         
run `npm fund` for details       
14 vulnerabilities (7 moderate, 6 high, 1 critical)       
To address issues that do not require attention, run:         
npm audit fix       
To address all issues (including breaking changes), run:         
npm audit fix --force       
Run `npm audit` for details.       
npm notice        
npm notice New minor version of npm available! 10.2.4 -&gt; 10.4.0       
npm notice Changelog: &lt;https://github.com/npm/cli/releases/tag/v10.4.0&gt;       
npm notice Run `npm install -g npm@10.4.0` to update!       
npm notice        
-----&gt; Build       
Running build       
&gt; kmnahidulislam@0.1.0 build       
&gt; node fetch.js && react-scripts build       
Fetching profile data for kmnahidulislam       
Fetching Medium blogs data for kmnahidulislam       
statusCode: 200       
saved file to public/profile.json       
statusCode: 200       
saved file to public/blogs.json       
Creating an optimized production build...
Browserslist: caniuse-lite is outdated. Please run:  npx update-browserslist-db@latest  Why you should do it regularly: https://github.com/browserslist/update-db#readme
Browserslist: caniuse-lite is outdated. Please run:  npx update-browserslist-db@latest  Why you should do it regularly: https://github.com/browserslist/update-db#readme       
Compiled successfully.       
File sizes after gzip:       
231.79 kB  build/static/js/main.48fe4e58.js       
5.11 kB    build/static/css/main.ce488826.css       
1.11 kB    build/static/js/64.41aa5367.chunk.js       
870 B      build/static/js/769.7b11bf34.chunk.js       
555 B      build/static/css/64.bba8fa55.chunk.css       
496 B      build/static/css/769.b3cbb36b.chunk.css       
The project was built assuming it is hosted at /.       
You can control this with the homepage field in your package.json.       
The build folder is ready to be deployed.       
You may serve it with a static server:         
npm install -g serve         
serve -s build       
Find out more about deployment here:         
https://cra.link/deployment        
-----&gt; Caching build       
- npm cache       
-----&gt; Pruning devDependencies       
up to date, audited 1556 packages in 5s       
251 packages are looking for funding         
run `npm fund` for details       
14 vulnerabilities (7 moderate, 6 high, 1 critical)       
To address issues that do not require attention, run:         
npm audit fix       
To address all issues (including breaking changes), run:         
npm audit fix --force       
Run `npm audit` for details.       
npm notice        
npm notice New minor version of npm available! 10.2.4 -&gt; 10.4.0       
npm notice Changelog: &lt;https://github.com/npm/cli/releases/tag/v10.4.0&gt;       
npm notice Run `npm install -g npm@10.4.0` to update!       
npm notice        
-----&gt; Build succeeded!
-----&gt; Discovering process types       
Procfile declares types     -&gt; (none)       
Default types for buildpack -&gt; web
-----&gt; Compressing...       
Done: 103.9M
-----&gt; Launching...       
Released v3       
https://nahidul-8c586dc3b95d.herokuapp.com/ deployed to Heroku
Build finished

Heroku应用崩溃日志

2024-02-04T17:58:28.811247+00:00 app[web.1]:     at Module.load (node:internal/modules/cjs/loader:1207:32)
2024-02-04T17:58:28.811247+00:00 app[web.1]:     at Module._load (node:internal/modules/cjs/loader:1023:12)
2024-02-04T17:58:28.811247+00:00 app[web.1]:     at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:135:12) {
2024-02-04T17:58:28.811248+00:00 app[web.1]:   code: 'MODULE_NOT_FOUND',
2024-02-04T17:58:28.811248+00:00 app[web.1]:   requireStack: [ '/app/fetch.js' ]
2024-02-04T17:58:28.811250+00:00 app[web.1]: }
2024-02-04T17:58:28.811250+00:00 app[web.1]: 
2024-02-04T17:58:28.811250+00:00 app[web.1]: Node.js v20.11.0
2024-02-04T17:58:28.881657+00:00 heroku[web.1]: Process exited with status 1
2024-02-04T17:58:28.906884+00:00 heroku[web.1]: State changed from starting to crashed

解决方案

问题根源

启动命令错误：Heroku默认执行npm start，你的start命令用了开发环境的react-scripts start，生产环境应该用静态服务器托管构建好的build文件夹，而非启动开发服务器。
依赖缺失：fetch.js依赖的模块可能在devDependencies里，Heroku生产环境会自动移除开发依赖，导致启动时找不到对应模块（日志里的MODULE_NOT_FOUND）。
脚本执行时机错误：fetch.js是构建时获取数据的脚本，只需要在build阶段执行，启动阶段不需要重复运行。

修复步骤

1. 安装生产环境静态服务器

把serve添加到生产依赖中：

npm install serve --save

2. 修改package.json的启动脚本

更新start命令为静态服务器启动命令，确保fetch.js只在构建时执行：

"scripts": {
  "predeploy": "npm run build",
  "start": "serve -s build",
  "build": "node fetch.js && react-scripts build",
  "deploy": "gh-pages -b master -d build",
  "test": "react-scripts test",
  "eject": "react-scripts eject",
  "format": "prettier --write \"../../*.{js,css,json,scss}\"",
  "check-format": "prettier -c \"../../*.{js,css,json,scss}\""
}

3. 调整fetch.js的依赖位置

检查fetch.js里用到的所有npm包，如果有在devDependencies中的，移到dependencies里，比如dotenv：

"dependencies": {
  // ...其他原有依赖
  "dotenv": "^8.6.0"
},
"devDependencies": {
  "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
  "prettier": "^2.3.1"
}

4. 配置正确的Buildpack（可选）

确保使用官方的create-react-app buildpack：

heroku buildpacks:set mars/create-react-app

5. 重新部署

提交修改到GitHub，触发Heroku自动部署，或者手动推送：

git add .
git commit -m "修复Heroku生产环境启动问题"
git push heroku main

额外优化

在package.json中指定Node和npm版本，避免Heroku自动选择的版本和本地不一致：

"engines": {
  "node": "20.x",
  "npm": "10.x"
}

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

React应用Heroku部署成功后崩溃，求解决方案及GitHub自动部署配置

package.json代码 #

Heroku构建日志 #

Heroku应用崩溃日志 #

问题根源 #

修复步骤 #