feat: 使用docker自动下载前端 (#23)

* wip: add web-downloader

* wip: xx

* fix: `no such file or directory`

* wip: add bus

* wip: 更新readme

* wip: xx

* wip: refactor to use override

* wip: 添加覆写目录

* wip: 更新文档

* wip: 使用index-seo.html来处理爬虫获取不到JS更新之后的标题的问题

* wip: 更新文档和distar部署脚本, 使用index-seo.html来交给爬虫读取

---------

Co-authored-by: ipcjs.mac4 <[email protected]>
Co-authored-by: cli <cli@debian>

Author: 3 people

.env.default

@@ -25,17 +25,28 @@ WEB_BASE_URL='' # https://livedvr.tripsdd.com
 DATA_DIR=/data
 # docker仓库的目录, 不建议在compose文件中引用docker仓库的绝对路径, 建议使用configs替代: https://docs.docker.com/reference/compose-file/configs/
 DOCKER_DIR=/home/docker
+DOCKER_COMPOSE_DIR=/home/docker-compose
 
 ## 版本号, 设为latest则使用最新版
 # bus前端版本
 BUS_WEB_VERSION=5.30.0
+# bus前端文件复写目录, 该目录中的文件会在compose被up时被复制到bus前端目录, 通常可以复写如下文件:
+# - _app.config.js: 前端配置文件
+BUS_WEB_OVERRIDE_DIR=${DOCKER_COMPOSE_DIR}/bus-override
 # bus的后端, gateway-web和gateway-dispatch共用一个版本号
 BUS_GATEWAY_VERSION=1.21.1
 BUS_GATEWAY_808_2019_VERSION=25.8.25
 BUS_GATEWAY_JSATL12_VERSION=23.1.21
 BUS_GATEWAY_CALCULATION_VERSION=1.17.0
 # track前端版本
 TRACK_WEB_VERSION=1.53.0
+# track前端文件复写目录, 该目录中的文件会在compose被up时被复制到track前端目录, 通常可以复写如下文件:
+# - _app.config.js: 前端配置文件
+# - index-seo.html: 交给爬虫(搜索引擎/Line网页摘要等)读取的静态页面
+# - favicon.ico: ico图标
+# - favicon.png: png图标
+# - logo.png: 大图标
+TRACK_WEB_OVERRIDE_DIR=${DOCKER_COMPOSE_DIR}/track-override
 TRACK_MAINTAIN_VERSION=1.45.0
 TRACK_JTT808_VERSION=1.18.0
 
@@ -92,7 +103,7 @@ MAINTAIN_PORT='8080'
 # - access/ras_key|ras_key.pub: 访问密钥的公私钥对
 # - refresh/ras_key|ras_key.pub: 刷新密钥的公私钥对
 # - ip2region.xdb: ip到区域的映射数据, 手动下载连接: https://raw.githubusercontent.com/lionsoul2014/ip2region/master/data/ip2region.xdb
-MAINTAIN_TOKEN_DIR='/home/docker-compose/token'
+MAINTAIN_TOKEN_DIR=${DOCKER_COMPOSE_DIR}/token
 
 ## MYSQL, 必填
 MYSQL_HOST='mysql8' # mysql8 | ${SERVER_IP_INTERNAL} | ${SERVER_IP_PUBLIC}

README.md

@@ -19,6 +19,7 @@ git clone https://github.com/TranscodeGroup/docker.git /home/docker
 - [video-storage](./examples/video-storage/compose.yaml): RTP存储
 - [video-stream](./examples/video-stream/compose.yaml): RTP视频
 - [track](./examples/track/compose.yaml): Tracker V2单机部署
+- etc.
 
 ### 3. 配置`.env`
 
@@ -38,6 +39,16 @@ docker compose config > compose-stack.yaml
 
 ### 4. 下载前端文件
 
+#### 使用Docker自动下载
+
+在`/home/docker-compose/compose.yaml`文件中, `include`如下服务, 即可自动下载前端:
+
+- [compose.yaml](./web-downloader/compose.yaml): 自动下载的基础配置
+- [compose.track.yaml](./web-downloader/compose.track.yaml): 自动下载track的配置, 可选;
+- [compose.bus.yaml](./web-downloader/compose.bus.yaml): 自动下载bus的配置, 可选;
+
+#### 手动下载
+
 部署distar等项目的前端:  
 [说明文件](projects/README.md)
 

nginx/conf/conf.d/track.conf.template

@@ -18,8 +18,18 @@ server {
 
     # 平台前端
     location / {
-        alias  /usr/share/nginx/html/track/;
+        root  /usr/share/nginx/html/track;
         index  index.html index.htm;
+
+        if ($is_crawler) {
+            rewrite ^/(index.html)?$ /index-seo.html last;
+        }
+    }
+
+    # 平台前端, 交给爬虫读取的index文件
+    location = /index-seo.html {
+        root /usr/share/nginx/html/track;
+        try_files /index-seo.html /index.html =404;
     }
 
     location /track {

nginx/conf/nginx.conf

@@ -64,6 +64,17 @@ http {
       '' close;
     }
 
+    # 检测是否是爬虫
+    map $http_user_agent $is_crawler {
+        default 0;
+        # 搜索引擎
+        ~*(Googlebot|Bingbot|Baiduspider|Slurp|DuckDuckBot|Sogou|360Spider|Yandex|Applebot) 1;
+        # 社交媒体
+        ~*(facebookexternalhit|Twitterbot|LinkedInBot|Slackbot|Discordbot|Linespider|Bytespider) 1;
+        # 新兴AI
+        ~*(GPTBot|ChatGPT-User|ClaudeBot|PerplexityBot|CCBot) 1;
+    }
+
     # Docker Compose的默认DNS
     # https://stackoverflow.com/questions/35744650/docker-network-nginx-resolver
     resolver 127.0.0.11;

projects/distar-beta-deploy.sh

@@ -123,19 +123,22 @@ cp -Rfv "$CONFIG_DIR"/* "$target_dir"
 # 指定要处理的HTML文件
 cd "$target_dir"
 html_file="index.html"
-
-# 使用sed命令进行文本替换, 网站微缩图
-OLD_TITLE='中车在线'
-NEW_TITLE='DiStarGPS'
-OLD_DIV='数字交通云平台'
-NEW_DIV='ดูแลการเดินรถของคุ'
-
-# 使用sed命令进行文本替换
-sed -i.bak "s|$OLD_TITLE|$NEW_TITLE|g" "$html_file"
-sed -i.bak "s|$OLD_DIV|$NEW_DIV|g" "$html_file"
-rm "$html_file".bak
-
-echo "替换完成：$html_file 中的 '工物员' 已被替换为 'DiStarGPS ดูแลการเดินรถของคุณ'"
+if [ -f "index-seo.html" ]; then
+  echo "index-seo.html文件已存在, 爬虫访问网站时, 它的优先级更高, 不需要替换${html_file}里面的标题&描述"
+else
+  # 使用sed命令进行文本替换, 网站微缩图
+  OLD_TITLE='中车在线'
+  NEW_TITLE='DiStarGPS'
+  OLD_DIV='数字交通云平台'
+  NEW_DIV='ดูแลการเดินรถของคุ'
+
+  # 使用sed命令进行文本替换
+  sed -i.bak "s|$OLD_TITLE|$NEW_TITLE|g" "$html_file"
+  sed -i.bak "s|$OLD_DIV|$NEW_DIV|g" "$html_file"
+  rm "$html_file".bak
+
+  echo "替换完成：$html_file 中的 '工物员' 已被替换为 'DiStarGPS ดูแลการเดินรถของคุณ'"
+fi
 
 echo "解压完成,目录 -> " "$target_dir"
 echo "beta路径,复制到浏览器可预览 -> " https://tripsdd.com/beta/"$target_dir"

projects/distar/index-seo.html

@@ -0,0 +1,18 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
+    <title>DiStarGPS</title>
+    <meta name="description" content="ดูแลการเดินรถของคุณ" />
+    <link rel="apple-touch-icon" href="./favicon.png" />
+    <link rel="shortcut icon" href="./favicon.ico" />
+</head>
+
+<body>
+    <h1>DiStarGPS</h1>
+    <p>ดูแลการเดินรถของคุณ</p>
+</body>
+
+</html>

projects/teamcity-download-artifact.sh

@@ -1,4 +1,4 @@
-#!/bin/bash
+#!/bin/sh
 
 # 默认使用名为artifacts的token, 权限较小(被设置为: `<Root project>: View build runtime parameters and data`)
 # @see http://th-ci.transcodegroup.cn:9080/profile.html?item=accessTokens

web-downloader/.env

@@ -0,0 +1 @@
+../.env.default

web-downloader/compose.bus.yaml

@@ -0,0 +1,4 @@
+services:
+  web-downloader-bus:
+    # Remove the profiles field to enable the service
+    profiles: !reset null

web-downloader/compose.track.yaml

@@ -0,0 +1,4 @@
+services:
+  web-downloader-track:
+    # Remove the profiles field to enable the service
+    profiles: !reset null