Azure (Windows) Web 应用程序上的 React 应用程序未读取 Auth0 的环境变量

Question

我正在将 React 应用程序部署到 Azure Web 应用程序。项目结构如下：根

│
├── server.js
├── package.json
├── package-lock.json
│
└── client
    ├── build
    ├── public
    ├── package.json
    ├── package-lock.json
    └── src
        └── index.js

在 React 应用程序 src 目录中的 index.js 文件中，我尝试配置 Auth0 进行身份验证。这是相关的代码片段：


import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { Auth0Provider } from '@auth0/auth0-react';

const domain = process.env.REACT_APP_AUTH0_DOMAIN;
const clientId = process.env.REACT_APP_AUTH0_CLIENT_ID;

if (!domain || !clientId) {
  console.error('Missing Auth0 configuration');
}

ReactDOM.render(
  <React.StrictMode>
    <Auth0Provider
      domain={domain}
      clientId={clientId}
      authorizationParams={{
        redirect_uri: window.location.origin, // Automatically use the current origin
      }}
    >
      <App />
    </Auth0Provider>
  </React.StrictMode>,
  document.getElementById('root')
);

我已在 Azure Web App 设置中设置了环境变量 REACT_APP_AUTH0_DOMAIN 和 REACT_APP_AUTH0_CLIENT_ID，但我的 React 应用程序无法在运行时读取这些变量。控制台中记录了 Missing Auth0 configuration 错误，表明未找到环境变量。

环境变量配置：验证环境变量是否在应用服务的“配置”部分下的 Azure 门户中正确配置。

构建和部署：通过运行 npm run build 然后部署构建文件夹的内容，确保正确构建和部署 React 应用程序。

我希望在正确设置环境变量后，我的 React 应用程序应该能够在运行时读取这些变量并正确配置 Auth0。

有趣的是，使用给定的文件结构在本地运行应用程序时也存在同样的问题。但是，在本地，可以通过向客户端文件夹添加额外的 .env 文件来解决此问题。不幸的是，这种方法无法在 Azure 中应用，因为 Azure 门户中配置的环境变量应该在运行时自动可供应用程序使用。

Answer 1

我创建了一个示例 React 应用程序，它将环境变量打印为输出。

感谢@medium.com 的清晰解释。我参考了这个 document 并使用

.env

文件创建了一个 React 应用程序。

.env 文件:

REACT_APP_NAME=Sneha
REACT_APP_JOB_TITLE=Engineer
REACT_APP_BRANCH=CSE

app.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;

我已通过 GitHub 操作将应用程序部署到 Azure 应用服务 (Windows)。

工作流程文件：

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: .

enter image description here