如何在 Azure 托管的 React 應用程序中使用環境變量

Question

我對 React 很陌生，一般也探索 Azure。 我有 ERP 背景，但該背景確實包括使用 VSTS 和 CI/CD 等工具。 我非常依賴使用 VSTS 中的“庫”來指定每個環境的變量，然后在部署時指定這些變量。

但是，我一直在 inte.net 上四處閱讀，玩弄設置，但據我所知。 我只能在 NPM 生成的實際代碼中“嵌入”參數，這基本上意味着我需要為每個環境創建一個單獨的構建。 我不習慣，我一直認為（並告訴其他人）您交付生產的產品應該與預生產或分期生產的產品完全相同。 或者... ？ 難道真的沒有別的方法可以使用環境變量嗎，我在考慮使用Azure App Service中的Application Settings。 但我什至不能讓它們在控制台中彈出，VSTS 中的庫，也沒有找到如何在我的部署中使用它們。 因為只有一步。

在https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-custom-environment-variables閱讀文檔並沒有讓我覺得舒適地將 .env 文件放在源代碼管理中。 我什至嘗試過將{process.env.NODE_ENV}放入我的代碼中的方法，但在 Azure 中它只顯示為“開發”，而我什至執行 npm 運行構建（應該是生產）...

所以，我在這里有點迷路，如何使用 Azure 應用服務中指定的環境變量？ 在我的 React 應用程序中？

謝謝！

Answer 1

好的選擇

我也遇到了這個問題，您可以通過為您的 env 使用不同的構建腳本來自定義使用哪些 env 變量。 找到這個 CRA 文檔https://create-react-app.dev/docs/deployment/#customizing-environment-variables-for-arbitrary-build-environments

您還可以在 YAML 中設置變量。 https://docs.microsoft.com/en-us/azure/devops/pipelines/process/variables?view=azure-devops&tabs=yaml%2Cbatch#set-variables-in-pipeline

但是如果我需要單個構建怎么辦？

如果您為不同的環境（開發、暫存、生產）使用單個構建和發布階段，我還沒有解決這個問題。 由於一切都已構建，React 具有您在構建時提供的任何環境變量。 我考慮過的替代方案：

1. 將 react 構建與 .NET 構建分開，以便您可以像每次部署一樣執行此操作
2. 定義所有環境變量並附加例如 REACT_APP_SOME_KEY_ 然后基於子域選擇特定的環境，例如https://dev.yoursite.com https://yoursite.com ，但此選項似乎不規范。
3. 可能是 React 需要為每個環境構建的限制。 接受您需要單獨的構建。

Answer 2

當你使用 VSTS 部署到 Azure 時，你可以在構建管道中提供你的環境變量，它會自動將它包含在 ReactJS 項目中。

Answer 3

現在是 2019 年底，我仍然面臨 nodeJs 和 azure devops 中 env 變量的問題。

我沒有找到解決方案，但我使用了一種解決方法。 我使用偽“env var”。

我在項目的根目錄中創建了與"env.json"文件具有相同結構的".env"文件。 將此文件放入".gitignore"文件中。 將此文件明確導入到我需要使用 env var 的文件中。 將其用作常規對象，而不是 process.env.***

例子：

我們有“.env”，我們需要替換它：

REACT_APP_SOMW_KEY=KEY

項目本身的下一步是：

創建"env.json" ：

{"REACT_APP_SOMW_KEY":"KEY"}

將其添加到".gitignore" 。

如果使用打字稿，請將下一個設置添加到tsconfig.json ：

 "resolveJsonModule": true,

在文件，其中process.env.REACT_APP_SOMW_KEY位於變化process.env.REACT_APP_SOMW_KEY到config.REACT_APP_SOMW_KEY並添加const config = require("../pathTo/env.json")作為一個begginning導入模塊。

在打字稿的情況下，您還可以創建界面以實現自動完成：

export interface IEnvConfig{
  REACT_APP_SOMW_KEY?: string;
}   
const config: IEnvConfig = require("../pathTo/env.json");

結果將是這樣的：

const reactSomeKey = /*process.env.REACT_APP_SOMW_KEY*/ config.REACT_APP_SOMW_KEY;

Azure DevOps后續步驟：

將您的密鑰添加到 azure "key vault"或"variables" 。

在構建項目的步驟之前的 CI 管道中，您可以設置PowerShell任務，這將創建"env.json"文件。 與我們應該在本地創建“.env”文件相同，因為我們使用隱藏的".env"文件制作了 git clone。 我把 yml 任務放在這里（最后你可以看到 2 個調試命令，只是為了確保該文件已創建並存在於項目中）：

- powershell: |
   New-Item -Path $(System.DefaultWorkingDirectory) -Name "env.json" -Force -Value @'
   {
   "REACT_APP_SOMW_KEY": "$(REACT_APP_SOMW_KEY)",
   }
   '@
   Get-Content -Path $(System.DefaultWorkingDirectory)\env.json
   Get-ChildItem -Path $(System.DefaultWorkingDirectory)
  displayName: 'Create "env.json" file'

結果：您使用 json 對象鍵的流程與您通常使用的".env"幾乎相同。 您也可以在項目中同時使用".env"和"env.json" 。

Answer 4

直接添加venerable來構建管道變量。 這將添加到 Azure 環境變量，應用程序可以使用它

Answer 5

所有提議的解決方案都太復雜了，因為其他人已經在打包和構建過程中解決了這個問題。

要將其部署到 azure，必須完成兩件事。 首先刪除排除 .env* 文件的 .ignore 規則。 注意：假設你沒有把秘密放在這里！ 無論如何，.env 文件中的大部分配置在身份驗證流程中都是在線可見的。 那么，為什么要對 git 中的這個文件感到恐慌呢？ 特別是在私人 Git 中，我看不到那些 .env 文件有任何問題。

所以，我有 .env.dev 和 .env.prod ... 這包含例如

REACT_APP_AUTH_URL=https://auth.myid4.info
REACT_APP_ISSUER=https://auth.myid4.info
REACT_APP_IDENTITY_CLIENT_ID=myclientid
REACT_APP_REDIRECT_URL=https://myapp.info/signin-oidc
REACT_APP_AUDIENCE=
REACT_APP_SCOPE=openid profile email roles mysuperapi
REACT_APP_SILENT_REDIRECT_URL=https://myapp.info/silent-renew
REACT_APP_LOGOFF_REDIRECT_URL=https://myapp.info/logout
API_URL=/

必須做到以下幾點。 npm i --save-dev env-cmd

現在，像這樣在 package.json 中修改。 您可能還有其他一些，但本質上，只為您的環境添加正確的 .env

env-cmd -f .env.prod

所以在我的情況下在 package.json

"start": "env-cmd -f .env.dev rimraf ./build && react-scripts start",
"build": "env-cmd -f .env.prod react-scripts build"

現在，我將我的 React JS 部署到 azure。 我使用，僅供參考，.NET Core Spa 功能。

Answer 6

這並不完全是您要尋找的，但也許這是您問題的替代解決方案（它在構建步驟中將 process-env.x 替換為實際值）：

https://github.com/babel/minify/tree/master/packages/babel-plugin-transform-inline-environment-variables

Answer 7

此路線僅適用於使用 Azure DevOps 的情況。

• Azure DevOps 在管道中有稱為庫的部分。
• 創建一個新的變量組並添加您的環境變量。
• 將最后創建的變量組關聯到您的構建過程。

還要記住以REACT_APP_開頭命名您的環境變量

Answer 8

我使用了 YAML 構建並將變量寫入 .env 文件。 我用來在 reactjs 中進行轉換的包是dotenv版本 8.2.0

所以這是我的 YAML 構建文件，添加了完成此任務的任務

variables:
- group: myvariablegroup

trigger:
  batch: true
  branches:
    include:
      - develop
      - release/*

pool:
  vmImage: 'ubuntu-latest'

stages:
- stage: dev 
  condition: eq(variables['build.sourceBranch'], 'refs/heads/develop')
  jobs:
  - job: DevelopmentDelpoyment
    steps:

    - task: CmdLine@2
      inputs:
        script: 'echo APP_WEB_API = $(myvariable-dev) > Web/.env' 
      displayName: 'Setting environment variables'


    - script: |
        cd Web
        npm install
        npm run build
      displayName: 'npm install and build'


- stage: prod 
  condition: eq(variables['build.sourceBranch'], 'refs/heads/master')
  jobs:
  - job: ProductionDelpoyment
    steps:

    - task: CmdLine@2
      inputs:
        script: 'echo APP_WEB_API = $(myvariable-prod) > Web/.env' 
      displayName: 'Setting environment variables'

    - script: |
        cd Web
        npm install
        npm run build
      displayName: 'npm install and build'

Answer 9

有同樣的問題，我的環境變量沒有在 azure 構建和部署上加載，經過數小時的谷歌搜索並將我的頭撞到牆上后，我突然想到等號之前和之后的空白（“=”）不應該在那里。

所以我改變了：

REACT_APP_API_URL = https://some_url

為了：

REACT_APP_API_URL=https://some_url

它工作正常！

Answer 10

正如其他人所說，在您的 Azure 管道中，將變量添加到管道中。 然而，對其他人發布的內容進行了一些更正，可能利用了自他們的回復編寫以來的更新功能：

1. 如果您的.env 文件中的變量名為 REACT_APP_MY_VARIABLE，那么您需要添加到 Azure 管道的變量也應命名為 REACT_APP_MY_VARIABLE（不是 process.env.REACT_APP_MY_VARIABLE）

2. 在設置 Azure 管道變量時，您可以將該值留空並選中“讓用戶在運行此管道時覆蓋此值”復選框。 這似乎是讓 react 仍然處理 .env 文件內容以檢索所需值的技巧。

Answer 11

這里提出的許多解決方案都不起作用（也不應該起作用），但我通過以下方式解決了它。 但是，首先讓我解釋一下為什么其他解決方案可能不會（不應該）起作用（如果我錯了請糾正我）

• 添加管道變量（即使它們是環境變量）應該不起作用，因為反應應用程序在客戶端運行並且沒有服務器端代碼可以將環境變量注入反應應用程序。
• 出於同樣的原因，在經典管道上安裝環境變量任務不應該起作用。
• 出於同樣的原因，添加到 azure 應用程序服務中的應用程序設置應該不起作用。
• 在 git 存儲庫中擁有 .env 或 .env.development 或 .env.production 文件不應該是一個好的做法，因為它可能會危及 api 密鑰和其他敏感信息。

所以這是我的解決方案 -

第一步：將所有這些.env 文件作為安全文件添加到 azure devops 庫中。 您可以使用DownloadSecureFile@1管道任務 (yml) 在構建機器中下載這些安全文件。 通過這種方式，我們確保在管道中的任務yarn build --mode development之前在構建機器中提供了正確的 env 文件。

第 2 步：在您的 azure yml 管道中適當的位置添加以下任務。 如果您想查看完整示例，我已經創建了一個 github 存儲庫https://github.com/mail4hafij/react-yarn-azure-pipeline 。

  # Download secure file from azure library
  - task: DownloadSecureFile@1
    inputs:
      secureFile: '.env.development'

  # Copy the .env file
  - task: CopyFiles@2
    inputs:
      sourceFolder: '$(Agent.TempDirectory)'
      contents: '**/*.env.development'
      targetFolder: '$(YOUR_DEFINED_PROJECT_ROOT_FOLDER_VARIABLE)'
      cleanTargetFolder: false

請注意，無法編輯安全文件，但您可以隨時重新上傳。

Answer 12

作為更新，它與我原來的方法有點不同，但我已經完成了使用 DotEnv 的路線，因此使用了 .env 文件，我將在 VSTS 中使用庫變量動態生成這些文件，因此不存儲他們在源代碼管理中。

為了使用 DotEnv，我更新了 webpack.config； const Dotenv = require('dotenv-webpack');

module.exports = {
    ...
    plugins: [
        new Dotenv()
    ],

然后基本上，我創建了一個包含我的參數的 .env 文件

MD_API_URL= http://localhost:7623/api/

為了能夠在我的 TSX 文件中使用它們，我只使用 process.env；

static getCustomer(id) {
    return fetch(process.env.MD_API_URL + 'customers/' + id, { mode: 'cors' })
        .then(response => {
        return response.json();
    }).catch(error => {
        return error;
    });
}