如何在Create React App Proxy设置中使用ENV变量注入端口和主机？

Question

是否可以在CRA中设置代理设置与使用package.json不同？例如使用ENV变量？

从CRA 文档中可以看出

使用环境变量将正确的服务器主机和端口注入您的应用程序.

这句话是关于代理还是开发服务器本身？

根据这个和这个,影响代理设置的唯一方法是通过package.json.

Answer 1

关于：

使用环境变量将正确的服务器主机和端口注入您的应用程序。

这既不是代理服务器也不是开发服务器。如果proxy不能为您提供足够的灵活性（即，如果您需要使用http、https、 或以外的协议ws），这是关于如何处理每个环境服务器设置的建议。例如，如果您的代码中有一个 api 调用，您可以使用环境变量来执行以下操作：

axios(process.env.REACT_APP_BASE_URL + endpoint, options).then(data=>{ console.dir(data); })

每个环境都有自己的REACT_APP_BASE_URL.

没有package.json：

不修改就不可能影响代理设置package.json。

请参阅手动配置代理（CRA 文档）

package.json 是影响代理设置的唯一记录方式。

您还可以看到CRA 的第 96 行start.js。此实现绝对无法使用 ENV 变量将主机/端口注入 CRA 的代理设置。

老实说，这确实是我讨厌 CRA 的原因之一。当不受 CRA 限制的约束时，所有这些行为都非常容易处理。

你可以直接弹出 create react app：

npm run eject

所有这些问题都会立即消失......start.js上面引用的脚本是一些被弹出的代码。所以你可以很容易地用 ENV 变量替换这些代理设置。

在执行此操作之前，请务必为自己创建一个检查点，因为无法恢复弹射。

但是-如果你必须使用CRA坚持-你CAN很轻松地修改package.json使用环境变量。

如何package.json在构建时注入 ENV 变量：

这本质上是 CRA 对REACT_APP_env vars所做的（尽管它直接将它们注入到process.env）。

package.json只是一个大的 JSON 对象，因此您需要做的就是在部署之前在服务器端解析它，将"proxy"值更新为您的 ENV 变量提供的值，保存文件，然后运行您的构建/部署。

这是一个非常简单的示例，说明如何实现这一点，您只需要在部署之前在您仍然可以访问的上下文中运行此脚本process.env：

const fs = require('fs');

// read/process package.json
const file = './package.json';
let pkg = JSON.parse(fs.readFileSync(file).toString());

// at this point you should have access to your ENV vars
pkg.proxy = `${process.env.HOST}:${process.env.PORT}`;

// the 2 enables pretty-printing and defines the number of spaces to use
fs.writeFileSync(pkg, JSON.stringify(file, null, 2));

我知道这并没有明确回答如何处理这个“没有 package.json”的问题，但我认为这不是必要的方法。

此外，这确实回答了“如何在 Create React App Proxy 设置中使用 ENV 变量注入端口和主机？”的标题问题。

Answer 2

注意：此功能可用于 react-scripts@2.0.0 及更高版本。

您现在可以手动配置代理。您需要先安装http-proxy-middleware。

npm install http-proxy-middleware --save

然后创建一个src/setupProxy.js包含以下内容的文件。

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(
    '/api', // You can pass in an array too eg. ['/api', '/another/path']
    createProxyMiddleware({
      target: process.env.REACT_APP_PROXY_HOST,
      changeOrigin: true,
    })
  );
};

您现在可以在.env文件中添加代理，记住您需要REACT_APP_开发服务器的前缀来获取环境变量。

REACT_APP_PROXY_HOST=http://localhost:5000

参考：手动代理