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最折磨人的部署往往卡在本地能跑、服務器上跑不起來之間依賴版本、Node 大版本、mock 服務、Nginx 配置任何一處沒對齊都會白屏。這篇文章面向會基本 Linux 和 Docker 操作、但沒做過前端項目容器化部署的開發者跟著 vue-vben-admin 倉庫自帶的部署工具鏈完成容器化部署目標是讓管理面板跑在 Nginx 上。做完之后你會得到一個可復現的一鍵構建、一鍵啟動流程在任何一臺裝了 Docker 的機器上都能部署出同樣效果。動手前確認兩件事開始動手之前先花兩分鐘核對兩樣東西本機工具鏈版本以及倉庫里哪些文件真正參與部署。這兩件沒確認清楚后面每一步都會返工。環境版本速查先對一下版本低于下表要求時直接去各工具官網Docker 的 get.docker.com、Node 的 nodejs.org下載安裝包升級即可。工具最低版本作用Docker20.10構建并運行容器鏡像Docker Composev2編排多實例服務Node.js22.18或 24.12本地安裝依賴、驗證構建pnpm11.0倉庫唯一支持的包管理器定位與部署相關的文件clone 倉庫地址https://gitcode.com/GitHub_Trending/vu/vue-vben-admin后進入根目錄即可真正參與部署鏈的只有 3 個文件scripts/deploy/Dockerfile定義鏡像怎么構建是整個容器化流程的入口。scripts/deploy/nginx.conf決定鏡像里 Nginx 在生產環境如何提供靜態資源和處理預檢請求。.dockerignore定義構建時哪些本地文件不要送進構建上下文。把項目塞進容器環境和文件都確認好了現在把整個 monorepo 打包成一張鏡像。多階段構建到底分了幾步思路是構建和運行徹底分開構建階段用 Node pnpm 安裝依賴、執行 build 產出 dist運行階段只保留 Nginx 和 dist 產物。這樣最終鏡像里不需要 Node 環境和源碼體積更小、攻擊面更小。官方 Dockerfile 里還設置了 pnpm 緩存、Node 內存上限等細節下面精簡為核心邏輯完整版見 scripts/deploy/Dockerfile倉庫只讀任何調整請在本地副本中進行# 構建階段只負責裝依賴和構建 FROM node:22-slim AS builder WORKDIR /app COPY . . RUN npm i -g corepack RUN pnpm install --frozen-lockfile RUN pnpm run build --filter!./docs # 運行階段只保留 Nginx dist 產物 FROM nginx:stable-alpine AS production 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;]第二階段的COPY --frombuilder只從第一階段拿走 dist 和 Nginx 配置這就是多階段省空間的本質。構建時.dockerignore會把node_modules和.git擋在構建上下文之外鏡像不會白白帶上幾百 MB 依賴。構建鏡像并首次啟動下面這條命令以倉庫根目錄為構建上下文產出打標簽為vben-admin:prod的鏡像docker build -t vben-admin:prod -f scripts/deploy/Dockerfile . docker images | grep vben-admin構建日志末尾出現 Builder Success 字樣、docker images里能看到新鏡像說明構建階段成功。接下來啟動容器-e傳入 API 地址和運行環境docker run -d -p 8010:8080 \ -e VITE_GLOB_API_URLhttps://api.example.com \ -e NODE_ENVproduction \ --name vben-admin vben-admin:prod?? 注意Vite 的VITE_變量在構建時就會被打進 bundle運行時-e只對 Node 類服務生效改 API 地址要在構建前寫進.env.production再重新 build。看到什么算成功瀏覽器打開http://localhost:8010出現登錄頁部署就算打通了如果白屏先docker logs vben-admin看報錯。讓它在生產環境跑得快能跑起來之后下一步是讓它跑得快以及讓不同環境的差異有地方可放。Nginx 緩存與反向代理關鍵配置在本地副本的 Nginx 配置里有 4 條規則直接決定生產環境的體驗官方 scripts/deploy/nginx.conf 已包含完整版下面是核心片段location / { root /usr/share/nginx/html; try_files $uri $uri/ /index.html; } location ~* \.(js|css|png|jpg|svg|ico)$ { expires 30d; } gzip on;root /usr/share/nginx/html;靜態資源根目錄必須和 Dockerfile 里COPY的目標路徑一致。try_files ... /index.htmlSPA 路由兜底刷新任何不存在的子路由都會回落到 index.html不 404。expires 30d帶 hash 的 js/css 文件名內容永不變可以放心讓瀏覽器緩存 30 天。gzip onNginx 壓縮文本資源后再下發記得補gzip_types覆蓋 css 和 js網絡傳輸體積大約縮到三分之一。緩存和壓縮生效后用戶二次訪問基本全是命中瀏覽器緩存首屏觀感就是下面這樣用 .env 文件隔離多環境差異不同環境的差異全部收斂到.env文件里。以生產環境為例變量名對照playground/.env.production的實際字段VITE_GLOB_API_URLhttps://api.example.com VITE_NITRO_MOCKfalse VITE_COMPRESSgzip三個變量分別控制接口地址、是否啟動 mock、打包壓縮策略none/gzip/brotli。新增一個環境只需在本地副本復制一份.env.production改名改變量值不用動任何代碼。docker-compose 編排多實例單容器跑通后用 compose 把它變成可管理的服務services: vben-admin: image: vben-admin:prod ports: - 8010:8080 environment: - NODE_ENVproduction restart: always volumes: - ./logs:/var/log/nginxvolumes把宿主機./logs掛到/var/log/nginx意義在于容器銷毀重建后 Nginx 的訪問日志和錯誤日志不丟。啟動命令一行搞定docker compose up -ddocker compose ps顯示服務 Up、宿主機出現logs目錄并開始寫入 Nginx 日志即代表編排生效。部署后最容易踩的 3 個坑構建和啟動都順利不代表生產環境穩了。下面 3 處最容易翻車提前知道能省掉半天排查時間。靜態資源 404→ 現象刷新頁面后 js/css 在瀏覽器里 404。原因nginx.conf 的root和 Dockerfile 里COPY的產物路徑對不上。一句話修復在本地副本里把兩處路徑對齊后重新 build。API 請求跨域→ 現象接口請求全報 CORS 錯誤。原因前端與 API 不同源且 OPTIONS 預檢沒有處理。一句話修復在 Nginx 的location /加Access-Control-Allow-Origin等響應頭官方 nginx.conf 已帶完整預檢邏輯直接用或讓后端配置 allowed origins。端口被占用→ 現象docker run立刻報 port is already allocated。原因宿主機 8010 被別的進程占了。一句話修復用netstat -tuln | grep 8010找到占用進程換一個空閑端口映射。把重復構建交給 CI/CD手動 build 一次沒問題每次發版都手動敲一遍就很折磨。把流程寫進一條 workflowpush 到 main 分支自動觸發云 runner 上安裝依賴并執行構建、產出鏡像最后到目標服務器docker run替換舊容器全程無人值守。官方倉庫已經有一條可直接參考的部署流程觸發條件和步驟都寫得很標準拿過來改部署目標即可。參考文件.github/workflows/deploy.yml一張鏡像、一份 Nginx 配置、一個 compose 文件就是 vue-vben-admin 容器化部署的全部資產這也是它能在一小時內上線生產的全部原因。兩個可以繼續深入的方向給容器加健康檢查定期 curl 登錄頁接口掛了自動重啟、配置 HTTPS 證書自動續期比如接 acme.sh 定時簽發。關鍵文件路徑部署腳本目錄scripts/deploy/、vite 構建配置playground/vite.config.ts、環境變量示例playground/.env.production【免費下載鏈接】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最折磨人的部署往往卡在本地能跑、服務器上跑不起來之間依賴版本、Node 大版本、mock 服務、Nginx 配置任何一處沒對齊都會白屏。這篇文章面向會基本 Linux 和 Docker 操作、但沒做過前端項目容器化部署的開發者跟著 vue-vben-admin 倉庫自帶的部署工具鏈完成容器化部署目標是讓管理面板跑在 Nginx 上。做完之后你會得到一個可復現的一鍵構建、一鍵啟動流程在任何一臺裝了 Docker 的機器上都能部署出同樣效果。動手前確認兩件事開始動手之前先花兩分鐘核對兩樣東西本機工具鏈版本以及倉庫里哪些文件真正參與部署。這兩件沒確認清楚后面每一步都會返工。環境版本速查先對一下版本低于下表要求時直接去各工具官網Docker 的 get.docker.com、Node 的 nodejs.org下載安裝包升級即可。工具最低版本作用Docker20.10構建并運行容器鏡像Docker Composev2編排多實例服務Node.js22.18或 24.12本地安裝依賴、驗證構建pnpm11.0倉庫唯一支持的包管理器定位與部署相關的文件clone 倉庫地址https://gitcode.com/GitHub_Trending/vu/vue-vben-admin后進入根目錄即可真正參與部署鏈的只有 3 個文件scripts/deploy/Dockerfile定義鏡像怎么構建是整個容器化流程的入口。scripts/deploy/nginx.conf決定鏡像里 Nginx 在生產環境如何提供靜態資源和處理預檢請求。.dockerignore定義構建時哪些本地文件不要送進構建上下文。把項目塞進容器環境和文件都確認好了現在把整個 monorepo 打包成一張鏡像。多階段構建到底分了幾步思路是構建和運行徹底分開構建階段用 Node pnpm 安裝依賴、執行 build 產出 dist運行階段只保留 Nginx 和 dist 產物。這樣最終鏡像里不需要 Node 環境和源碼體積更小、攻擊面更小。官方 Dockerfile 里還設置了 pnpm 緩存、Node 內存上限等細節下面精簡為核心邏輯完整版見 scripts/deploy/Dockerfile倉庫只讀任何調整請在本地副本中進行# 構建階段只負責裝依賴和構建 FROM node:22-slim AS builder WORKDIR /app COPY . . RUN npm i -g corepack RUN pnpm install --frozen-lockfile RUN pnpm run build --filter!./docs # 運行階段只保留 Nginx dist 產物 FROM nginx:stable-alpine AS production 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;]第二階段的COPY --frombuilder只從第一階段拿走 dist 和 Nginx 配置這就是多階段省空間的本質。構建時.dockerignore會把node_modules和.git擋在構建上下文之外鏡像不會白白帶上幾百 MB 依賴。構建鏡像并首次啟動下面這條命令以倉庫根目錄為構建上下文產出打標簽為vben-admin:prod的鏡像docker build -t vben-admin:prod -f scripts/deploy/Dockerfile . docker images | grep vben-admin構建日志末尾出現 Builder Success 字樣、docker images里能看到新鏡像說明構建階段成功。接下來啟動容器-e傳入 API 地址和運行環境docker run -d -p 8010:8080 \ -e VITE_GLOB_API_URLhttps://api.example.com \ -e NODE_ENVproduction \ --name vben-admin vben-admin:prod?? 注意Vite 的VITE_變量在構建時就會被打進 bundle運行時-e只對 Node 類服務生效改 API 地址要在構建前寫進.env.production再重新 build。看到什么算成功瀏覽器打開http://localhost:8010出現登錄頁部署就算打通了如果白屏先docker logs vben-admin看報錯。讓它在生產環境跑得快能跑起來之后下一步是讓它跑得快以及讓不同環境的差異有地方可放。Nginx 緩存與反向代理關鍵配置在本地副本的 Nginx 配置里有 4 條規則直接決定生產環境的體驗官方 scripts/deploy/nginx.conf 已包含完整版下面是核心片段location / { root /usr/share/nginx/html; try_files $uri $uri/ /index.html; } location ~* \.(js|css|png|jpg|svg|ico)$ { expires 30d; } gzip on;root /usr/share/nginx/html;靜態資源根目錄必須和 Dockerfile 里COPY的目標路徑一致。try_files ... /index.htmlSPA 路由兜底刷新任何不存在的子路由都會回落到 index.html不 404。expires 30d帶 hash 的 js/css 文件名內容永不變可以放心讓瀏覽器緩存 30 天。gzip onNginx 壓縮文本資源后再下發記得補gzip_types覆蓋 css 和 js網絡傳輸體積大約縮到三分之一。緩存和壓縮生效后用戶二次訪問基本全是命中瀏覽器緩存首屏觀感就是下面這樣用 .env 文件隔離多環境差異不同環境的差異全部收斂到.env文件里。以生產環境為例變量名對照playground/.env.production的實際字段VITE_GLOB_API_URLhttps://api.example.com VITE_NITRO_MOCKfalse VITE_COMPRESSgzip三個變量分別控制接口地址、是否啟動 mock、打包壓縮策略none/gzip/brotli。新增一個環境只需在本地副本復制一份.env.production改名改變量值不用動任何代碼。docker-compose 編排多實例單容器跑通后用 compose 把它變成可管理的服務services: vben-admin: image: vben-admin:prod ports: - 8010:8080 environment: - NODE_ENVproduction restart: always volumes: - ./logs:/var/log/nginxvolumes把宿主機./logs掛到/var/log/nginx意義在于容器銷毀重建后 Nginx 的訪問日志和錯誤日志不丟。啟動命令一行搞定docker compose up -ddocker compose ps顯示服務 Up、宿主機出現logs目錄并開始寫入 Nginx 日志即代表編排生效。部署后最容易踩的 3 個坑構建和啟動都順利不代表生產環境穩了。下面 3 處最容易翻車提前知道能省掉半天排查時間。靜態資源 404→ 現象刷新頁面后 js/css 在瀏覽器里 404。原因nginx.conf 的root和 Dockerfile 里COPY的產物路徑對不上。一句話修復在本地副本里把兩處路徑對齊后重新 build。API 請求跨域→ 現象接口請求全報 CORS 錯誤。原因前端與 API 不同源且 OPTIONS 預檢沒有處理。一句話修復在 Nginx 的location /加Access-Control-Allow-Origin等響應頭官方 nginx.conf 已帶完整預檢邏輯直接用或讓后端配置 allowed origins。端口被占用→ 現象docker run立刻報 port is already allocated。原因宿主機 8010 被別的進程占了。一句話修復用netstat -tuln | grep 8010找到占用進程換一個空閑端口映射。把重復構建交給 CI/CD手動 build 一次沒問題每次發版都手動敲一遍就很折磨。把流程寫進一條 workflowpush 到 main 分支自動觸發云 runner 上安裝依賴并執行構建、產出鏡像最后到目標服務器docker run替換舊容器全程無人值守。官方倉庫已經有一條可直接參考的部署流程觸發條件和步驟都寫得很標準拿過來改部署目標即可。參考文件.github/workflows/deploy.yml一張鏡像、一份 Nginx 配置、一個 compose 文件就是 vue-vben-admin 容器化部署的全部資產這也是它能在一小時內上線生產的全部原因。兩個可以繼續深入的方向給容器加健康檢查定期 curl 登錄頁接口掛了自動重啟、配置 HTTPS 證書自動續期比如接 acme.sh 定時簽發。關鍵文件路徑部署腳本目錄scripts/deploy/、vite 構建配置playground/vite.config.ts、環境變量示例playground/.env.production【免費下載鏈接】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），僅供參考