基于 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

构建分为两个阶段：

1. 利用 node 镜像编译打包
2. 利用 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 规定

1. api 局部转发到 http://demo.crudapi.cn，能够替换为其它无效地址
2. 其它内容永远拜访 /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

小结

本文次要介绍了 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 即可，代码同步更新。