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. The problem is that absolutely none of the.env variables appear to be available on the frontend.

To be specific, I have an API key named REACT_APP_MAP_API_KEY that I'm injecting using Pipelines on Azure Devops. I've confirmed that the key is loaded in from the variable group properly by logging it. This is my deployment pipeline YAML file:

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)

The key is echo'd when the pipeline runs. However, when I try to console.log the variable on the frontend using console.log(process.env.REACT_APP_MAP_API_KEY) I simply get undefined .

To the best of my knowledge, this is exactly how you're supposed to load an.env variable into a static app frontend on Azure, but it just appears to be flat out not working. Is this a bug on Azure's side?

Answer 1

Credit goes out to @jonrsharpe for finding this thread which links to this workaround which I confirmed does indeed work. For the record, it's pretty sad that Microsoft hasn't fixed this issue considering it affects one of their most popular cloud features (Azure Static Apps) for the most popular frontend framework (React).

The workaround does its thing apparently by splitting the deployment into two steps 1) doing the actual build manually ( Bash@3 ), where the environment variables seem to work, then 2) running the preconfigured deploy task ( AzureStaticWebApp@0 ) whose "build" step doesn't do anything at all and then takes the existing /build folder and deploys it. If this were working correctly, any env variables declared under AzureStaticWebApp@0 would be properly included in build process.