静态页面能否读取环境变量？容器Nginx静态页展示Pod环境变量方法咨询

针对你的需求，这里提供两种可行的实现方案：

方案一：启动前注入环境变量到静态页面 #

这种方式在Nginx启动前，通过shell脚本将容器的deployment_env环境变量值直接写入静态页面的JavaScript代码中，前端脚本即可读取并展示。

步骤1：编写启动脚本 #

创建start.sh脚本，负责替换页面中的环境变量占位符并启动Nginx：

#!/bin/sh
# 将环境变量值注入静态页面的window.env对象
sed -i "s/var env = window.env;/var env = { deployment_env: '$deployment_env' };/g" /usr/share/nginx/html/showname/index.html
# 以非守护进程方式启动Nginx
nginx -g 'daemon off;'

步骤2：修改Dockerfile #

将脚本和静态页面复制到容器中，设置脚本为启动入口：

FROM nginx:alpine
# 复制启动脚本
COPY start.sh /usr/local/bin/
# 复制你的静态页面到指定路径
COPY index.html /usr/share/nginx/html/showname/index.html
# 赋予脚本执行权限
RUN chmod +x /usr/local/bin/start.sh
# 设置启动命令
ENTRYPOINT ["start.sh"]

步骤3：调整静态页面代码 #

保留原代码即可，脚本会自动替换var env = window.env;这一行：

<html>
    <head>
        <title>Test NGINX passed</title>
    </head>
    <body>
        <h1>deploy_env</h1>
        <h1><span id="deploy_env" style="display: block;"></span></h1>
        <script>
            var env = window.env;
            var deploy = document.querySelector('#deploy_env');
            deploy.textContent = env.deployment_env;
        </script>
    </body>
</html>

启动容器时，通过-e deployment_env=$(hostname)（K8s中Pod的hostname默认就是Pod名称）传递环境变量即可。

方案二：用Nginx sub_filter模块动态替换内容 #

利用Nginx自带的sub_filter模块，在请求响应时动态替换页面中的占位符为环境变量值，无需依赖前端脚本。

步骤1：编写Nginx配置模板 #

创建default.conf.template文件，配置SSL和路径规则，并添加动态替换逻辑：

server {
    listen 443 ssl;
    server_name example.com;
    # 此处添加你的SSL证书配置，例如：
    # ssl_certificate /etc/nginx/ssl/cert.pem;
    # ssl_certificate_key /etc/nginx/ssl/key.pem;

    location /showname/ {
        root /usr/share/nginx/html;
        index index.html;
        # 替换页面中的占位符为环境变量值
        sub_filter '<span id="deploy_env" style="display: block;"></span>' '<span id="deploy_env" style="display: block;">$deployment_env</span>';
        sub_filter_once on;
    }
}

步骤2：编写启动脚本 #

用envsubst命令将环境变量注入Nginx配置：

#!/bin/sh
# 将配置模板中的$deployment_env替换为实际环境变量值
envsubst '$deployment_env' < /etc/nginx/conf.d/default.conf.template > /etc/nginx/conf.d/default.conf
# 启动Nginx
nginx -g 'daemon off;'

步骤3：调整静态页面 #

去掉原有的JavaScript脚本，保留占位符即可：

<html>
    <head>
        <title>Test NGINX passed</title>
    </head>
    <body>
        <h1>deploy_env</h1>
        <h1><span id="deploy_env" style="display: block;"></span></h1>
    </body>
</html>

步骤4：修改Dockerfile #

复制配置模板、脚本和静态页面到容器：

FROM nginx:alpine
COPY default.conf.template /etc/nginx/conf.d/
COPY start.sh /usr/local/bin/
COPY index.html /usr/share/nginx/html/showname/index.html
RUN chmod +x /usr/local/bin/start.sh
ENTRYPOINT ["start.sh"]

方案对比 #

• 方案一：静态注入，启动时完成替换，性能更高，适合环境变量不会动态变化的场景。
• 方案二：动态替换，每次请求处理时替换，灵活性稍高，但性能差异可忽略，适合需要动态更新变量的场景。

内容的提问来源于stack exchange，提问作者Fluke