[#29] docker compose增加首页超链接支持动态后端服务映射端口

This commit is contained in:
yuyr 2025-10-27 16:10:02 +08:00
parent cc0f9e5fed
commit bd082866d8
4 changed files with 41 additions and 1 deletions

View File

@ -241,6 +241,12 @@ services:
environment: environment:
- ARGUS_BUILD_UID=${ARGUS_BUILD_UID:-2133} - ARGUS_BUILD_UID=${ARGUS_BUILD_UID:-2133}
- ARGUS_BUILD_GID=${ARGUS_BUILD_GID:-2015} - ARGUS_BUILD_GID=${ARGUS_BUILD_GID:-2015}
# Frontend runtime-injected external ports (used to render hyperlinks)
- EXTERNAL_MASTER_PORT=${WEB_PROXY_PORT_8085:-8085}
- EXTERNAL_ALERTMANAGER_PORT=${WEB_PROXY_PORT_8084:-8084}
- EXTERNAL_GRAFANA_PORT=${WEB_PROXY_PORT_8081:-8081}
- EXTERNAL_PROMETHEUS_PORT=${WEB_PROXY_PORT_8082:-8082}
- EXTERNAL_KIBANA_PORT=${WEB_PROXY_PORT_8083:-8083}
volumes: volumes:
- ./private/argus/etc:/private/argus/etc - ./private/argus/etc:/private/argus/etc
networks: networks:

View File

@ -28,5 +28,26 @@ chmod 755 "$WEB_DOMAIN_FILE"
echo "[INFO] Launching nginx..." echo "[INFO] Launching nginx..."
# ========== 生成运行期前端配置 (/usr/share/nginx/html/argus-config.js) ==========
CFG_JS="/usr/share/nginx/html/argus-config.js"
MASTER_PORT="${EXTERNAL_MASTER_PORT:-8085}"
ALERT_PORT="${EXTERNAL_ALERTMANAGER_PORT:-8084}"
GRAFANA_PORT="${EXTERNAL_GRAFANA_PORT:-8081}"
PROM_PORT="${EXTERNAL_PROMETHEUS_PORT:-8082}"
KIBANA_PORT="${EXTERNAL_KIBANA_PORT:-8083}"
{
echo "// generated at runtime by start-web-supervised.sh"
echo "window.__ARGUS_PORTS__ = {"
echo " MASTER: ${MASTER_PORT},"
echo " ALERTMANAGER: ${ALERT_PORT},"
echo " GRAFANA: ${GRAFANA_PORT},"
echo " PROMETHEUS: ${PROM_PORT},"
echo " KIBANA: ${KIBANA_PORT},"
echo "};"
if [[ -n "${ARGUS_PUBLIC_HOST:-}" ]]; then
printf "window.__ARGUS_PUBLIC_HOST__ = '%s';\n" "$ARGUS_PUBLIC_HOST"
fi
} > "$CFG_JS"
# 启动 nginx 前台模式 # 启动 nginx 前台模式
exec /usr/sbin/nginx -g "daemon off;" exec /usr/sbin/nginx -g "daemon off;"

View File

@ -8,6 +8,8 @@
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>
<!-- Runtime-injected config: ports/host; generated by start-web-supervised.sh -->
<script src="/argus-config.js"></script>
<script type="module" src="/src/main.jsx"></script> <script type="module" src="/src/main.jsx"></script>
</body> </body>
</html> </html>

View File

@ -3,7 +3,8 @@
// 运行时解析主机名,统一按端口访问多服务 // 运行时解析主机名,统一按端口访问多服务
const HOST = (typeof window !== 'undefined' && (window.__ARGUS_PUBLIC_HOST__ || window.location.hostname)) || 'localhost'; const HOST = (typeof window !== 'undefined' && (window.__ARGUS_PUBLIC_HOST__ || window.location.hostname)) || 'localhost';
const PORTS = { // 默认端口常量(作为兜底值)
const DEFAULT_PORTS = {
MASTER: 8085, // 经网关(含 CORS MASTER: 8085, // 经网关(含 CORS
ALERTMANAGER: 8084, ALERTMANAGER: 8084,
GRAFANA: 8081, GRAFANA: 8081,
@ -11,6 +12,16 @@ const PORTS = {
KIBANA: 8083, KIBANA: 8083,
}; };
// 运行期注入:/argus-config.js 会在 window.__ARGUS_PORTS__ 写入外部端口
const RUNTIME_PORTS = (typeof window !== 'undefined' && window.__ARGUS_PORTS__) || {};
const PORTS = {
MASTER: Number(RUNTIME_PORTS.MASTER) || DEFAULT_PORTS.MASTER,
ALERTMANAGER: Number(RUNTIME_PORTS.ALERTMANAGER) || DEFAULT_PORTS.ALERTMANAGER,
GRAFANA: Number(RUNTIME_PORTS.GRAFANA) || DEFAULT_PORTS.GRAFANA,
PROMETHEUS: Number(RUNTIME_PORTS.PROMETHEUS) || DEFAULT_PORTS.PROMETHEUS,
KIBANA: Number(RUNTIME_PORTS.KIBANA) || DEFAULT_PORTS.KIBANA,
};
const BASE = { const BASE = {
MASTER: `http://${HOST}:${PORTS.MASTER}`, MASTER: `http://${HOST}:${PORTS.MASTER}`,
ALERT: `http://${HOST}:${PORTS.ALERTMANAGER}`, ALERT: `http://${HOST}:${PORTS.ALERTMANAGER}`,