如何在MERN应用前端使用Heroku分配的Node.js动态PORT？

问题根源很明确：React的proxy配置只在本地开发环境（npm start）起作用，生产环境构建好的静态文件根本不吃这一套。你要是前端请求写死了localhost，或者没处理好生产环境的路径，肯定会出问题。

直接上解决步骤：

• 把前端请求改成相对路径：把代码里所有http://localhost/pagesWithMovies/1这种写死的请求，换成/pagesWithMovies/1。这样生产环境下，请求会自动拼上当前Heroku应用的域名，不会再指向localhost。

• 让后端托管前端静态文件：在你的server.js里加一段代码，保证Heroku上的后端能正确返回前端构建好的文件：

const path = require('path');

// 生产环境下托管前端静态资源
if (process.env.NODE_ENV === 'production') {
  app.use(express.static(path.join(__dirname, '../client/build')));

  // 所有非API的请求都返回前端的index.html
  app.get('*', (req, res) => {
    res.sendFile(path.join(__dirname, '../client/build/index.html'));
  });
}

• 配置根目录package.json的构建脚本：根目录的package.json里必须加heroku-postbuild脚本，让Heroku部署时自动构建前端：

"scripts": {
  "start": "node server.js",
  "heroku-postbuild": "cd client && npm install && npm run build"
}

这个脚本会让Heroku先进入client目录装依赖，再构建生产版的前端文件，之后才启动后端。

• 别瞎改PORT配置：你原来的const port = process.env.PORT || 80;完全没问题，Heroku会自动分配动态端口，不需要在面板里加PORT环境变量，代码会自己读。

改完重新部署，打开Heroku应用，用浏览器开发者工具的网络面板看请求地址，应该就变成Heroku域名开头的请求了，比如https://你的应用名.herokuapp.com/pagesWithMovies/1。

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