基于Vue和Quasar的前端SPA项目实战之docker部署（八）#回顾
通过上一篇文章 基于Vue和Quasar的前端SPA项目实战之业务数据（七）的介绍，crudapi-admin-web基本功能全部实现了，本文主要介绍前端打包和docker部署相关内容。
#简介
Docker是一个开源的应用容器引擎，让开发者可以打包他们的应用以及依赖包到一个可移植的镜像中，然后发布到任何流行的 Linux或Windows 机器上，也可以实现虚拟化。容器是完全使用沙箱机制，相互之间不会有任何接口。采用docker技术可以很方便地实现持续集成和交付CI/CD。
#配置quasar.conf.jsbuild: { vueRouterMode: 'history', publicPath: '/crudapi/', distDir: `dist/${ctx.modeName}/crudapi`}
通常将前端打包之后的文件放在一个子目录下，方便和其它系统集成，比如可以放在spring boot项目的resources/static/crudapi目录下，避免放在根目录，所以这里配置publicPath为crudapi。
#DockefileFROM node:lts-alpine as builderCOPY package.json /crudapi-admin-web/package.jsonWORKDIR /crudapi-admin-webRUN npm installCOPY . /crudapi-admin-web/WORKDIR /crudapi-admin-webRUN npm run buildFROM nginx:latestWORKDIR /crudapi-admin-webCOPY --from=builder /crudapi-admin-web/dist/spa .COPY ./docker/default.conf /etc/nginx/conf.d/default.confEXPOSE 80
构建分为两个阶段：
利用node镜像编译打包
利用nginx镜像暴露80端口，提供http服务
优化： package.json放在第一步copy，目的是为了缓存，从而提高镜像构建速度，因为通常情况下package.json不会频繁修改，只要package.json不变，后面的npm install命令就不会重复构建。
#
通过上一篇文章 基于Vue和Quasar的前端SPA项目实战之业务数据（七）的介绍，crudapi-admin-web基本功能全部实现了，本文主要介绍前端打包和docker部署相关内容。
#简介
Docker是一个开源的应用容器引擎，让开发者可以打包他们的应用以及依赖包到一个可移植的镜像中，然后发布到任何流行的 Linux或Windows 机器上，也可以实现虚拟化。容器是完全使用沙箱机制，相互之间不会有任何接口。采用docker技术可以很方便地实现持续集成和交付CI/CD。
#配置quasar.conf.jsbuild: { vueRouterMode: 'history', publicPath: '/crudapi/', distDir: `dist/${ctx.modeName}/crudapi`}
通常将前端打包之后的文件放在一个子目录下，方便和其它系统集成，比如可以放在spring boot项目的resources/static/crudapi目录下，避免放在根目录，所以这里配置publicPath为crudapi。
#DockefileFROM node:lts-alpine as builderCOPY package.json /crudapi-admin-web/package.jsonWORKDIR /crudapi-admin-webRUN npm installCOPY . /crudapi-admin-web/WORKDIR /crudapi-admin-webRUN npm run buildFROM nginx:latestWORKDIR /crudapi-admin-webCOPY --from=builder /crudapi-admin-web/dist/spa .COPY ./docker/default.conf /etc/nginx/conf.d/default.confEXPOSE 80
构建分为两个阶段：
利用node镜像编译打包
利用nginx镜像暴露80端口，提供http服务
优化： package.json放在第一步copy，目的是为了缓存，从而提高镜像构建速度，因为通常情况下package.json不会频繁修改，只要package.json不变，后面的npm install命令就不会重复构建。
#
