前言

这篇文章来介绍一下，react中的换件变量，以及如何配置不同的环境，例如：Development，Staging，Testing，Production。

话不多说，先来share一下这篇文章的repo:

1. `React`的原生环境变量

我们通过create-react-app创建的项目会自带两个环境变量NODE_ENV和PUBLIC_URL。

1.1 `NODE_ENV`

该变量是通过react-script自动复制的，不可更改。不过cross-env可以hack，不过在不同的操作系统上效果不同，我是用的是windows操作系统进行开发，完全不好使，所以还是follow官方给出的做法了。

create-react-app的文档给出的解释是：

process.env.NODE_ENV. When you run npm start, it is always equal to development, when you run npm test it is always equal to test, and when you run npm run build to make a production bundle, it is always equal to ‘production’. You cannot override NODE_ENV manually. This prevents developers from accidentally deploying a slow development build to production.

意思就是说:

执行npm start, NODE_ENV总是被设置成development
执行npm test, NODE_ENV总是被设置成test
执行npm run build, NODE_ENV总是被设置成production
NODE_ENV, 不能被手工修改，这样能确保不会把较慢的development环境部署为production

1.1 `PUBLIC_URL`

这个环境变量用于引用模块资源(css, scss)以外的资源，类似于favicon.ico等文件，默认情况下为string.empty。这个变量是可写的，可以设置为cdn路径，用于更快的加载模块外资源。

2. 使用`.env`文件设置环境变量

2.1 `.env`文件

用户可以在.env文件中，添加自己的以REACT_APP_为前缀的环境变量，react-script会通过dotenv将.env文件中的以REACT_APP_开头的环境变量，加载到process.env中。

E.g.

假如我们在.env加入如下内容

REACT_APP_API_BASEURL=http://yafeya.com
复制代码

我们可以在任何一个module中，通过一下代码访问这个环境变量

let apiBaseUrl = process.env.REACT_APP_API_BASEURL;
console.log(apiBaseUrl); 
// will print
// http://yafeya.com
复制代码

2.2 其他的`.env`文件

.env: 默认文件。

如果没有其他文件override, 在tsx中加载将使用.env文件中的值。

e.g.

.env文件中设置REACT_APP_API_BASEURL=http://yafeya.com, 如果其他的.env文件，如.env.development中没有改写这个值，那么在tsx中调用process.env.REACT_APP_API_BASEURL将会得到http://yafeya.com。
.env.local: Local override，此文件将会应用到除test意外的所有环境。
.env.development, .env.test, .env.production: 具体环境设置。

在1.1中已经介绍过响应的规则。
.env.development.local, .env.test.local, .env.production.local: 每一个具体环境的local override。

2.3 各种命令下，`.env`文件的优先级设置

npm start: .env.development.local, .env.local, .env.development, .env
npm run build: .env.production.local, .env.local, .env.production, .env
npm test: .env.test.local, .env.test, .env

3. 运行效果

在本篇文章提供的Demo中提供了一个简单的例子，将React-Demo通过nginx和docker部署到了一台虚机上，这个议题我们会在后续的文章中详细介绍，这里就不展开介绍了，可以在目标机器上运行以下代码，然后访问http://some-domain:9981访问发布后的网站。

./docker-exec
复制代码

我们在项目中添加了.env, .env.development 与 .env.production, 里面设置了REACT_APP_API_BASEURL。然后在App.tsx中打印process.env.REACT_APP_API_BASEURL。

// App.tsx
export class App extends Component {

  render() {
    console.log(`Environment: ${process.env.NODE_ENV}`);
    console.log(`Base Url: ${process.env.REACT_APP_API_BASEURL}`);

    return (
      <Router/>
    );
  }
}
复制代码