Use environment variables to inject the right server host and port into your app.@H_404_2@
这句话是关于代理还是开发服务器本身?@H_404_2@
Use environment variables to inject the right server host and port
into your app.@H_404_2@
这既不涉及代理服务器也不涉及开发服务器.如果代理不能为您提供足够的灵活性(即,如果您需要使用除http,https或ws之外的协议),则建议如何处理每个环境的服务器设置.例如,如果您在代码中有api调用,则可以使用环境变量执行以下操作:@H_404_2@
axios(process.env.REACT_APP_BASE_URL + endpoint,options).then(data=>{ console.dir(data); })
每个环境都有自己的REACT_APP_BASE_URL定义.@H_404_2@
没有package.json:@H_404_2@
如果不修改package.json,就无法影响代理设置.@H_404_2@
见Configuring the Proxy Manually (CRA docs)@H_404_2@
package.json是影响代理设置的唯一记录方式.@H_404_2@
您还可以看到line 96 of CRA’s start.js
.此实现完全没有能力使用ENV vars将主机/端口注入CRA的代理设置.@H_404_2@
这是我讨厌CRA的原因之一,说实话.当不受CRA限制的约束时,所有这些行为都非常容易处理.@H_404_2@
You could just eject create react app:@H_404_2@
npm run eject@H_404_2@
所有这些问题都会立即消失……上面引用的start.js脚本是一些被弹出的代码.因此,您可以非常轻松地使用ENV vars替换这些代理设置.@H_404_2@
在做这个之前,请务必为自己创建一个检查点,因为没有恢复弹射.@H_404_2@
但是 – 如果你必须坚持CRA – 你可以很容易地使用环境变量修改package.json.@H_404_2@
如何在构建时将ENV变量注入package.json:@H_404_2@
这基本上是CRA对REACT_APP_ env变量所做的事情(尽管它直接将它们注入到process.env中).@H_404_2@
package.json只是一个很大的JSON对象,因此您需要做的就是在部署之前在服务器端解析它,将“代理”值更新为ENV vars提供的值,保存文件,然后运行你的构建/部署.@H_404_2@
以下是如何实现此目的的一个非常简单的示例,您只需在部署之前运行此脚本,您仍然可以访问process.env:@H_404_2@
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”的问题,但我不认为这是必要的方法.@H_404_2@
此外,这个DOES会回答标题问题“如何在Create React App Proxy设置中使用ENV变量注入端口和主机?”@H_404_2@