Node Server+React UI(TS)部署Heroku仅显示Node后端问题求助

你的配置存在4个核心问题，直接导致前端页面无法加载：

• 最核心的问题：服务端完全没有配置React静态资源托管。React执行build命令后会在ui/build目录生成打包好的HTML、JS、CSS静态文件，但你的Node服务没有任何逻辑把这个目录映射为可访问的静态资源路径，访问站点时服务端只会返回自己写的接口响应，自然加载不到前端页面。
• 构建流程逻辑错误：你把服务端的依赖安装、TS编译步骤放在了start脚本里，Heroku的运行机制是构建阶段执行build命令、完成后会裁剪开发依赖再启动应用，启动阶段执行npm install不仅会拖慢启动速度，还可能因为权限、网络、依赖被裁剪等问题导致服务端编译失败。
• 缺少前端路由兜底配置：就算配置了静态资源，如果没有把所有非API路径的请求都指向React的index.html入口，后续用React Router做前端路由时，刷新子路径会直接返回404。
• 服务端配置字段错误：server/package.json里的main字段指向了未编译的TS源文件src/server.ts，虽然你当前的启动命令是直接指定路径执行JS文件暂时不会触发问题，但如果有其他模块引用服务端入口、或者Heroku自动识别启动入口时就会出错。

修正步骤 #

1. 给服务端添加静态资源托管和路由兜底逻辑
   打开server/src/server.ts，在你所有API路由定义的后面添加如下代码（确保通配路由不会覆盖你的API接口）：

   import path from 'path';
   // 如果你已经初始化了express实例就不用重复写，直接用你自己的app变量名
   // 下面的相对路径是按照服务端编译后产物在server/build目录计算的，如果路径不对可以自行调整层级
   app.use(express.static(path.join(__dirname, '../../ui/build')));
   
   app.get('*', (req, res) => {
     res.sendFile(path.join(__dirname, '../../ui/build/index.html'));
   });
   

2. 修正根目录package.json的脚本，把前后端的依赖安装、构建动作全部放到build阶段，启动阶段直接运行编译好的产物：

   {
     "scripts": {
       "build": "cd server/ && npm install && npm run build && cd ../ui/ && npm install && npm run build",
       "start": "cd server/ && npm start"
     }
   }
   

3. 修正server/package.json配置，去掉启动阶段的编译步骤，修正main字段：

   {
     "main": "build/server.js",
     "scripts": {
       "clean": "rimraf build",
       "build": "npm run clean && tsc",
       "start": "node build/server.js",
       "test": "echo \"Error: no test specified\" && exit 1"
     }
   }
   

   注意：如果typescript、ts类型定义这类编译期依赖被你放在了server目录的devDependencies下，要么把这些依赖移到dependencies配置里，要么配置Heroku在构建阶段不裁剪devDependencies，否则执行tsc编译时会报命令不存在。学习项目直接把编译相关依赖放到dependencies即可，不用严格区分依赖类型。

4. （可选）如果Heroku识别不到启动命令，可以在项目根目录新建名为Procfile的文件，内容填写：

   web: npm start
   

所有修改完成后提交代码重新部署到Heroku，即可正常加载React前端页面。

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