javascript - 在 Azure 上作为静态应用程序托管的 Create-react-app 未检测到环境变量

Question

如标题所示，我有一个静态 create-react-app，我正在使用 Azure DevOps 将其部署到 Azure 静态应用程序。问题是前端绝对没有任何 .env 变量可用。

具体来说，我有一个名为 REACT_APP_MAP_API_KEY 的 API key ，我正在使用 Azure Devops 上的 Pipelines 注入(inject)该 key 。我已经通过记录来确认 key 已从变量组中正确加载。这是我的部署管道 YAML 文件:

trigger:
- main

pool:
  vmImage: ubuntu-latest

variables:
- group: api-key-group

steps:
  - task: CmdLine@2
    inputs:
      script: 'echo $(REACT_APP_MAP_API_KEY)'
  - checkout: self
    submodules: true
  - task: AzureStaticWebApp@0
    inputs:
      app_location: '/'
      api_location: 'api'
      output_location: ''
    env:
      azure_static_web_apps_api_token: $(deployment_token)
      REACT_APP_MAP_API_KEY: $(REACT_APP_MAP_API_KEY)

管道运行时会回显该 key 。但是，当我尝试使用 console.log(process.env.REACT_APP_MAP_API_KEY) 在前端 console.log 变量时，我只是得到 undefined。

据我所知，这正是将 .env 变量加载到 Azure 上的静态应用程序前端的方式，但它似乎根本不起作用。这是 Azure 方面的错误吗？

Answer 1

感谢 @jonrsharpe 找到 this thread链接到 this workaround我确认确实有效。郑重声明，令人遗憾的是，微软尚未解决此问题，因为它影响了最流行的前端框架 (React) 的最流行的云功能之一 (Azure 静态应用程序)。

解决方法显然是通过将部署分为两个步骤来完成它的工作:1)手动执行实际构建(Bash@3)，其中环境变量似乎起作用，然后 2)运行预配置的部署任务 (AzureStaticWebApp@0)，其“构建”步骤根本不执行任何操作，然后获取现有 /build 文件夹并进行部署。如果工作正常，在 AzureStaticWebApp@0 下声明的任何环境变量都将正确包含在构建过​​程中。