html中获取容器部署的环境变量

在云端环境下，标准产品的租户定制，可以通过登录人获取租户信息，再获取租户配置，进行项目的功能或ui调整。

如果是非云端的组件型产品------既无用户也无租户，却又有不同属地特殊要求，如何知道该项目部署于哪个属地就成为一个比较头疼的问题。

一个比较轻量级的方案是，容器部署时，传入属地信息。比如web项目，在项目中维护一个nginx配置文件模板，编写docker-entrypoint.sh文件用于容器启动:

sh 复制代码

envsubst '$TENANT' < /etc/nginx/conf.d/default.conf.template > /etc/nginx/conf.d/default.conf


# 启动 nginx
exec nginx -g "daemon off;"

在启动时，通过环境变量将属地信息注入nginx配置文件中：

bash 复制代码

server {
    ...
    location / {
      ...
      sub_filter "{tenant}" "${TENANT}";
    }
}

envsubst

envsubst 是 GNU gettext 工具集中的一个命令，功能是扫描文本中的环境变量占位符（如 ${VAR_NAME}），并替换为当前系统中对应环境变量的实际值。

例如，若存在文本 Hello ${NAME}!，且环境变量 NAME="Docker"，执行 envsubst 后会输出 Hello Docker!。

sub_filter

sub_filter 的语法是 sub_filter "搜索字符串" "替换字符串"，其中 "替换字符串" 可以是：

markdown 复制代码

-   固定文本（如 `"123"`、`"固定内容"`）
-   Nginx 内置变量（如 `$remote_addr`、`$time_local`）
-   变量与文本的组合（如 `"时间：$time_local-123"`）

这种替换对所有匹配 sub_filter_types 配置的响应类型生效（默认仅 text/html）

在html中接收环境变量

html中可以通过{tenant}模板字符接收nginx替换后的变量，再将其存入localStorage中

xml 复制代码

<!doctype html>
<html lang="en">
 <head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

   <title>demo</title>
   <script>
     window.localStorage.setItem('tenant', '{tenant}');
   </script>
 </head>
 <body>
  
 </body>
</html>

这种方式在一定程度上能够防止变量篡改------每次访问该html，都会被nginx重新注入变量