本文主要介紹了vue前端打包和docker部署相關内容,到目前為止,crudapi-admin-web代碼已經完成,後續會繼續優化代碼,文檔也會持續更新。每一篇文章對應的代碼,都打上了tag,命名規則為t1,t2..., 歡迎下載下傳代碼學習和交流。
基于Vue和Quasar的前端SPA項目實戰之docker部署(八)
回顧
通過上一篇文章 基于Vue和Quasar的前端SPA項目實戰之業務資料(七)的介紹,crudapi-admin-web基本功能全部實作了,本文主要介紹前端打包和docker部署相關内容。
簡介
Docker是一個開源的應用容器引擎,讓開發者可以打包他們的應用以及依賴包到一個可移植的鏡像中,然後釋出到任何流行的 Linux或Windows 機器上,也可以實作虛拟化。容器是完全使用沙箱機制,互相之間不會有任何接口。采用docker技術可以很友善地實作持續內建和傳遞CI/CD。
配置quasar.conf.js
build: {
vueRouterMode: 'history',
publicPath: '/crudapi/',
distDir: `dist/${ctx.modeName}/crudapi`
}
通常将前端打包之後的檔案放在一個子目錄下,友善和其它系統內建,比如可以放在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服務
優化:
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規則
- api部分轉發到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
進行驗證
通路 http://127.0.0.1/crudapi
小結
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即可,代碼同步更新。