Heroku部署MERN应用时根目录package.json的配置方法

三个核心疑问的直接回应 #

1. 如何告知Heroku客户端文件的存放位置 #

• 无需给Heroku平台传入专门的路径配置，客户端文件的定位逻辑完全由你的Express服务实现定义。
• 你当前使用的react-scripts工具，默认会将编译完成的客户端生产文件输出到项目根目录的build/文件夹下，你只需要在server/index.js中配置Express托管该目录的静态资源，Heroku访问服务时即可正常加载客户端内容。
• 需补充路由兜底逻辑：所有非API接口的前端路由请求，统一返回build/index.html，避免React路由在页面刷新时出现404问题。

2. 是否需要在根目录package.json中新增start脚本 #

• 建议补充，但非强制要求。
• 你当前配置的Procfile内容为web: node server/index.js，这种场景下Heroku启动应用时会优先执行Procfile指定的命令，不会读取package.json中的start脚本；但补充"start": "node server/index.js"是Node.js生态的通用约定，方便你本地直接通过npm start运行生产模式服务，也能避免后续误删Procfile时Heroku找不到合法的启动入口。
• 现有配置的dev/build/test三个react-scripts脚本无需调整，Heroku在构建阶段会自动识别构建命令，在部署流程中自动执行npm run build生成客户端静态产物。

3. 是否需要为客户端配套搭建webpack等构建配置 #

• 完全不需要。
• 你当前使用的react-scripts本身就是React官方封装的零配置构建工具，内部已经集成了全部webpack的编译、打包、压缩、静态资源处理逻辑，自行手写webpack配置反而会和现有工具链产生逻辑冲突。
• 只要保持现有客户端代码符合react-scripts的开发规范，构建阶段所有打包相关工作都会自动完成，无需额外搭建配置。

部署前快速核对清单 #

• 确认Express服务的静态资源托管路径指向正确的build目录
• 确认服务端端口读取process.env.PORT环境变量，不要写死固定端口，否则Heroku会无法正常绑定服务
• 确认项目根目录的.gitignore文件不会排除build目录，避免构建完成后产物被git忽略，导致部署后缺文件
• 本地先执行一次npm run build验证，确认编译过程无报错

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