azure - 使用 docker 和 nginx 在运行时更改环境变量(React、vite)

Question

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

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

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

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

Answer 1

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

步骤:

1. 创建所需的环境文件并将其放置在 <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
  },
});

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 。我得到这个文件: