Webpack应用本地运行正常 部署Heroku报R10启动超时崩溃

R10启动超时和Webpack编译逻辑无关，是启动流程完全不符合Heroku生产环境运行规则导致的：

• 当前npm start执行的webpack-dev-server是本地开发专属的热更新服务，默认硬绑定本地8080端口，不会读取Heroku动态注入的$PORT环境变量，自然无法在启动60秒内绑定到平台要求的端口
• 启动命令携带的--open参数会尝试调用系统默认浏览器，Heroku运行环境无图形界面，该操作会直接卡住进程启动流程
• 未配置生产构建环节，直接把开发服务当作生产服务运行，就算临时适配端口，也会存在启动慢、安全漏洞、性能差等问题。

1. 调整依赖与package.json脚本 #

首先安装生产环境静态服务依赖，不需要额外引入Express等服务端框架，用零配置的serve托管打包后的静态文件即可：

npm install serve --save

注意：必须加--save把依赖装到dependencies下，Heroku生产运行环境默认不会安装devDependencies中的包，装错位置会导致启动时找不到命令。

随后修改package.json中的scripts字段，区分本地开发、构建、生产启动命令，保留你本地开发用的原start脚本不做修改，避免影响本地调试：

{
  "scripts": {
    "start": "webpack-dev-server --config webpack.dev.js --open",
    "build": "webpack --config webpack.prod.js",
    "heroku-postbuild": "npm run build",
    "start:prod": "serve -s dist -l $PORT"
  }
}

字段说明：

• heroku-postbuild是Heroku识别的专属钩子，部署时依赖安装完成后会自动执行该命令，跑Webpack生产构建，把产物输出到dist目录
• start:prod是生产启动命令，会自动读取Heroku分配的$PORT端口启动静态服务，托管dist目录下的文件，-s参数是适配单页应用的路由回退规则，避免前端路由刷新404

2. 修正Webpack生产配置 #

打开webpack.prod.js，确认output配置中添加根路径的publicPath，避免部署后静态资源引用路径错误导致404：

module.exports = {
  // 你原有的其他生产配置保持不变即可
  output: {
    // 你原有的path、filename等配置保留
    publicPath: '/',
    clean: true // 可选配置，每次构建自动清空旧的dist目录文件，避免冗余
  }
}

开发配置webpack.dev.js不需要做任何修改，本地开发的热更新、8080端口逻辑可以完全保留。

3. 配置Heroku专属启动命令 #

在项目根目录新建无后缀名的Procfile文件，指定Heroku平台的web进程启动命令，这样不会覆盖你本地的npm start开发逻辑：

web: npm run start:prod

1. 本地先执行npm run build，确认根目录生成dist文件夹，内部包含打包完成的html、js、css等静态资源
2. 本地模拟Heroku环境验证启动：Mac/Linux系统执行PORT=5000 npm run start:prod，Windows系统执行set PORT=5000 && npm run start:prod，打开localhost:5000确认应用功能正常
3. 将修改后的代码推送到Heroku远程仓库，观察部署日志：流程会依次走依赖安装、生产构建、服务启动三个环节，启动成功后日志会显示服务监听的端口号，不会再触发R10超时错误。

• 不要尝试修改webpack-dev-server配置硬适配Heroku端口：dev-server内置了大量开发调试逻辑、sourcemap映射、热更新websocket服务，放在生产环境运行不仅启动慢，还会暴露调试接口带来安全风险，完全不推荐
• 不要把本地构建生成的dist目录提交到Git仓库，在.gitignore中添加dist规则即可，让Heroku在部署时自动完成构建，避免本地环境和线上环境构建产物不一致
• Webpack、Webpack-CLI等构建工具可以保留在devDependencies中，Heroku在构建阶段会自动安装开发依赖完成打包，构建完成后会自动裁剪冗余的开发依赖减小运行体积，不需要手动调整依赖位置。

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