「免費(fèi)開(kāi)源」基于Vue和Quasar的前端SPA項(xiàng)目crudapi后臺(tái)管理系統(tǒng)實(shí)戰(zhàn)之docker部署（八）
基于Vue和Quasar的前端SPA項(xiàng)目實(shí)戰(zhàn)之docker部署（八）
回顧
通過(guò)上一篇文章?基于Vue和Quasar的前端SPA項(xiàng)目實(shí)戰(zhàn)之業(yè)務(wù)數(shù)據(jù)（七）的介紹，crudapi-admin-web基本功能全部實(shí)現(xiàn)了，本文主要介紹前端打包和docker部署相關(guān)內(nèi)容。
簡(jiǎn)介
Docker是一個(gè)開(kāi)源的應(yīng)用容器引擎，讓開(kāi)發(fā)者可以打包他們的應(yīng)用以及依賴(lài)包到一個(gè)可移植的鏡像中，然后發(fā)布到任何流行的 Linux或Windows 機(jī)器上，也可以實(shí)現(xiàn)虛擬化。容器是完全使用沙箱機(jī)制，相互之間不會(huì)有任何接口。采用docker技術(shù)可以很方便地實(shí)現(xiàn)持續(xù)集成和交付CI/CD。
配置quasar.conf.js
build: {
vueRouterMode: 'history',
publicPath: '/crudapi/',
distDir: `dist/${ctx.modeName}/crudapi`
}
通常將前端打包之后的文件放在一個(gè)子目錄下，方便和其它系統(tǒng)集成，比如可以放在spring boot項(xiàng)目的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
構(gòu)建分為兩個(gè)階段：
- 利用node鏡像編譯打包
- 利用nginx鏡像暴露80端口，提供http服務(wù)
優(yōu)化： package.json放在第一步copy，目的是為了緩存，從而提高鏡像構(gòu)建速度，因?yàn)橥ǔＧ闆r下package.json不會(huì)頻繁修改，只要package.json不變，后面的npm install命令就不會(huì)重復(fù)構(gòu)建。
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中主要配置兩個(gè)location規(guī)則
- api部分轉(zhuǎn)發(fā)到http://demo.crudapi.cn，可以替換為其它有效地址
- 其它內(nèi)容永遠(yuǎn)訪問(wèn)/crudapi-admin-web/crudapi/index.html，vue內(nèi)部自動(dòng)處理路由
.dockerignore配置
.DS_Store .git .gitignore node_modules dist .quasar .vscode .dockerignore package-lock.json Dockerfile *.md
dockerignore排除的不需要的文件，避免構(gòu)建過(guò)程中copy無(wú)用文件。
docker命令
本地打包docker和運(yùn)行
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鏡像已經(jīng)自動(dòng)上傳到docker官網(wǎng)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
進(jìn)行驗(yàn)證
?訪問(wèn)?http://127.0.0.1/crudapi
小結(jié)
本文主要介紹了vue前端打包和docker部署相關(guān)內(nèi)容，到目前為止，crudapi-admin-web代碼已經(jīng)完成，后續(xù)會(huì)繼續(xù)優(yōu)化代碼，文檔也會(huì)持續(xù)更新。每一篇文章對(duì)應(yīng)的代碼，都打上了tag，命名規(guī)則為t1,t2..., 歡迎下載代碼學(xué)習(xí)和交流。
demo演示
官網(wǎng)地址：https://crudapi.cn
測(cè)試地址：https://demo.crudapi.cn/crudapi/login
附源碼地址
GitHub地址
https://github.com/crudapi/crudapi-admin-web
Gitee地址
https://gitee.com/crudapi/crudapi-admin-web
由于網(wǎng)絡(luò)原因，GitHub可能速度慢，改成訪問(wèn)Gitee即可，代碼同步更新。