vue-vben-admin 容器化部署一张镜像从构建到上线【免费下载链接】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后端接口已经跑在 8080 端口前端却还躺在本地一个dist文件夹里每次要给同事演示都得手动传文件。vue-vben-admin 容器化部署的做法就是把构建产物和 Nginx 一起烤进一张镜像服务器上拉起容器就能提供服务。一、先选姿势——三种上线路径怎么选动手之前先做决策因为三条路后期的运维成本差得很远维度单容器直启Compose 编排CI/CD 全自动适用场景内网测试、临时演示正式生产、需要日志留存或多实例高频迭代、版本化发布资源开销最低一台机器一个容器略高主要差在机器规划上最高还要养构建机和镜像仓库运维复杂度低记住一条docker run中维护一份 compose 文件高一次搭好长期受益回滚成本换回旧镜像重拉改 tag 重启一条命令按版本打 tag回滚即换 tag然后你会发现小团队最舒服的组合是CI 构建镜像 Compose 拉起容器构建交给流水线运行交给一份几十行的 yml。二、镜像是怎么被烤出来的——构建流水线拆解2.1 多阶段构建怎么拆一步说清取舍builder 阶段负责烧钱装依赖、跑 Vite 编译runtime 阶段只负责摆盘只装 Nginx 和产物。这样 Node 22、pnpm、源码统统不进最终镜像体积从几百 MB 压到几十 MB攻击面也随之变小。代码放在项目的 scripts/deploy/ 目录核心是两个文件scripts/deploy/Dockerfile 和 scripts/deploy/nginx.conf。构建前先拉取代码git clone https://gitcode.com/GitHub_Trending/vu/vue-vben-admin cd vue-vben-admin2.2 Dockerfile 逐指令解读构建阶段的每一行都有明确目的FROM node:22-slim AS builder ENV NODE_OPTIONS--max-old-space-size8192 # 单体仓库编译吃内存提前顶上去 RUN npm i -g corepack # 统一 pnpm 版本避免各机器不一致 WORKDIR /app COPY . /app # build cache 让 pnpm 存储跨层复用二次构建能快一大截 RUN --mounttypecache,idpnpm,target/pnpm/store pnpm install --frozen-lockfile # 只构建 web 端应用跳过文档站 RUN pnpm run build --filter!./docs注意这里有个坑--frozen-lockfile保证锁文件与依赖严格一致代价是改了pnpm-workspace.yaml后必须先提交锁文件否则构建会直接报错——这其实是好事它拦下了本地能跑线上炸。运行阶段只保留产物刻意不复制源码和依赖FROM nginx:stable-alpine # 注册 mjs 的 MIME 类型ES 模块的 Content-Type 才不会错 RUN echo types { application/javascript js mjs; } /etc/nginx/conf.d/mjs.conf 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;]镜像里只剩 Nginx 静态文件docker history一层层看过去会清爽很多。2.3 Nginx 层的两条线Nginx 在这个镜像里干两件事用两条location就能表达静态资源自己托管接口请求转发给后端。server { listen 8080; # 第一条线静态资源托管try_files 兜底 SPA 路由 location / { root /usr/share/nginx/html; try_files $uri $uri/ /index.html; } # 第二条线反向代理/api 开头的请求原样转给后端 location /api/ { proxy_pass http://backend:8080; proxy_set_header Host $host; } }换个角度看第二条线是关键前端构建时只要把接口地址写成相对路径/api镜像就不用关心后端部署在哪台机器——后面第三节会讲透这个设计。官方 scripts/deploy/nginx.conf 里还带了 CORS 头与 OPTIONS 预检处理跨域问题基本在这层就消化掉了。三、环境差异用配置吸收不靠改代码先说设计原则单页应用一旦打包就是纯静态文件所谓环境差异本质只有两个——接口地址和端口/日志的暴露方式。把它们收进配置层切环境就永远不用动一行代码。vue-vben-admin 用.env分层实现这件事playground/.env 放所有环境共用的值标题、命名空间等playground/.env.development 和 playground/.env.production 各自覆盖差异项。开发环境里VITE_GLOB_API_URL/api配合 Nitro Mock 走本地接口生产环境改成真实域名压缩策略VITE_COMPRESS、PWA 开关也在这里控制。构建行为由 playground/vite.config.ts 驱动环境变量就是它读到的输入。⚠️ 注意这里有个最容易踩的坑VITE_前缀变量是构建时被 Vite 内联进 JS 的容器运行时再传环境变量根本读不到。换句话说改接口地址要么重新构建镜像要么走相对路径 Nginx 反向代理的组合拳——后者更优因为同一张镜像在 staging 和 prod 通用Nginx 只是把/api指到不同的上游。多实例部署时端口映射和日志卷是 compose 里要交代清楚的事示例如下容器名、tag 可按团队规范换services: vben-frontend: image: vben-ui:live # tag 按环境或版本号打 container_name: vben-frontend ports: - 9080:8080 # 多实例再开一个 9081:8080 即可 environment: - TZAsia/Shanghai # 只放 Nginx 真正会读的值 volumes: - ./logs/nginx:/var/log/nginx # 日志落盘容器重建也不丢 restart: unless-stopped根目录的 .dockerignore 已经把node_modules、dist、.turbo排除在构建上下文外上传体积和缓存命中率都受益。四、部署后那 5 分钟的静默检查清单 ✅容器起来不等于能访问逐项过一遍下面这张清单每 30 秒左右就能确认一项容器状态docker ps里是Up且没有反复重启。不通过docker logs 容器名看尾部多半是 nginx 配置文件语法错误。端口映射curl -I http://localhost:9080返回 200。不通过查端口映射写错、宿主机防火墙或 8080 与容器内监听端口是否对应。静态资源与路由刷新任意二级路由页面不 404。不通过回看try_files兜底是否生效root是否指向/usr/share/nginx/html。API 连通与跨域浏览器 F12 打开 Network接口无 CORS 报错。不通过检查location /api/的反向代理是否配置、CORS 头是否输出。日志实时性docker logs -f 容器名有访问日志滚动或挂载的logs/nginx目录有新文件。不通过卷挂载路径与容器内路径不一致。健康检查端点约定一个/health路径返回 200给监控和编排系统做探活。不通过在 Nginx 里加一条location /health { return 200; }。登录页能正常打开、账号能登进去说明静态托管、路由兜底、接口代理这三件事已经全部通了。五、把重复劳动交给 CI手工 build、push 镜像、改 tag 重启这套动作每天重复一遍很快就会出错。一个最小可用的 workflow 骨架长这样name: deploy on: push: tags: [v*] jobs: build-push: runs-on: ubuntu-latest steps: - uses: actions/checkoutv4 - uses: pnpm/action-setupv4 - run: pnpm install --frozen-lockfile - run: docker build -t my-registry/vben-ui:${{ github.ref_name }} -f scripts/deploy/Dockerfile . - run: docker push my-registry/vben-ui:${{ github.ref_name }}打 tag 触发构建并推镜像服务器上docker compose pull docker compose up -d一条命令完成更新。这套骨架跑稳之后还可以自然叠加安全扫描或镜像签名让这张镜像可信也变成自动检查项。部署只是起点。镜像里已经留好了 Nginx 配置接下来给域名配上 HTTPS 证书、给容器加上健康检查探针、再接一份监控告警这套 vue-vben-admin 容器化部署就会从能上线走向敢放量。【免费下载链接】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），仅供参考 vue-vben-admin 容器化部署：一张镜像，从构建到上线
vue-vben-admin 容器化部署一张镜像从构建到上线【免费下载链接】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后端接口已经跑在 8080 端口前端却还躺在本地一个dist文件夹里每次要给同事演示都得手动传文件。vue-vben-admin 容器化部署的做法就是把构建产物和 Nginx 一起烤进一张镜像服务器上拉起容器就能提供服务。一、先选姿势——三种上线路径怎么选动手之前先做决策因为三条路后期的运维成本差得很远维度单容器直启Compose 编排CI/CD 全自动适用场景内网测试、临时演示正式生产、需要日志留存或多实例高频迭代、版本化发布资源开销最低一台机器一个容器略高主要差在机器规划上最高还要养构建机和镜像仓库运维复杂度低记住一条docker run中维护一份 compose 文件高一次搭好长期受益回滚成本换回旧镜像重拉改 tag 重启一条命令按版本打 tag回滚即换 tag然后你会发现小团队最舒服的组合是CI 构建镜像 Compose 拉起容器构建交给流水线运行交给一份几十行的 yml。二、镜像是怎么被烤出来的——构建流水线拆解2.1 多阶段构建怎么拆一步说清取舍builder 阶段负责烧钱装依赖、跑 Vite 编译runtime 阶段只负责摆盘只装 Nginx 和产物。这样 Node 22、pnpm、源码统统不进最终镜像体积从几百 MB 压到几十 MB攻击面也随之变小。代码放在项目的 scripts/deploy/ 目录核心是两个文件scripts/deploy/Dockerfile 和 scripts/deploy/nginx.conf。构建前先拉取代码git clone https://gitcode.com/GitHub_Trending/vu/vue-vben-admin cd vue-vben-admin2.2 Dockerfile 逐指令解读构建阶段的每一行都有明确目的FROM node:22-slim AS builder ENV NODE_OPTIONS--max-old-space-size8192 # 单体仓库编译吃内存提前顶上去 RUN npm i -g corepack # 统一 pnpm 版本避免各机器不一致 WORKDIR /app COPY . /app # build cache 让 pnpm 存储跨层复用二次构建能快一大截 RUN --mounttypecache,idpnpm,target/pnpm/store pnpm install --frozen-lockfile # 只构建 web 端应用跳过文档站 RUN pnpm run build --filter!./docs注意这里有个坑--frozen-lockfile保证锁文件与依赖严格一致代价是改了pnpm-workspace.yaml后必须先提交锁文件否则构建会直接报错——这其实是好事它拦下了本地能跑线上炸。运行阶段只保留产物刻意不复制源码和依赖FROM nginx:stable-alpine # 注册 mjs 的 MIME 类型ES 模块的 Content-Type 才不会错 RUN echo types { application/javascript js mjs; } /etc/nginx/conf.d/mjs.conf 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;]镜像里只剩 Nginx 静态文件docker history一层层看过去会清爽很多。2.3 Nginx 层的两条线Nginx 在这个镜像里干两件事用两条location就能表达静态资源自己托管接口请求转发给后端。server { listen 8080; # 第一条线静态资源托管try_files 兜底 SPA 路由 location / { root /usr/share/nginx/html; try_files $uri $uri/ /index.html; } # 第二条线反向代理/api 开头的请求原样转给后端 location /api/ { proxy_pass http://backend:8080; proxy_set_header Host $host; } }换个角度看第二条线是关键前端构建时只要把接口地址写成相对路径/api镜像就不用关心后端部署在哪台机器——后面第三节会讲透这个设计。官方 scripts/deploy/nginx.conf 里还带了 CORS 头与 OPTIONS 预检处理跨域问题基本在这层就消化掉了。三、环境差异用配置吸收不靠改代码先说设计原则单页应用一旦打包就是纯静态文件所谓环境差异本质只有两个——接口地址和端口/日志的暴露方式。把它们收进配置层切环境就永远不用动一行代码。vue-vben-admin 用.env分层实现这件事playground/.env 放所有环境共用的值标题、命名空间等playground/.env.development 和 playground/.env.production 各自覆盖差异项。开发环境里VITE_GLOB_API_URL/api配合 Nitro Mock 走本地接口生产环境改成真实域名压缩策略VITE_COMPRESS、PWA 开关也在这里控制。构建行为由 playground/vite.config.ts 驱动环境变量就是它读到的输入。⚠️ 注意这里有个最容易踩的坑VITE_前缀变量是构建时被 Vite 内联进 JS 的容器运行时再传环境变量根本读不到。换句话说改接口地址要么重新构建镜像要么走相对路径 Nginx 反向代理的组合拳——后者更优因为同一张镜像在 staging 和 prod 通用Nginx 只是把/api指到不同的上游。多实例部署时端口映射和日志卷是 compose 里要交代清楚的事示例如下容器名、tag 可按团队规范换services: vben-frontend: image: vben-ui:live # tag 按环境或版本号打 container_name: vben-frontend ports: - 9080:8080 # 多实例再开一个 9081:8080 即可 environment: - TZAsia/Shanghai # 只放 Nginx 真正会读的值 volumes: - ./logs/nginx:/var/log/nginx # 日志落盘容器重建也不丢 restart: unless-stopped根目录的 .dockerignore 已经把node_modules、dist、.turbo排除在构建上下文外上传体积和缓存命中率都受益。四、部署后那 5 分钟的静默检查清单 ✅容器起来不等于能访问逐项过一遍下面这张清单每 30 秒左右就能确认一项容器状态docker ps里是Up且没有反复重启。不通过docker logs 容器名看尾部多半是 nginx 配置文件语法错误。端口映射curl -I http://localhost:9080返回 200。不通过查端口映射写错、宿主机防火墙或 8080 与容器内监听端口是否对应。静态资源与路由刷新任意二级路由页面不 404。不通过回看try_files兜底是否生效root是否指向/usr/share/nginx/html。API 连通与跨域浏览器 F12 打开 Network接口无 CORS 报错。不通过检查location /api/的反向代理是否配置、CORS 头是否输出。日志实时性docker logs -f 容器名有访问日志滚动或挂载的logs/nginx目录有新文件。不通过卷挂载路径与容器内路径不一致。健康检查端点约定一个/health路径返回 200给监控和编排系统做探活。不通过在 Nginx 里加一条location /health { return 200; }。登录页能正常打开、账号能登进去说明静态托管、路由兜底、接口代理这三件事已经全部通了。五、把重复劳动交给 CI手工 build、push 镜像、改 tag 重启这套动作每天重复一遍很快就会出错。一个最小可用的 workflow 骨架长这样name: deploy on: push: tags: [v*] jobs: build-push: runs-on: ubuntu-latest steps: - uses: actions/checkoutv4 - uses: pnpm/action-setupv4 - run: pnpm install --frozen-lockfile - run: docker build -t my-registry/vben-ui:${{ github.ref_name }} -f scripts/deploy/Dockerfile . - run: docker push my-registry/vben-ui:${{ github.ref_name }}打 tag 触发构建并推镜像服务器上docker compose pull docker compose up -d一条命令完成更新。这套骨架跑稳之后还可以自然叠加安全扫描或镜像签名让这张镜像可信也变成自动检查项。部署只是起点。镜像里已经留好了 Nginx 配置接下来给域名配上 HTTPS 证书、给容器加上健康检查探针、再接一份监控告警这套 vue-vben-admin 容器化部署就会从能上线走向敢放量。【免费下载链接】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），仅供参考