「免費開源」基于Vue和Quasar的前端SPA項目crudapi后臺管理系統(tǒng)實戰(zhàn)之docker部署（八）
基于Vue和Quasar的前端SPA項目實戰(zhàn)之docker部署（八）
回顧
通過上一篇文章?基于Vue和Quasar的前端SPA項目實戰(zhàn)之業(yè)務數據（七）的介紹，crudapi-admin-web基本功能全部實現了，本文主要介紹前端打包和docker部署相關內容。
簡介
Docker是一個開源的應用容器引擎，讓開發(fā)者可以打包他們的應用以及依賴包到一個可移植的鏡像中，然后發(fā)布到任何流行的 Linux或Windows 機器上，也可以實現虛擬化。容器是完全使用沙箱機制，相互之間不會有任何接口。采用docker技術可以很方便地實現持續(xù)集成和交付CI/CD。
配置quasar.conf.js
build: {
vueRouterMode: 'history',
publicPath: '/crudapi/',
distDir: `dist/${ctx.modeName}/crudapi`
}
通常將前端打包之后的文件放在一個子目錄下，方便和其它系統(tǒng)集成，比如可以放在spring boot項目的resources/static/crudapi目錄下，避免放在根目錄，所以這里配置publicPath為crudapi。
Dockefile
FROM node:lts-alpine as builder COPY package.json /crudapi-admin-web/package.json WORKDIR /crudapi-admin-web RUN npm install COPY . /crudapi-admin-web/ WORKDIR /crudapi-admin-web RUN npm run build FROM nginx:latest WORKDIR /crudapi-admin-web COPY --from=builder /crudapi-admin-web/dist/spa . COPY ./docker/default.conf /etc/nginx/conf.d/default.conf EXPOSE 80
構建分為兩個階段：
- 利用node鏡像編譯打包
- 利用nginx鏡像暴露80端口，提供http服務
優(yōu)化： package.json放在第一步copy，目的是為了緩存，從而提高鏡像構建速度，因為通常情況下package.json不會頻繁修改，只要package.json不變，后面的npm install命令就不會重復構建。
nginx配置
server {
listen 80;
server_name localhost;
charset 'utf-8';
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /usr/share/nginx/html;
}
location ~ /api {
proxy_pass http://demo.crudapi.cn;
}
location / {
root /crudapi-admin-web;
index index.html index.htm;
try_files $uri $uri/ /crudapi/index.html;
}
}
default.conf中主要配置兩個location規(guī)則
- api部分轉發(fā)到http://demo.crudapi.cn，可以替換為其它有效地址
- 其它內容永遠訪問/crudapi-admin-web/crudapi/index.html，vue內部自動處理路由
.dockerignore配置
.DS_Store .git .gitignore node_modules dist .quasar .vscode .dockerignore package-lock.json Dockerfile *.md
dockerignore排除的不需要的文件，避免構建過程中copy無用文件。
docker命令
本地打包docker和運行
docker build -t crudapi-admin-web:latest . docker rm -f crudapi-admin-web docker run -d -p 80:80 --name crudapi-admin-web crudapi-admin-web:latest docker ps | grep crudapi-admin-web
最新的docker鏡像已經自動上傳到docker官網hubhttps://hub.docker.com/repository/docker/crudapi/crudapi-admin-web?
，直接pull也可以。
docker pull crudapi/crudapi-admin-web:latest docker tag crudapi/crudapi-admin-web:latest crudapi-nginx:latest
進行驗證
?訪問?小結
本文主要介紹了vue前端打包和docker部署相關內容，到目前為止，crudapi-admin-web代碼已經完成，后續(xù)會繼續(xù)優(yōu)化代碼，文檔也會持續(xù)更新。每一篇文章對應的代碼，都打上了tag，命名規(guī)則為t1,t2..., 歡迎下載代碼學習和交流。
demo演示
官網地址：https://crudapi.cn
測試地址：https://demo.crudapi.cn/crudapi/login
附源碼地址
GitHub地址
https://github.com/crudapi/crudapi-admin-web
Gitee地址
https://gitee.com/crudapi/crudapi-admin-web
由于網絡原因，GitHub可能速度慢，改成訪問Gitee即可，代碼同步更新。