From 45fbdffddb2b762f8c1dfc10862f3654cafd3be3 Mon Sep 17 00:00:00 2001 From: Jacky Ser Date: Tue, 11 Aug 2026 18:01:39 +0800 Subject: [PATCH] Align static deployment with existing Caddy gateway --- DEPLOY_STATIC.md | 132 ++++++++++++++++++++++++++++------------- deploy/Caddyfile.duoji | 6 ++ 2 files changed, 96 insertions(+), 42 deletions(-) create mode 100644 deploy/Caddyfile.duoji diff --git a/DEPLOY_STATIC.md b/DEPLOY_STATIC.md index abdbc4d..c0aab82 100644 --- a/DEPLOY_STATIC.md +++ b/DEPLOY_STATIC.md @@ -1,75 +1,123 @@ # 高徳乐 AI 舵机选型助手：静态部署说明 -本仓库已经提供纯静态构建方式。页面的产品数据、图片、选型计算、筛选和弹窗交互都在浏览器中运行，不依赖 Node.js、数据库、API 或 Cloudflare Worker 的运行时。 +本项目提供纯静态构建方式。产品数据、图片、选型计算、筛选和弹窗交互都在浏览器中运行；网站运行时不需要 Node.js、数据库、API 或 Cloudflare Worker。 + +## 当前服务器的推荐方案 + +服务器已经有 Docker Compose 管理的 Caddy 网关，并且 Caddy 占用 80/443 端口。因此本项目应当： + +1. 使用 `npm run build:static` 生成 `dist-static/`。 +2. 将 `dist-static/` 同步到服务器静态目录。 +3. 把静态目录以只读方式挂载到现有 Caddy 容器。 +4. 在现有 Caddyfile 中增加 `duoji.dbpi.com.cn` 的站点配置。 + +不要为本项目另起 Nginx，不要让新容器绑定 80/443，也不要改动现有 `galderma-api` 和 `galderma-db` 容器。 ## 给 Git AI 的部署任务 可以直接把下面这段话发给仓库里的 AI： -> 请将本仓库部署为纯静态网站，不要启动 Node.js 后端、Vinext Server 或 Cloudflare Worker。先执行 `npm ci`，再执行 `npm run build:static`。把生成的 `dist-static/` 目录作为网站根目录发布到当前云服务器，并配置 Nginx 将未知路径回退到 `index.html`。如果服务器使用 Docker，请使用仓库中的 `Dockerfile.static` 构建并运行，容器端口为 80。部署完成后检查首页、`#selector`、`#products` 和 `#precision-gears` 页面区域，以及产品图片是否能正常加载。 +> 请把本仓库部署为 `duoji.dbpi.com.cn` 的纯静态网站。不要执行 `npm run build`，不要启动 Vinext Server、Node.js 后端或 Cloudflare Worker；请执行 `npm run build:static`，发布生成的 `dist-static/` 目录。服务器已有 Docker Compose 管理的 Caddy 网关，80/443 端口不能抢占，也不要启动独立 Nginx 或新的 80 端口容器。请先检查现有 `/root/galderma/docker-compose.yml` 和 Caddyfile，在 Caddy 服务中增加只读挂载 `/var/www/duoji:/srv/duoji:ro`，并增加仓库 `deploy/Caddyfile.duoji` 中的站点配置。构建时服务器没有 Node.js，可使用一次性 `node:22-alpine` 容器构建，并用 `--tmpfs /src/node_modules` 避免把依赖写入宿主机。修改前备份 Caddy 配置，修改后先校验配置，再只重载 Caddy。不要改动 galderma-api、galderma-db 和现有站点，不要把密码、SSH 密钥或 token 写入仓库。最后用 curl 检查首页、产品图片和 HTTPS。 -## 方式一：Nginx / 静态文件服务器 +## 构建静态文件 -在服务器项目目录执行： +如果服务器有 Node.js： ```bash -git clone https://git.databerrypi.com/MJ-IT/gdm-Servo-model.git -cd gdm-Servo-model npm ci npm run build:static ``` -将 `dist-static/` 下的全部文件复制到 Nginx 网站根目录，例如： +如果服务器没有 Node.js，可使用一次性 Docker 构建容器。该方式不会在宿主机留下 `node_modules`： ```bash -sudo mkdir -p /var/www/gdm-servo -sudo rsync -a --delete dist-static/ /var/www/gdm-servo/ +docker run --rm \ + -v "$PWD":/src \ + --tmpfs /src/node_modules \ + -w /src \ + node:22-alpine \ + sh -lc 'npm ci && npm run build:static' ``` -Nginx 的站点配置可以参考 [`deploy/nginx-static.conf`](deploy/nginx-static.conf)。其中最关键的是： +构建完成后，网站文件位于 `dist-static/`，入口是 `dist-static/index.html`。当前静态入口不依赖 `app/layout.tsx` 的动态 metadata，因此不要用 `npm run build` 代替 `npm run build:static`。 -```nginx -root /var/www/gdm-servo; +## 与现有 Caddy 共存 -location / { - try_files $uri $uri/ /index.html; +### 1. 同步静态文件 + +以下路径是示例，实际执行时让部署 AI 先确认服务器目录和权限： + +```bash +sudo mkdir -p /var/www/duoji +sudo rsync -a --delete dist-static/ /var/www/duoji/ +``` + +### 2. 给 Caddy 服务增加只读目录挂载 + +在现有 Docker Compose 的 Caddy 服务中增加： + +```yaml +volumes: + - /var/www/duoji:/srv/duoji:ro +``` + +不要覆盖原有 volumes；只追加这一项。容器内的 `/srv/duoji` 对应本项目的静态文件目录。 + +### 3. 增加 Caddy 站点 + +将 [`deploy/Caddyfile.duoji`](deploy/Caddyfile.duoji) 的内容追加到现有 Caddyfile。配置核心如下： + +```caddy +duoji.dbpi.com.cn { + root * /srv/duoji + encode gzip zstd + try_files {path} /index.html + file_server } ``` -以后更新时，在仓库目录执行： +修改前先备份 Caddyfile，并确认没有同名的 `duoji.dbpi.com.cn` 配置。修改后先验证，再重载 Caddy： + +```bash +docker exec galderma-caddy-1 caddy validate --config /etc/caddy/Caddyfile --adapter caddyfile +docker exec galderma-caddy-1 caddy reload --config /etc/caddy/Caddyfile --adapter caddyfile +``` + +如果现有容器内的 Caddyfile 路径不同，以 Docker Compose 的实际挂载路径为准。不要为了部署本项目执行整个 Compose 栈的重建或清理操作。 + +### 4. 验证 + +```bash +curl -I https://duoji.dbpi.com.cn/ +curl -I https://duoji.dbpi.com.cn/catalog-products/precision-gears/418.jpg +curl -I https://duoji.dbpi.com.cn/catalog-products/precision-gears-size/418.jpg +``` + +浏览器中再检查首页、`#selector`、`#products` 和 `#precision-gears`，并打开任意精密齿轮产品确认“产品尺寸”可以切换。 + +## 后续更新 ```bash git pull --ff-only origin main -npm ci -npm run build:static -sudo rsync -a --delete dist-static/ /var/www/gdm-servo/ +docker run --rm \ + -v "$PWD":/src \ + --tmpfs /src/node_modules \ + -w /src \ + node:22-alpine \ + sh -lc 'npm ci && npm run build:static' +sudo rsync -a --delete dist-static/ /var/www/duoji/ +docker exec galderma-caddy-1 caddy reload --config /etc/caddy/Caddyfile --adapter caddyfile ``` -运行时只需要 Nginx，不需要保留 Node.js 进程。 +只更新静态文件时不需要重新构建或清理其他业务容器。 -## 方式二：Docker +## 其他部署方式 -仓库已经提供 [`Dockerfile.static`](Dockerfile.static)： +仓库中的 [`Dockerfile.static`](Dockerfile.static) 和 [`deploy/nginx-static.conf`](deploy/nginx-static.conf) 可用于独立服务器或独立容器场景，但不适用于当前已经由 Caddy 占用 80/443 的服务器。当前服务器优先使用“静态文件 + 现有 Caddy”方案。 -```bash -docker build -f Dockerfile.static -t gdm-servo-static:latest . -docker run -d --name gdm-servo-static --restart unless-stopped -p 80:80 gdm-servo-static:latest -``` +## 注意事项 -如果服务器已有 80 端口服务，可以改成 `-p 8080:80`，再由现有 Nginx 反向代理到 `127.0.0.1:8080`。 - -## 本地检查 - -```bash -npm run build:static -python3 -m http.server 8080 --directory dist-static -``` - -然后打开 `http://服务器IP:8080`。不要直接双击 `index.html`，因为浏览器会限制本地文件加载模块和图片资源。 - -## 部署注意事项 - -- 静态版没有服务端接口；当前“申请样品”和“联系我们”表单只在浏览器中生成演示编号，不会把线索写入 CRM 或数据库。 -- 如果后续要真正保存客户线索，需要另行接入表单 API、企业微信、CRM 或数据库，不应把密钥写进前端代码。 -- 页面使用根路径资源（例如 `/catalog-products/...`），因此建议部署在域名根路径。如果必须部署到 `/servo/` 子目录，需要同步调整 Vite 的 `base` 和图片资源路径。 -- 每次产品数据或图片变更后，都要重新执行 `npm run build:static`，再同步整个 `dist-static/` 目录。 +- 静态版的“申请样品”和“联系我们”表单目前只在浏览器中生成演示编号，不会将线索写入 CRM 或数据库。 +- 如果后续要保存客户线索，需要另行接入表单 API、企业微信、CRM 或数据库，不要把密钥写进前端代码。 +- 页面使用根路径资源，建议部署在域名根路径，不建议直接部署到 `/servo/` 子目录。 +- 目前尺寸图仅在产品详情弹窗切换到“产品尺寸”时加载，图片体积主要影响磁盘和用户主动查看尺寸图时的下载，不会首屏一次性加载全部图片。 diff --git a/deploy/Caddyfile.duoji b/deploy/Caddyfile.duoji new file mode 100644 index 0000000..3a49b9a --- /dev/null +++ b/deploy/Caddyfile.duoji @@ -0,0 +1,6 @@ +duoji.dbpi.com.cn { + root * /srv/duoji + encode gzip zstd + try_files {path} /index.html + file_server +}