使用 docker 和 nginx 在运行时（React、vite）更改环境变量

Question

在工作中，我需要能够在运行时从 Azure Web 服务通过 docker 和 nginx 更改环境变量。我尝试了 this, this 和一些类似的解决方案，但我无法使它们中的任何一个起作用。

我也找不到任何在线解决方案或任何 article/thread/post 解释如果这可能的话，我总是只能找到 vite statically 在构建时替换 env 变量的文本。

在我们的 CI/CD 管道期间，vite 获取环境变量，但我们的 Azure 管理员希望能够从 Azure 中配置它们，只是为了它。

有谁知道这是否可行，或者有解决方案或帮助吗？ :)

Answer 1

您可以设置 YAML 格式的变量并根据您的要求相应地更新它们。

下面是我们用作模板的示例 YAML 格式：

#Set variables once
variables:
  configuration: debug
  platform: x64

steps:

#Use them once
- task: MSBuild@1
  inputs:
    solution: solution1.sln
    configuration: $(configuration) # Use the variable
    platform: $(platform)

#Use them again
- task: MSBuild@1
  inputs:
    solution: solution2.sln
    configuration: $(configuration) # Use the variable
    platform: $(platform)

检查此以获得更多见解，以了解托管在 Azure Web 应用程序中的环境变量

Answer 2

not 可以动态注入 Vite env 变量。但是可能是更改window object变量（在运行时分配）。
警告！！！不要通过 WINDOW 对象公开任何敏感变量。您的 FRONT-END 应用程序源对任何使用它的人都是可见的

步骤：

创建您想要的 env 文件并将它们放在 <rootDir>/public 中。我们称它们为 env.js 和 env-prod.js.
在您的 env.js 和 env-prod.js 中，您想使用 var 关键字分配所需的变量。此外，您必须在源代码中引用这些值，例如 window.MY_VAR 才能使用它们。
在您的 <rootDir>/index.html 中创建一个脚本标签，如下所示：
<script type="text/javascript" src="./env.js"></script>.
重要！！！ type="text/javascript" 很重要，因为如果您指定模块，Vite 将在您的压缩 index.js 中包含您的 env.js 源代码文件。
Vite 配置（可选）：

  plugins: [react(), tsConfigPath()],
  build: {
    emptyOutDir: true, // deletes the dist folder before building
  },
});

How to serve the env files on runtime。创建一个 node 服务器来为您的前端应用程序提供服务。但在提供 env.js 文件之前，根据我们的 process.env.ENVIRONMENT，您现在可以选择要提供的 env.js。假设我的节点服务器文件存储在 <rootDir>/server/server.js:

const express = require("express");
const path = require("path");

const app = express();

const env = process.env.ENVIRONMENT || "";

console.log("ENVIRONMENT:", env);

const envFile = path.resolve("public", env ? `env-${env}.js` : "env.js");

const indexFile = path.resolve("dist", "index.html");

app.use((req, res, next) => {
  const url = req.originalUrl;
  if (url.includes("env.js")) {
    console.log("sending", envFile);
    // instead of env.js we send our desired env file
    res.sendFile(envFile);
    return;
  }
  next();
});

app.use(express.static(path.resolve("dist")));
app.get("*", (req, res) => {
  res.sendFile(indexFile);
});

app.listen(8000);

在终端中使用运行 node ./server/sever.js 命令构建应用程序。
最后：
我的 env.js 包含 var RUNTIME_VAR = 'test'
我的 env-prod.js 包含 var RUNTIME_VAR = 'prod'
在我将 process.env.ENVIRONMENT 设置为 prod 之后。我得到这个文件：

Answer 3

我的解决方案是它应该与我的问题中的链接一起使用。我 use this 方法并且它有效，唯一需要考虑的是使用不同的变量 name/prefix （例如“APP_...”）所以 vite 不会在构建时更改它们. 我创建了一个解析变量的配置文件，例如，如果应用程序正在生产中，它会使用新变量“APP_..”（从 nginx/docker 注入）或使用“VITE_...” -如果“APP_..”未定义则为变量。

Answer 4

我想出了一个解决方案并将其作为包发布到 npm 注册表。

使用此解决方案，您无需更改任何代码：

// src/index.js
console.log(`API base URL is: ${import.meta.env.API_BASE_URL}.`);

它将构建步骤分成两个构建步骤：

在生产过程中，它将被静态替换为 import.meta.env 占位符：

// dist/index.js
console.log(
  `API base URL is: ${"__import_meta_env_placeholder__".API_BASE_URL}.`
);

然后您可以运行包的 CLI 在任何地方用您的环境变量替换占位符：

// dist/index.js
console.log(
  `API base URL is: ${{ API_BASE_URL: "https://httpbin.org" }.API_BASE_URL}.`
);
// > API base URL is: https://httpbin.org.

这是文档站点：https://iendeavor.github.io/import-meta-env/。

随时提供任何反馈。

使用 docker 和 nginx 在运行时（React、vite）更改环境变量

Change Environmet Variables at runtime (React, vite) with docker and nginx

web-applications

environment-variables

azure

azure-web-app-service

vite