Create-react-app 托管为 Static Azure 上的应用程序未检测到环境变量

Question

Like the title says, I have a static create-react-app that I'm deploying to Azure Static Apps with Azure DevOps. 问题是在前端似乎绝对没有任何 .env 变量可用。

具体来说，我有一个名为REACT_APP_MAP_API_KEY的 API 密钥，我正在使用 Azure Devops 上的管道注入该密钥。 我已通过记录确认密钥已从变量组正确加载。 这是我的部署管道 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)

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

据我所知，这正是您应该将 an.env 变量加载到 Azure 上的 static 应用程序前端的方式，但它似乎完全无法正常工作。 这是 Azure 方面的错误吗？

Answer 1

感谢@jonrsharpe 找到这个链接到我确认确实有效的解决方法的线程。 郑重声明，很遗憾微软没有解决这个问题，因为它影响了他们最流行的前端框架 (React) 的最流行的云功能之一（Azure Static 应用程序）。

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