子目录中 create-react-app 的代理 $PORT 值

Question

我正在开发一个从节点端点为 create-react-app 提供服务的 repo。因此，react 应用嵌套为子目录：

.
├── Procfile
├── frontend
│   ├── README.md
│   ├── build
│   ├── package.json <---- "proxy": "http://localhost:$PORT" 
│   ├── public 
│   ├── src
│   │   ├── App.css
│   │   ├── App.js
│   │   └── // etc...
│   └── .env <----- frontend env file, removed PORT value from here
├── package.json
├── src
│   ├── app.js
│   ├── server.js
│   └── // etc...
├── .env <--- backend env file, PORT=9000 for node
├── static.json
└── yarn.lock

从 .env 文件中删除端口值后，CRA 在端口 3000 上运行。如果我硬编码端口 9000 而不是 $PORT，则代理在开发中正常工作。

但是，在部署到生产环境时，我希望前端代理 Heroku 的动态端口号，这是一个示例：

Heroku 似乎忽略了端口值，即使我故意在他们网站的 env 中定义它，值为 9000。

我的问题是如何在前端定义代理而不让 CRA 在该端口号上实例化，例如在前端 .env 中应用 PORT=9000，但在端口 3000 处加载 CRA。

我尝试在脚本中定义端口号，同时确保我在前端环境中定义了 PORT=9000：

  "scripts": {
    "start": "export PORT=3000 && react-scripts start",

CRA 将在 3000 处加载，但出现代理错误：

Answer 1

Heroku 不允许您选择端口，而是为您的应用分配一个端口以用作环境变量。阅读更多here

每个 Web 进程都简单地绑定到一个端口，并监听来自该端口的请求。 Heroku 将要绑定的端口分配为 PORT 环境变量。

• 删除所有硬编码的PORT变量

• 在package.json 文件中使用$PORT 并不理想，因为您无法向其中添加逻辑。在你的 nodejs 应用程序中读取端口变量，如下所示：

  const PORT = process.env.PORT || 3000
  

  这会将端口变量设置为环境变量 PORT 中的任何值，如果未设置，则默认为 3000

• 使用 CRA 为生产应用提供服务效率不高

• 不要为 react 和 nodejs 运行两台服务器，而是使用你的 nodejs 应用来提供生产构建的 react 应用

  const express = require('express')
  const path = require('path')
  const app = express()
  // All your other routes go here
  app.use('/', express.static(path.join(__dirname,'client/build'))) // this must be the last one
  

  注意：这是假设您的 React 应用构建在相对于您的项目根目录的 client/build 内

• 代理设置仅用于开发方便，如果应用程序不是由 CRA 提供服务，则将不起作用

• 让 heroku 在构建时构建你的 react 应用程序：

  npm --prefix client run build # or if you use yarn
  yarn --cwd client build
  

  在您的外部package.json 文件的构建脚本中

• 您的启动脚本将运行您的 nodejs 服务器：

  "scripts": {
    "start": "node src/server.js",
    "build": "npm --prefix client run build"
  }
  

• 不要将您的 .env 文件提交到 heroku，如果您有 heroku cli 或使用仪表板设置，请直接使用 heroku config:set KEY=VALUE 设置环境变量

  注意：在推送代码之前执行此操作，以便在 react 应用程序的构建期间访问这些变量