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

Question

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

我也无法在网上找到任何解决方案或任何解释这是否可能的文章/线程/帖子，我总是找到 vite在构建时静态替换环境变量的文本。

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

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

Answer 1

可以not动态注入Vite环境变量。但可能的是更改window object变量（在运行时分配它们）。
警告！！！不要通过窗口对象暴露任何敏感变量。您的前端应用程序源对任何使用它的人都是可见的

脚步：

1. 创建您想要的 env 文件并将它们放入<rootDir>/public. 我们称它们为env.js和env-prod.js。

2. 在你的内部env.js，env-prod.js你想使用var关键字分配你想要的变量。此外，您必须在源中引用这些值window.MY_VAR才能使用它们。

3. 在你的内部创建一个脚本标签，<rootDir>/index.html如下所示：
   <script type="text/javascript" src="./env.js"></script>。
   重要的！！！ type="text/javascript"很重要，因为如果您指定模块，Vite则会将env.js源代码包含在缩小index.js文件中。

4. Vite配置（可选）：

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

5. How to serve the env files on runtime。创建一个node将为您的前端应用程序提供服务的服务器。但在提供文件之前，您现在可以选择要提供的 env.js，env.js具体取决于我们的情况。process.env.ENVIRONMENT假设我的节点服务器文件存储在<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);

6. node ./server/sever.js在终端中运行命令时为您的应用程序构建提供服务。

7. 最后：
   my env.jscontains var RUNTIME_VAR = 'test'
   my env-prod.jscontainsvar RUNTIME_VAR = 'prod'
   在我将 my 设置为process.env.ENVIRONMENT后prod。我得到这个文件：

Answer 2

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