vue-vben-admin Docker 容器化部署构建、加固到验收的完整路径【免费下载链接】vue-vben-adminA modern vue admin panel built with Vue3, Shadcn UI, Vite, TypeScript, and Monorepo. Its fast!项目地址: https://gitcode.com/GitHub_Trending/vu/vue-vben-adminvue-vben-admin 打包进一个不到 100 MB 的 nginx 镜像docker build加docker run两条命令后浏览器访问http://localhost:8080应出现登录页。本文按构建 → 加固 → 验收的顺序走完这条链路并给出对照排障表。环境自检开工前先过一遍版本线仓库package.json的engines与 Dockerfile 决定了版本底线三项检查不通过就不要开始构建。工具最低要求检查命令Node.js22.18或 24.12node -vpnpm11.0pnpm -vDocker20.10开启 BuildKit 以获得缓存挂载docker version拉取代码git clone https://gitcode.com/GitHub_Trending/vu/vue-vben-admin构建管线多阶段 Dockerfile 的设计意图官方镜像模板在 scripts/deploy/Dockerfile思路是构建环境和运行环境完全隔离builder 阶段装 Node、装依赖、跑构建production 阶段只留下 nginx 和静态产物。node_modules 不进最终镜像体积自然小运行面也干净。骨架如下FROM node:22-slim AS builder ENV NODE_OPTIONS--max-old-space-size8192 WORKDIR /app COPY . /app RUN --mounttypecache,idpnpm,target/pnpm/store \ pnpm install --frozen-lockfile RUN pnpm run build --filter\!./docs FROM nginx:stable-alpine COPY --frombuilder /app/playground/dist /usr/share/nginx/html COPY --frombuilder /app/scripts/deploy/nginx.conf /etc/nginx/nginx.conf EXPOSE 8080 CMD [nginx, -g, daemon off;]其中两个不直观的点和官方文件的差异--mounttypecache把 pnpm store 落在宿主缓存层重复构建不必重新下载依赖monorepo 全量构建吃内存NODE_OPTIONS限制 8 GB 堆Docker Desktop 里记得给容器侧配足内存否则构建直接 OOM。镜像构建与启动docker build -t vben:prod -f scripts/deploy/Dockerfile . docker run -d -p 8080:8080 --name vben vben:prod生产加固缓存、环境变量与代理各改一处缓存策略给哈希产物设长缓存构建输出的 js/css 都带内容哈希文件名变了就是新文件因此可以放心给静态资源长期缓存HTML 入口仍走 SPA 兜底保持可更新。在 nginx.conf 的 server 块内追加location /assets/ { expires 30d; add_header Cache-Control public, max-age2592000, immutable; }同时把官方模板里被注释的 gzip 相关指令按需打开静态文件体积大开启压缩对带宽收益明显模板默认是关闭状态以仓库实际文件为准。环境变量改完必须重新构建Vite 的VITE_前缀变量是构建期内联进产物的容器启动时传-e环境变量不会生效。要改接口地址先改对应应用的.env.production再构建镜像不要指望运行时注入。反向代理把 API 收进同域官方模板内置了 CORS 响应头含 OPTIONS 预检直接返回 204适合纯静态托管场景。若要消除跨域、让后端拿真实客户端地址建议加/api前缀转发location /api/ { proxy_pass https://your-api.example.com/; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; }上线验证状态、日志与排障对照按容器状态 → 端口 → 日志 → 页面四步走docker ps | grep vben ss -lnt | grep 8080 docker logs -f vben最后打开浏览器登录页确认页面渲染、静态资源 200 且走缓存。遇到异常按下表对照覆盖 90% 的部署故障。故障现象常见原因处置刷新子路由 404缺 SPA 兜底确认try_files $uri $uri/ /index.html存在mjs 资源被拒MIME 未注册确认types中application/javascript js mjs生效端口被占用宿主机 8080 已有监听ss -lnt定位进程改用-p 9080:8080映射接口跨域被拒未走同域代理或 CORS 头缺失按上文配置/api/转发或核对 CORS 头构建中途 OOM宿主内存不足调大 Docker 内存上限保留 8 GB 堆配置进阶方向编排、流水线与健康检查单机跑通后用 compose 把镜像、日志卷、restart: always收进一个文件多实例横向扩展时挂同一负载均衡即可CI/CD 可参考仓库自带的 .github/workflows/deploy.yml 思路推送触发构建、产物同步到目标机器把构建镜像 推送 重启串成一条流水线。容器侧给 nginx 加HEALTHCHECK探测根路径返回码配合编排系统的自愈策略就能自动拉起故障实例TLS 证书不要在容器内做交给外层七层反代如 Caddy终结镜像保持零证书依赖。命令速查命令用途docker build -t vben:prod -f scripts/deploy/Dockerfile .构建生产镜像docker run -d -p 8080:8080 --name vben vben:prod后台启动并映射 8080 端口docker ps -a/docker logs vben查看容器状态与运行日志docker stop vben docker rm vben停止并移除旧实例docker images vben/docker rmi image-id核对与清理镜像以上命令均以仓库 scripts/deploy/ 下的实际模板为准换用其他应用web-antd、web-ele 等部署时仅需把 COPY 的产物目录换成对应应用的dist路径。【免费下载链接】vue-vben-adminA modern vue admin panel built with Vue3, Shadcn UI, Vite, TypeScript, and Monorepo. Its fast!项目地址: https://gitcode.com/GitHub_Trending/vu/vue-vben-admin创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
