reactjs – 如何在Create React App Proxy设置中使用ENV变量注入

Use environment variables to inject the right server host and port
into your app.

这既不涉及代理服务器也不涉及开发服务器.如果代理不能为您提供足够的灵活性(即,如果您需要使用除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,就无法影响代理设置.

见Configuring the Proxy Manually (CRA docs)

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

您还可以看到line 96 of CRA’s start.js.此实现完全没有能力使用ENV vars将主机/端口注入CRA的代理设置.

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

You could just eject create react app：

npm run eject

所有这些问题都会立即消失……上面引用的start.js脚本是一些被弹出的代码.因此,您可以非常轻松地使用ENV vars替换这些代理设置.

在做这个之前,请务必为自己创建一个检查点,因为没有恢复弹射.

但是 – 如果你必须坚持CRA – 你可以很容易地使用环境变量修改package.json.

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

这基本上是CRA对REACT_APP_ env变量所做的事情(尽管它直接将它们注入到process.env中).

package.json只是一个很大的JSON对象,因此您需要做的就是在部署之前在服务器端解析它,将“代理”值更新为ENV vars提供的值,保存文件,然后运行你的构建/部署.

以下是如何实现此目的的一个非常简单的示例,您只需在部署之前运行此脚本,您仍然可以访问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”的问题,但我不认为这是必要的方法.

此外,这个DOES会回答标题问题“如何在Create React App Proxy设置中使用ENV变量注入端口和主机？”