基于Vue和Quasar的前端SPA项目实战docker部署（八）通过上一篇文章回顾基础关于Vue和Quasar的前端SPA项目实战业务资料（7）介绍，crudapi-admin-web的基本功能都实现了，本文主要介绍前端打包和docker部署相关内容。简介Docker是一个开源的应用程序容器引擎，它允许开发人员将他们的应用程序和依赖项打包成一个可移植的镜像，然后将它们分发到任何流行的Linux或Windows机器上，或者实现虚拟化。容器完全使用沙箱机制，它们之间不会有任何接口。使用docker技术可以轻松实现持续集成，交付CI/CD。配置quasar.conf.jsbuild:{vueRouterMode:'history',publicPath:'/crudapi/',distDir:`dist/${ctx.modeName}/crudapi`}通常把前端打包好的文件放在一个子目录下，以便于与其他系统集成。比如可以放在springboot项目的resources/static/crudapi目录下，避免放在根目录下，所以这里配置publicPath为crudapi。DockefileFROMnode:lts-alpine作为构建器COPYpackage.json/crudapi-admin-web/package.jsonWORKDIR/crudapi-admin-webRUNnpminstallCOPY./crudapi-admin-web/WORKDIR/crudapi-admin-webRUNnpmrunbuildFROMnginx:latestWORKDIR/crudapi-admin-webCOPY--from=builder/crudapi-admin-web/dist/spa.COPY./docker/default.conf/etc/nginx/conf.d/default.confEXPOSE80构建分为两阶段：使用node镜像编译打包并使用nginx镜像暴露80端口提供http服务优化：第一步复制package.json，目的是缓存，提高镜像构建速度，因为通常package.json不会频繁修改，只要package.json保持不变，后续的npminstall命令就不会重复构建。nginx配置服务器{listen80;服务器名称本地主机；字符集'utf-8'；error_page500502503504/50x.html;location=/50x.html{root/usr/share/nginx/html;}location~/api{proxy_passhttp://demo.crudapi.cn;}location/{root/crudapi-admin-web;indexindex.htmlindex.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.gitignorenode_modulesdist.quasar.vscode.dockerignorepackage-lock.jsonDockerfile*排除的不需要的文件.mddockerignore以避免在构建过程中复制无用的文件。docker命令在本地打包docker并运行dockerbuild-tcrudapi-admin-web:latest.dockerrm-fcrudapi-admin-webdockerrun-d-p80:80--namecrudapi-admin-webcrudapi-admin-网站：最新dockerps|grepcrudapi-admin-web最新的docker镜像已经自动上传到docker官网hubhttps://hub.docker.com/repository/docker/crudapi/crudapi-admin-web，也可以直接pull。dockerpullcrudapi/crudapi-admin-web:latestdockertagcrudapi/crudapi-admin-web:latestcrudapi-nginx:latest用于验证访问http://127.0.0.1/crudapi总结本文主要介绍vue前端打包和dockerdeployment内容，至此，crudapi-admin-web代码已经完成，代码会继续优化，文档也会持续更新。每篇文章对应的代码都有标注，命名规则为t1,t2...，欢迎下载代码学习交流。Demo演示官网地址：https://crudapi.cn测试地址：https://demo.crudapi.cn/crudapi/login附源码地址GitHub地址https://github.com/crudapi/crudapi-admin-webGitee地址https://gitee.com/crudapi/crudapi-admin-web由于网络原因，GitHub可能会比较慢，改访问Gitee即可，代码会同步更新。
