Azure WebApps React：环境变量存在，但当我调用 process.env 时不存在

Question

先决条件

\n

这是我第一次使用 React/Node.JS/Azure App Service。我通常使用flask/jinja2/gunicorn来部署应用程序。

\n

用例

\n

我想使用存储在Azure 上的应用服务配置中的环境变量

\n

不幸的是，环境变量显示了 3 个环境变量（NODE_END、PUBLIC_URL 和 FAST_REFRESH），而不是几十个。

\n

Azure App Service appsettings的部分内容

\n

[\n{\n    "name": "REACT_APP_APIKEY",\n    "value": "some key",\n    "slotSetting": false\n  },\n  {\n    "name": "REACT_APP_APPID",\n    "value": "an app id",\n    "slotSetting": false\n  },\n  {\n    "name": "REACT_APP_AUTHDOMAIN",\n    "value": "an auth domain",\n    "slotSetting": false\n  },\n{\n    "name": "APPINSIGHTS_INSTRUMENTATIONKEY",\n    "value": "something",\n    "slotSetting": false\n  },\n  {\n    "name": "APPLICATIONINSIGHTS_CONNECTION_STRING",\n    "value": "something else",\n    "slotSetting": false\n  },\n  {\n    "name": "ApplicationInsightsAgent_EXTENSION_VERSION",\n    "value": "some alphanumeric value",\n    "slotSetting": false\n  },\n  {\n    "name": "KUDU_EXTENSION_VERSION",\n    "value": "78.11002.3584",\n    "slotSetting": false\n  }\n]\n

\n

\n

CI/CD 流程

\n

\n
1. 我正在使用 Azure DevOps 在 Azure 上构建和部署应用程序。
\n
2. 该进程在生成包含构建的 zip 文件之前运行（请参阅npm install目录树列表npm run build here below)
\n

\n

如何运行应用程序？

\n

启动命令包含npx serve -l 8080 .

\n

\n

问题

\n

我显示环境变量

\n

console.log(\'process.env\', process.env);\n

\n

的内容process.env is

\n

{\n  "NODE_ENV": "production",\n  "PUBLIC_URL": "",\n  "FAST_REFRESH": true\n}\n

\n

有线部分

\n

我在 Azure 上使用 SSH 并且运行

\n

printenv | grep APPINS结果是

\n

APPSETTING_APPINSIGHTS_INSTRUMENTATIONKEY=something\nAPPINSIGHTS_INSTRUMENTATIONKEY=something\n

\n

printenv | grep APPLICATION结果是

\n

APPSETTING_APPLICATIONINSIGHTS_CONNECTION_STRING=something else\nAPPLICATIONINSIGHTS_CONNECTION_STRING=something else\n

\n

杂项

\n

目录树列表

\n

.\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 asset-manifest.json\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 favicon.ico\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 images\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 app\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 home_page-ott-overthetop-platform.png\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 films\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 children\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 despicable-me\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 large.jpg\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 small.jpg\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 icons\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 add.png\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 misc\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 home-bg.jpg\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 series\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 children\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 arthur\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 large.jpg\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 small.jpg\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 users\n\xe2\x94\x82\xc2\xa0\xc2\xa0     \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 1.png\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 index.html\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 static\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 css\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 2.679831fc.chunk.css\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 2.679831fc.chunk.css.map\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 js\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 2.60c35184.chunk.js\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 2.60c35184.chunk.js.LICENSE.txt\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 2.60c35184.chunk.js.map\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 main.80f5c16d.chunk.js\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 main.80f5c16d.chunk.js.map\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 runtime-main.917a28e7.js\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 runtime-main.917a28e7.js.map\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 media\n\xe2\x94\x82\xc2\xa0\xc2\xa0     \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 logo.623fc416.svg\n\xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 videos\n    \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 bunny.mp4\n\n74 directories, 148 files\n\n

\n

Answer 1

当您在本地运行应用程序时，可以使用.env文件来配置环境变量。格式类似于“ name=value”（不带引号）。这是一个示例：

REACT_APP_APIKEY=REACT_APP_APIKEY
REACT_APP_APPID=REACT_APP_APPID
REACT_APP_AUTHDOMAIN=REACT_APP_AUTHDOMAIN

当我调用console.log('process.env', process.env);index.js 文件时，它运行良好：

在门户上配置应用程序设置后，将 Nodejs Web 应用程序部署到 Azure。

您可以直接在 VS Code 输出窗口中查看应用程序的日志输出（调用 console.log）。只需右键单击应用程序节点，然后在AZURE APP SERVICE资源管理器中选择“启动流日志”即可。

它显示门户应用程序设置上的环境变量：

顺便一提：

1. 如果您是在 Azure Web 应用程序中使用 Node 的新手，您可以查看以下内容：https: //learn.microsoft.com/en-us/azure/app-service/quickstart-nodejs ?pivots=platform-windows
2. 关于如何使用.env文件，请参见：https://holycoders.com/node-js-environment-variable/