如何为在应用服务上使用 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

请注意，无法编辑安全文件，但您可以随时重新上传。