如何使用 React 構建 UAT 環境？

Question

根據React 文檔，您可以擁有development 、 test和production環境。

NODE_ENV的值自動設置為開發（使用npm start ）、測試（使用npm test時）或生產（使用npm build時）。 因此，從 create-react-app 的角度來看，只有三個環境。

我需要根據我的部署方式更改 root rest api url。 例如

• 開發： baseURL = 'http://localhost:3004';
• 測試： baseURL = 'http://localhost:8080';
• uat: baseURL = 'http://uat.api.azure.com:8080';
• 生產： baseURL = 'http://my.cool.api.com';

如果 UAT 環境僅適用於開發、測試和生產，我該如何配置它？

我的 javascript、package.json 和 build 命令會如何自動切換這些值？

Answer 1

就像John Ruddell 在評論中所寫的那樣，我們仍然應該在暫存環境中使用NODE_ENV=production以使其盡可能接近 prod。 但這對我們這里的問題沒有幫助。

NODE_ENV不能可靠使用的原因是大多數 Node 模塊使用NODE_ENV來調整和優化正常的默認值，如 Express、React、Next 等。 Next 甚至根據常用值development 、 test和production 。

所以解決方案是創建我們自己的變量，如何做到這一點取決於我們正在處理的項目。

使用 Create React App (CRA) 的其他環境

文檔說：

注意：您必須創建以REACT_APP_開頭的自定義環境變量。 除了NODE_ENV之外的任何其他變量都將被忽略，以避免在機器上意外暴露可能具有相同名稱的私鑰。

在Ian Schmitz說的一個問題中對此進行了討論：

相反，您可以創建自己的變量，例如REACT_APP_SERVER_URL ，如果您願意，可以通過.env文件在 dev 和 prod 中具有默認值，然后在構建應用程序時簡單地設置該環境變量，例如REACT_APP_SERVER_URL=... npm run build .

我使用的一個常用包是cross-env ，這樣任何人都可以在任何平台上運行我們的 npm 腳本。

"scripts": {
  "build:uat": "cross-env REACT_APP_SERVER_URL='http://uat.api.azure.com:8080' npm run build"

任何其他 JS 項目

如果我們沒有綁定到 CRA，或者已經彈出，我們可以以類似的方式輕松配置我們想要的任意數量的環境配置。

就個人而言，我喜歡dotenv-extended ，它提供對所需變量和默認值的驗證。

同樣，在package.json文件中：

"scripts": {
  "build:uat": "cross-env APP_ENV=UAT npm run build"

然后，在入口點節點腳本（加載的第一個腳本之一，例如在 babel 配置中需要）：

const dotEnv = require('dotenv-extended');

// Import environment values from a .env.* file
const envFile = dotEnv.load({
  path: `.env.${process.env.APP_ENV || 'local'}`,
  defaults: 'build/env/.env.defaults',
  schema: 'build/env/.env.schema',
  errorOnMissing: true,
  silent: false,
});

然后，作為一個例子，一個 babel 配置文件可以像這樣使用這些：

const env = require('./build/env');

module.exports = {
  plugins: [
    ['transform-define', env],
  ],
};

運行時配置

John Ruddell 還提到，可以在運行時檢測應用程序正在運行的域。

function getApiUrl() {
  const { href } = window.location;

  // UAT
  if (href.indexOf('https://my-uat-env.example.com') !== -1) {
    return 'http://uat.api.azure.com:8080';
  }

  // PROD
  if (href.indexOf('https://example.com') !== -1) {
    return 'http://my.cool.api.com';
  }

  // Defaults to local
  return 'http://localhost:3004';
}

這既快速又簡單，完全無需更改構建/CI/CD 管道即可工作。 雖然它有一些缺點：

• 所有配置都在最終構建中“泄露”，
• 當使用諸如babel-plugin-transform-define或Webpack 的DefinePlugin之類的東西時，它不會從死代碼刪除中受益，從而導致文件大小稍大。
• 在編譯時將不可用。
• 如果使用服務器端渲染會更棘手（盡管並非不可能）

Answer 2

要在 React.js 應用程序中擁有多個環境，您可以使用 NPM 中的這個插件env-cmd

然后根據您的需要創建三個文件。 例如，如果您想設置 dev、stag 和 prod 環境，您可以像這樣編寫命令。

"start:dev": "env-cmd -f dev.env npm start", // dev env
"build:beta": "env-cmd -f stag.env npm run build", // beta env
"build": "react-scripts build", // prod env using .env file