bde2020/nginx-proxy-with-css

nginx-proxy-with-css 镜像文档

镜像概述和主要用途

nginx-proxy-with-css是一个运行Nginx和docker-gen的Docker容器。docker-gen能够为Nginx生成反向代理配置，并在容器启动或停止时自动重新加载Nginx。此外，该镜像还支持为代理的HTML页面自动插入指定的BDE CSS样式，用于统一美化各类服务的Web界面。

核心功能和特性

• 自动反向代理配置：通过docker-gen监听Docker事件，自动生成和更新Nginx反向代理配置
• CSS样式自动插入：支持为指定服务的Web页面自动添加预设的BDE CSS样式
• 兼容性：继承自https://hub.docker.com/r/jwilder/nginx-proxy/%E9%95%9C%E5%83%8F%EF%BC%8C%E6%94%AF%E6%8C%81%E5%85%B6%E6%89%80%E6%9C%89%E9%85%8D%E7%BD%AE%E9%80%89%E9%A1%B9
• 动态重载：容器启停时自动重新加载Nginx配置，无需手动干预

使用场景和适用范围

适用于需要通过Nginx反向代理多个Docker容器服务，并希望统一美化这些服务Web界面的场景。特别适合Flink、Hadoop、Spark等大数据服务的Web控制台样式统一。

使用方法和配置说明

启动nginx-proxy-with-css容器

bash
docker run -d -p 80:80 -v /var/run/docker.sock:/tmp/docker.sock:ro bde2020/nginx-proxy-with-css

启动被代理的容器

启动需要被代理的容器时，需设置VIRTUAL_HOST环境变量指定虚拟主机名：

bash
docker run -e VIRTUAL_HOST=foo.bar.com ...

代理配置说明

该镜像扩展自https://hub.docker.com/r/jwilder/nginx-proxy/%EF%BC%8C%E5%9B%A0%E6%AD%A4%E5%85%B6%E6%89%80%E6%9C%89%E9%85%8D%E7%BD%AE%E9%80%89%E9%A1%B9%E5%9D%87%E9%80%82%E7%94%A8%E4%BA%8E%E6%9C%AC%E9%95%9C%E5%83%8F%E3%80%82

被代理的容器必须暴露需要代理的端口，可通过以下方式实现：

• 在Dockerfile中使用EXPOSE指令
• 在docker run或docker create命令中使用--expose标志

确保DNS配置将foo.bar.com等虚拟主机名解析到运行nginx-proxy-with-css容器的主机，请求将被代理到设置了对应VIRTUAL_HOST环境变量的容器。

CSS插入配置

为需要自动插入CSS的服务容器设置CSS_SOURCE环境变量，其值必须为以下之一：

• flink
• flink-dashboard
• hadoop
• hadoop-history-server
• hadoop-node-manager
• hadoop-resource-manager
• hdfs
• sextant
• semagrow
• solr
• spark-master
• strabon

（此列表将在未来扩展）

添加新的CSS插入规则

1. 在/extra-css目录中添加你的CSS文件
2. 在nginx.tmpl文件中插入sub_filter规则：

# CSS插入规则位置
{{ if (eq $css "inverted") }}
sub_filter '</head>' '<link rel="stylesheet" type="text/css" href="/extra-css/inverted.css"/></head>';
{{ end }}

# 自定义服务的CSS规则
{{ if (eq $css "myservice") }}
sub_filter '</head>' '<link rel="stylesheet" type="text/css" href="/extra-css/myservice/custom_style_override.css"/></head>';
{{ end }}

然后启动服务容器时设置环境变量CSS_SOURCE=myservice即可应用自定义CSS。