基于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è)階段：

1. 利用node鏡像編譯打包
2. 利用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ī)則

1. api部分轉(zhuǎn)發(fā)到http://demo.crudapi.cn，可以替換為其它有效地址
2. 其它內(nèi)容永遠(yuǎn)訪(fǎng)問(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)證

demo

小結(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可能速度慢，改成訪(fǎng)問(wèn)Gitee即可，代碼同步更新。