先决条件

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

用例

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

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

Azure 应用服务appsettings的部分内容

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

CI/CD 流程

1. 我正在使用 Azure DevOps 在 Azure 上构建和部署应用程序。
2. 该工艺运行npm install和npm run build生成包含生成的压缩文件之前（见目录树列表这里下文）

如何运行应用程序？

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

问题

我显示环境变量

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

的内容process.env是

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

有线部分

我在 Azure 上使用 SSH 并运行

printenv | grep APPINS 结果是

APPSETTING_APPINSIGHTS_INSTRUMENTATIONKEY=something
APPINSIGHTS_INSTRUMENTATIONKEY=something

printenv | grep APPLICATION 结果是

APPSETTING_APPLICATIONINSIGHTS_CONNECTION_STRING=something else
APPLICATIONINSIGHTS_CONNECTION_STRING=something else

杂项

目录树列表

.
├── asset-manifest.json
├── favicon.ico
├── images
│   ├── app
│   │   └── home_page-ott-overthetop-platform.png
│   ├── films
│   │   ├── children
│   │   │   ├── despicable-me
│   │   │   │   ├── large.jpg
│   │   │   │   └── small.jpg
│   ├── icons
│   │   ├── add.png
│   ├── misc
│   │   ├── home-bg.jpg
│   ├── series
│   │   ├── children
│   │   │   ├── arthur
│   │   │   │   ├── large.jpg
│   │   │   │   └── small.jpg
│   └── users
│       ├── 1.png
├── index.html
├── static
│   ├── css
│   │   ├── 2.679831fc.chunk.css
│   │   └── 2.679831fc.chunk.css.map
│   ├── js
│   │   ├── 2.60c35184.chunk.js
│   │   ├── 2.60c35184.chunk.js.LICENSE.txt
│   │   ├── 2.60c35184.chunk.js.map
│   │   ├── main.80f5c16d.chunk.js
│   │   ├── main.80f5c16d.chunk.js.map
│   │   ├── runtime-main.917a28e7.js
│   │   └── runtime-main.917a28e7.js.map
│   └── media
│       └── logo.623fc416.svg
└── videos
    └── bunny.mp4

74 directories, 148 files