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重新注入变量

相关推荐
用户298698530146 小时前
如何在 C# 中将 Word 转换为 PostScript?
后端
工会代表6 小时前
nginx配置,将前端项目配置到子路径下踩过的坑。
前端·nginx
AAA修煤气灶刘哥6 小时前
MQ 可靠性血泪史:从丢消息到稳如老狗,后端 er 必看避坑指南
后端·spring cloud·rabbitmq
Java微观世界6 小时前
final的隐藏技能:从代码规范到线程安全,你用对了吗?
后端
一匹电信狗6 小时前
【Linux我做主】细说进程等待
linux·运维·服务器·c++·ubuntu·小程序·开源
耶耶耶1116 小时前
一文搞懂谷歌插件v3版本content_scripts、background、action(popup)、devtools_page直接的关系
前端
该用户已不存在6 小时前
Node.js 做 Web 后端优势为什么这么大?
javascript·后端·node.js
闲不住的李先森6 小时前
前端渲染模式演进与选型指南:从 CSR 到 Islands
前端·架构