如何為在應用服務上使用 azure devops 管道部署的 React 應用設置 env

Question

我在 azure Devops 上開發了一個帶有 CI/CD 的管道，用於在 Azure web 應用程序服務上部署 React 應用程序。 我在本地使用的是一個 .env 文件，這個文件是 on.gitignore。 我想知道如何設置 the.env 以便在生產環境中閱讀它。

Answer 1

您可以查看以下文檔：

https://create-react-app.dev/docs/adding-custom-environment-variables/#adding-development-environment-variables-in-env

.env文件應該被檢入源代碼管理（不包括.env*.local ）。

如果您不想將.env文件簽入 DevOps，您可以在管道變量中添加變量：

另外，更多建議可以參考以下案例：

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

Answer 2

許多與此問題相關的建議解決方案可能不起作用，但我通過以下方式解決了它。 但是，首先讓我解釋一下為什么其他解決方案可能不會（不應該）起作用（如果我錯了請糾正我）

• 添加管道變量（即使它們是環境變量）應該不起作用，因為反應應用程序在客戶端運行並且沒有服務器端代碼可以將環境變量注入反應應用程序。
• 出於同樣的原因，在經典管道上安裝環境變量任務不應該起作用。
• 出於同樣的原因，添加到 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

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