经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » JavaScript » 查看文章
「免费开源」基于Vue和Quasar的前端SPA项目crudapi后台管理系统实战之docker部署(八)
来源:cnblogs  作者:crudapi  时间:2021/4/6 10:09:05  对本文有异议

基于Vue和Quasar的前端SPA项目实战之docker部署(八)

回顾

通过上一篇文章 基于Vue和Quasar的前端SPA项目实战之业务数据(七)的介绍,crudapi-admin-web基本功能全部实现了,本文主要介绍前端打包和docker部署相关内容。

简介

Docker是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的镜像中,然后发布到任何流行的 Linux或Windows 机器上,也可以实现虚拟化。容器是完全使用沙箱机制,相互之间不会有任何接口。采用docker技术可以很方便地实现持续集成和交付CI/CD。

配置quasar.conf.js

  1. build: {
  2. vueRouterMode: 'history',
  3. publicPath: '/crudapi/',
  4. distDir: `dist/${ctx.modeName}/crudapi`
  5. }

通常将前端打包之后的文件放在一个子目录下,方便和其它系统集成,比如可以放在spring boot项目的resources/static/crudapi目录下,避免放在根目录,所以这里配置publicPath为crudapi。

Dockefile

  1. FROM node:lts-alpine as builder
  2. COPY package.json /crudapi-admin-web/package.json
  3. WORKDIR /crudapi-admin-web
  4. RUN npm install
  5. COPY . /crudapi-admin-web/
  6. WORKDIR /crudapi-admin-web
  7. RUN npm run build
  8. FROM nginx:latest
  9. WORKDIR /crudapi-admin-web
  10. COPY --from=builder /crudapi-admin-web/dist/spa .
  11. COPY ./docker/default.conf /etc/nginx/conf.d/default.conf
  12. EXPOSE 80

构建分为两个阶段:

  1. 利用node镜像编译打包
  2. 利用nginx镜像暴露80端口,提供http服务

优化:
package.json放在第一步copy,目的是为了缓存,从而提高镜像构建速度,因为通常情况下package.json不会频繁修改,只要package.json不变,后面的npm install命令就不会重复构建。

nginx配置

  1. server {
  2. listen 80;
  3. server_name localhost;
  4. charset 'utf-8';
  5. error_page 500 502 503 504 /50x.html;
  6. location = /50x.html {
  7. root /usr/share/nginx/html;
  8. }
  9. location ~ /api {
  10. proxy_pass http://demo.crudapi.cn;
  11. }
  12. location / {
  13. root /crudapi-admin-web;
  14. index index.html index.htm;
  15. try_files $uri $uri/ /crudapi/index.html;
  16. }
  17. }

default.conf中主要配置两个location规则

  1. api部分转发到http://demo.crudapi.cn,可以替换为其它有效地址
  2. 其它内容永远访问/crudapi-admin-web/crudapi/index.html,vue内部自动处理路由

.dockerignore配置

  1. .DS_Store
  2. .git
  3. .gitignore
  4. node_modules
  5. dist
  6. .quasar
  7. .vscode
  8. .dockerignore
  9. package-lock.json
  10. Dockerfile
  11. *.md

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

docker命令

本地打包docker和运行

  1. docker build -t crudapi-admin-web:latest .
  2. docker rm -f crudapi-admin-web
  3. docker run -d -p 80:80 --name crudapi-admin-web crudapi-admin-web:latest
  4. docker ps | grep crudapi-admin-web

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

  1. docker pull crudapi/crudapi-admin-web:latest
  2. docker tag crudapi/crudapi-admin-web:latest crudapi-nginx:latest

进行验证

demo
访问 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即可,代码同步更新。

原文链接:http://www.cnblogs.com/crudapi/p/14614467.html

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号