生产docker部署

.dockerignore

@@ -0,0 +1,12 @@
+node_modules
+dist
+.git
+.idea
+.agents
+.codex
+.env.local
+.env.*.local
+dist.zip
+*.log
+Dockerfile
+docker-compose*.yml

Dockerfile

@@ -0,0 +1,27 @@
+FROM node:20-alpine AS build
+
+WORKDIR /app
+
+COPY package.json yarn.lock ./
+RUN yarn install --frozen-lockfile
+
+COPY . .
+
+ARG BUILD_MODE=prod
+RUN case "$BUILD_MODE" in \
+    test) yarn build:test ;; \
+    prod|production) yarn build:prod ;; \
+    *) echo "Unsupported BUILD_MODE: $BUILD_MODE. Use test or prod." && exit 1 ;; \
+  esac
+
+FROM nginx:1.27-alpine
+
+ENV BACKEND_GATEWAY=http://192.168.3.211:9999
+
+COPY nginx/default.conf.template /etc/nginx/templates/default.conf.template
+COPY --from=build /app/dist /usr/share/nginx/html
+
+EXPOSE 10086
+
+HEALTHCHECK --interval=30s --timeout=3s --start-period=10s \
+  CMD wget -qO- http://127.0.0.1:10086/ >/dev/null || exit 1

README.md

@@ -91,3 +91,39 @@ yarn build:prod
 # 默认生产打包
 yarn build
 ```
+
+## Docker 部署
+
+镜像内使用 Nginx 托管前端静态资源，并代理 `/auth`、`/admin`、`/hotelStaff`、`/hotelBiz` 到后端网关。前端环境文件中的 `VITE_API_BASE_URL` 保持为空即可。
+
+构建生产镜像：
+
+```bash
+docker build --build-arg BUILD_MODE=prod -t hotel-biz-h5:prod .
+```
+
+构建测试镜像：
+
+```bash
+docker build --build-arg BUILD_MODE=test -t hotel-biz-h5:test .
+```
+
+直接运行：
+
+```bash
+docker run -d \
+  --name hotel-biz-h5 \
+  -p 10086:10086 \
+  -e BACKEND_GATEWAY=http://192.168.3.211:9999 \
+  hotel-biz-h5:prod
+```
+
+使用 compose：
+
+```bash
+docker compose up -d --build
+```
+
+`BACKEND_GATEWAY` 是容器内 Nginx 代理到的后端网关地址，不要以 `/` 结尾。生产环境如果前面还有宿主机 Nginx，宿主机 Nginx 只需要负责域名、HTTPS 证书，并把流量转发到 `127.0.0.1:10086`。
+
+生产扫码建议通过 HTTPS 访问，否则部分移动浏览器或微信内置浏览器可能无法打开摄像头。

docker-compose.yml

@@ -0,0 +1,13 @@
+services:
+  hotel-biz-h5:
+    build:
+      context: .
+      args:
+        BUILD_MODE: prod
+    image: hotel-biz-h5:prod
+    container_name: hotel-biz-h5
+    environment:
+      BACKEND_GATEWAY: http://192.168.3.211:9999
+    ports:
+      - "10086:10086"
+    restart: unless-stopped

docs/frontend-practices.md

@@ -33,6 +33,8 @@
 - 前后端分离部署时，优先用 Nginx 把 `/auth`、`/admin`、`/hotelStaff`、`/hotelBiz` 等路径代理到后端网关，这样浏览器看到的是同源请求，跨域问题最少。
 - 如果直接把 `VITE_API_BASE_URL` 配成后端网关 IP 或域名，跨域就需要后端网关正确返回 CORS 头；这不是前端代码能完全解决的。
 - SPA 路由需要 Nginx `location / { try_files $uri $uri/ /index.html; }`。
+- Docker 部署时，容器内 Nginx 负责静态资源和接口前缀代理，运行时通过 `BACKEND_GATEWAY` 环境变量指定后端网关地址。
+- 如果生产服务器外层还有 Nginx，外层 Nginx 只负责域名、HTTPS 和转发到容器端口；接口前缀代理继续交给容器内 Nginx。
 
 ## 移动端布局
 

nginx/default.conf.template

@@ -0,0 +1,62 @@
+server {
+  listen 10086;
+  server_name _;
+
+  root /usr/share/nginx/html;
+  index index.html;
+
+  client_max_body_size 20m;
+
+  gzip on;
+  gzip_types text/plain text/css application/javascript application/json image/svg+xml;
+
+  location = /index.html {
+    add_header Cache-Control "no-cache";
+  }
+
+  location /assets/ {
+    expires 30d;
+    add_header Cache-Control "public, immutable";
+    try_files $uri =404;
+  }
+
+  location /auth/ {
+    proxy_pass ${BACKEND_GATEWAY}/auth/;
+    proxy_http_version 1.1;
+    proxy_set_header Host $host;
+    proxy_set_header X-Real-IP $remote_addr;
+    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+    proxy_set_header X-Forwarded-Proto $scheme;
+  }
+
+  location /admin/ {
+    proxy_pass ${BACKEND_GATEWAY}/admin/;
+    proxy_http_version 1.1;
+    proxy_set_header Host $host;
+    proxy_set_header X-Real-IP $remote_addr;
+    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+    proxy_set_header X-Forwarded-Proto $scheme;
+  }
+
+  location /hotelStaff/ {
+    proxy_pass ${BACKEND_GATEWAY}/hotelStaff/;
+    proxy_http_version 1.1;
+    proxy_set_header Host $host;
+    proxy_set_header X-Real-IP $remote_addr;
+    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+    proxy_set_header X-Forwarded-Proto $scheme;
+  }
+
+  location /hotelBiz/ {
+    proxy_pass ${BACKEND_GATEWAY}/hotelBiz/;
+    proxy_http_version 1.1;
+    proxy_set_header Host $host;
+    proxy_set_header X-Real-IP $remote_addr;
+    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+    proxy_set_header X-Forwarded-Proto $scheme;
+  }
+
+  location / {
+    try_files $uri $uri/ /index.html;
+  }
+}