前端快闪三：多环境灵活配置reactApp构建过程

你已经使用Create React App脚手架搭建了React应用，现在该部署了。

使用npm run build或者yarn build构建出资源产物， 由web服务器承载，包含静态和动态资源（api请求）。

构建时存在一些配置，eg：环境参数、后端api请求基地址。

构建时变量织入

环境变量是在构建阶段被织入，一旦完成构建过程，构建的产出物中变量值就被固定了(不论产出物被放置到哪个服务进程、哪个环境), 到了浏览器就不nosense环境变量。

---

或许你会这样手写 if/else来配置不同环境的后端API基地址：

api-config.js

let backendHost;
const apiVersion = 'v1';

const hostname = window && window.location && window.location.hostname;

if(hostname === 'realsite.com') {
  backendHost = 'https://api.realsite.com';
} else if(hostname === 'staging.realsite.com') {
  backendHost = 'https://staging.api.realsite.com';
} else if(/^qa/.test(hostname)) {
  backendHost = `https://api.${hostname}`;
} else {
  backendHost = process.env.REACT_APP_BACKEND_HOST || 'http://localhost:8080';
}

export const API_ROOT = `${backendHost}/api/${apiVersion}`;

然后在应用文件api.js， 导入这个配置文件

import {API_ROOT} from './api-config'
function getUsers() {
   return  fetch('${API_ROOT}/users').then(res=> res.josn).then(json=> json.data.users)
}

终究不够优雅和敏捷。

---

react支持通过环境变量来定制react的构建参数。

快闪三： react工程化：通过环境变量灵活配置react构建

Create React APP脚手架应用，构建时可通过内置的process.env来获取环境变量。

怎么导入环境变量，有2个思路。

(1) 导入系统环境变量

react的proces.env变量会捕获以REACT_APP_开头的环境变量。

export REACT_APP_API_HOST= example.com yarn run build

# yarn build将产生如下效果：
process.env.REACT_APP_API_HOST ="example.com"
process.env.NODE_ENV ="production"

怎么设置环境变量
windows: set/setx命令; linux: export命令，这里不赘述。

这种方式只能作为一种临时方案，你需要一种工程化的思维来管控不同环境的配置

（2） .env文件

临时环境变量可以影响全局process.env的下级变量值， 但是不够方便，

Create React App支持使用.env文件来固定存储环境变量值。

REACT_APP_SPECIAL_FEATURE=true
REACT_APP_API_HOST=default-host.com

上面的环境变量将会在development、test、production等环境加载，

如果你要为不同环境设置变量，可放置.env.development、env.test、.env.production 文件。

---

实际使用时， 直接当react已经内置了该环境变量使用。

eg： axio 使用后端基地址。

const service = axios.create({
    baseURL: process.env.REACT_APP_APIBASEURL, 
    timeout: 5000
})
// 添加请求拦截器: 这是向后台服务器发起的ajax请求
service.interceptors.request.use((reqconfig) => {
    reqconfig.withCredentials = true;
    return reqconfig;
}, (error) => {
    return Promise.reject(error);
});

注意： 浏览器现在不允许混合资源（mixed-content）， 也就是https站点包含http资源，故建议该后端基地址使用scheme的相对路径， eg： //api.baidu.com/，

这样站点的后端api请求就会根据 站点的实际scheme自动加载对应的scheme, 浏览器不会再报[已屏蔽，mixed-content错误].