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