「免費開源」基于Vue和Quasar的crudapi前端SPA項目實戰之docker部署（八）

基于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-admin-web:latest

進行驗證

訪問 http://127.0.0.1/crudapi

小結

本文主要介紹了vue前端打包和docker部署相關內容，到目前為止，crudapi-admin-web代碼已經完成，后續會繼續優化代碼，文檔也會持續更新。每一篇文章對應的代碼，都打上了tag，命名規則為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即可，代碼同步更新。

API Docker JavaScript MySQL Vue

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。