Приложение React в веб-приложении Azure (Windows) не читает переменные среды для Auth0

Я создал пример приложения реагирования, которое печатает переменные среды в качестве вывода.

Спасибо @medium.com за четкое объяснение. Я сослался на этот документ и создал приложение React, используя файл .env.

.env-файл:

REACT_APP_NAME=Sneha
REACT_APP_JOB_TITLE=Engineer
REACT_APP_BRANCH=CSE

приложение.js:

import  React  from  'react';
function  App() {
const  name  =  process.env.REACT_APP_NAME;
const  jobTitle  =  process.env.REACT_APP_JOB_TITLE;
const  branch  =  process.env.REACT_APP_BRANCH;
return (
<div>
<h1>Display Environment Variables</h1>
<p>Name: {name}</p>
<p>Job Title: {jobTitle}</p>
<p> Branch: {branch}</p>
</div>
);
}
export  default  App;

Я развернул приложение в Службе приложений Azure (Windows) с помощью действий GitHub.

файл рабочего процесса:

name: Build and deploy Node.js app to Azure Web App - Reactenv18
on:
  push:
    branches:
      - main
  workflow_dispatch:
jobs:
  build:
    runs-on: ubuntu-latest  

    steps:
      - uses: actions/checkout@v4

      - name: Set up Node.js version
        uses: actions/setup-node@v3
        with:
          node-version: '20.x'

      - name: Install dependencies
        run: npm install

      - name: Build the React app
        run: npm run build --if-present

      - name: Upload artifact for deployment job
        uses: actions/upload-artifact@v4
        with:
          name: node-app
          path: .
          retention-days: 1
          max-concurrency: 10  

  deploy:
    runs-on: ubuntu-latest
    needs: build
    environment:
      name: 'Production'
      url: ${{ steps.deploy-to-webapp.outputs.webapp-url }}
    permissions:
      id-token: write  

    steps:
      - name: Download artifact from build job
        uses: actions/download-artifact@v4
        with:
          name: node-app

      - name: Login to Azure
        uses: azure/login@v2
        with:
          client-id: ${{ secrets.AZUREAPPSERVICE_CLIENTID_<client-id> }}
          tenant-id: ${{ secrets.AZUREAPPSERVICE_TENANTID_<tenant-id> }}
          subscription-id: ${{ secrets.AZUREAPPSERVICE_SUBSCRIPTIONID_<subscription-id> }}

      - name: 'Deploy to Azure Web App'
        uses: azure/webapps-deploy@v3
        id: deploy-to-webapp
        with:
          app-name: 'Reactenv18'
          slot-name: 'Production'
          package: .

• После развертывания приложения в Службе приложений Azure добавьте переменные среды в раздел конфигурации App.

• В разделе «Конфигурация» Службы приложений Azure перейдите в раздел «Сопоставления путей» и убедитесь, что физический путь правильно настроен и соответствует каталогам развертывания вашего приложения.

site\wwwroot\build

Таким образом, приложение реагирует на использование и загрузку переменных среды как при разработке, так и при производстве.

Вывод после развертывания: