react和axios如何使用不同的IP地址进行开发和生产答案

【问题标题】：how to use different IP address for development and production with react and axiosreact和axios如何使用不同的IP地址进行开发和生产
【发布时间】：2020-02-04 17:49:39
【问题描述】：

我正在使用 react & django rest 框架构建一个应用程序。我可以通过 axios url (127.0.0.1:8000) 访问所有数据。但是当我将它部署到天蓝色进行生产时，axios ip 需要通过天蓝色容器 ip 更改以请求 url。为生产执行此操作的最佳方法是什么？

【问题讨论】：

标签： reactjs axios

【解决方案1】：

您可以通过创建.env 文件来使用environment variables。您可以拥有一个用于开发的 .env.development 文件和一个用于生产的 .env.production 文件。

当您在使用npm start 或yarn start 的机器上进行开发时，它将在您的应用程序中使用.env.development 文件。

注意：更改 .env 文件后，您需要重新启动开发服务器，以便您的更改在开发过程中生效。

当您使用npm build 或yarn build 构建生产环境时，它将使用.env.production 文件。

.env.development

REACT_APP_AXIOS_URL="127.0.0.1:8000"

.env.production

REACT_APP_AXIOS_URL="http://yourapi.com"

那么你的应用代码只需要通过process.env引用这些变量即可。

axios.get(process.env.REACT_APP_AXIOS_URL)

【讨论】：

【解决方案2】：

您可以为此目的使用config。它将创建多个根据应用环境加载的配置文件。在您的场景中，您需要使用以下命令安装config：

npm i config

之后，在您的项目根目录中创建一个config 文件夹。创建两个文件为default.json 和production.json。现在您可以像这样为两个文件/环境创建具有不同值的JSON 文件：

{
  serverURL: "localhost:3000"
}

然后使用像这样的变量：

const config = require('config').default;

const url = config.get('serverURL');

在请求时将此url 变量传递给axios。它会根据环境设置自动选择IP。当您创建 react.js 应用程序构建时，它会将环境设置为生产环境。希望这会对你有所帮助。

【讨论】：