在 Azure 中部署的 React 应用程序中未定义 process.env

Question

I have a Node app with Express for the Back-end and React for the Front-end.

Locally, I have a.env file where the env variables are located. For Azure App Service, I just save the variables as a configuration so Express can get the env variables. However, React can't see the variables and it's undefined since there is no.env file in Azure DevOps.

I tried the following already:

• Set as REACT_APP_VARIABLE the saved variables for React in the App Service config
• In the Azure Build Pipeline, I've set a build variable and set $env:VARIABLE using PowerShell Task
• Updated webpack to use dotenv-webpack plugin

All the approach didn't work. How do I do this?

Answer 1

As a workaround, we could create .env file and configure the file content via power shell script.

Steps: set the variable under pipeline Variables page->add task power shell and enter the below script to create .env file and set the content.

 New-Item -Path $(System.DefaultWorkingDirectory) -Name "env.json" -Force -Value @'
 {
  "REACT_APP_SOMW_KEY": "$(REACT_APP_SOMW_KEY)",
 }
 '@
 Get-Content -Path $(System.DefaultWorkingDirectory)\env.json

We could also check this thread .