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

Question

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

从CRA docs开始说明

  

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

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

根据this和this，影响代理设置的唯一方法是通过package.json。

Answer 1

关于：

  

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

这既不涉及代理服务器也不涉及开发服务器。如果proxy没有为您提供足够的灵活性（即，如果您需要使用http，https或{之外的协议，则建议如何处理每个环境的服务器设置{1}}）。例如，如果您在代码中有api调用，则可以使用环境变量执行以下操作：

ws

每个环境都有自己对axios(process.env.REACT_APP_BASE_URL + endpoint, options).then(data=>{ console.dir(data); }) 的定义。

没有REACT_APP_BASE_URL：

如果不修改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

package.json

所有这些问题都会立即消失......上面引用的npm run eject脚本是弹出的代码。因此，您可以很容易地用ENV vars替换这些代理设置。

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

但是 - 如果你必须坚持使用CRA - 你 CAN 很容易使用环境变量修改start.js。

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

这基本上是CRA对package.json env vars所做的事情（尽管它直接将它们注入REACT_APP_）。

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

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

process.env

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

此外， DOES 会回答 title 问题“如何在创建React应用代理设置中使用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

参考：Proxy manually

Answer 3

  

是否可以在CRA中设置代理设置与使用package.json？

不同

没有。这不可能。好吧，至少还没有（2017/01/14）。

React代理功能有点complicated，因此，"advanced" proxy configuration的简化就会实现从env变量在React app中设置代理的想法。结束。

  

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

它是关于开发服务器本身。根据情况，所有代理配置都在包文件中配置。

Answer 4

您可以为端口和主机定义env变量。   REACT_APP_PORT: "PORT of Application", REACT_APP_HOST: "host of application"

要将所有env注入您的应用程序，您可以使用webpack define plugin。

您需要添加插件部分，例如。

const env = require("path to your env file")
//other webpack settings
plugins: {
//plugins
new webpack.DefinePlugin(env)
}

现在，如果您看到code of create-react-app它首先在env变量中查找port和host。

另外，请注意

  

您必须创建以REACT_APP_开头的自定义环境变量。除NODE_ENV之外的任何其他变量都将被忽略，以避免在计算机上意外暴露可能具有相同名称的私钥