写点什么

「免费开源」基于 Vue 和 Quasar 的前端 SPA 项目 crudapi 后台管理系统实战之 docker 部署(八)

用户头像
crudapi
关注
发布于: 2021 年 04 月 13 日
「免费开源」基于Vue和Quasar的前端SPA项目crudapi后台管理系统实战之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-webRUN 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.gitignorenode_modulesdist.quasar.vscode.dockerignorepackage-lock.jsonDockerfile*.md
复制代码


dockerignore 排除的不需要的文件,避免构建过程中 copy 无用文件。

docker 命令

本地打包 docker 和运行


docker build -t crudapi-admin-web:latest .docker rm -f crudapi-admin-webdocker run -d -p 80:80 --name crudapi-admin-web crudapi-admin-web:latestdocker ps | grep crudapi-admin-web
复制代码


最新的 docker 镜像已经自动上传到 docker 官网 hubhttps://hub.docker.com/repository/docker/crudapi/crudapi-admin-web,直接 pull 也可以。


docker pull crudapi/crudapi-admin-web:latestdocker 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 即可,代码同步更新。

发布于: 2021 年 04 月 13 日阅读数: 25
用户头像

crudapi

关注

crudapi是crud+api组合,表示增删改查接口 2019.06.19 加入

使用crudapi可以告别枯燥无味的增删改查代码,让您更加专注业务,节约大量成本,从而提高工作效率。crudapi的目标是让处理数据变得更简单!官网:https://crudapi.cn 演示:https://demo.crudapi.cn/crudapi/login

评论

发布
暂无评论
「免费开源」基于Vue和Quasar的前端SPA项目crudapi后台管理系统实战之docker部署(八)