前端快閃三：多環境靈活配置react

你已經使用Create React App腳手架搭建了React應用，現在該部署了。

一般會使用npm run build或者yarn build構建出靜態資源，由web伺服器承載。

您會體驗到多環境：test、staging、prod,他們都是獨立伺服器、有不同的主機名。

或者你會這樣手寫 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應用是作為靜態資源執行在瀏覽器上，而瀏覽器並不知道有環境變數這個概念。

case1. 通過環境變數配置 react後端地址

Create React APP腳手架建立了react應用，可通過全域性的process.env來獲取環境變數。

process.env.NODE_ENV在構建時被設定為production。
還可以使用REACT_APP_開頭的環境變數來配置react構建時能用的proces.env.

故

REACT_APP_API_HOST= example.com yarn run build

# 將產生如下效果：

process.env.REACT_APP_API_HOST ="example.com"

process.env.NODE_ENV ="production"

怎麼設定環境變數

windows: set/setx命令; linux: export命令，這裡不贅述。

case2 .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