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