docker 入门:vue 和可视化界面的部署,另附 ngxin 配置
对于后端开发的小伙伴,可以只了解后台服务的发布,但是如果搭建个人的项目或者做私活的话。前台的部署的也是离不开的话题。本文将介绍如何发布 vue 的前段项目。
这里楼主主要依赖 nginx 发布 vue。
1.安装发布 vue
老生常谈,首先需要使用 docker 安装 nginx。
1.查看镜像
2.拉取镜像
3.查看镜像
4.vue 打包
此时,我们需要将 vue 打包,需要执行打包命令,如果没有特殊修改请执行:
5.准备工作
1.新建文件夹
分别新建
/usr/local/nginx/system:前台包存放位置
/usr/local/nginx/conf:配置文件存放位置
/usr/local/nginx/log:日志文件存放位置
2.挂载 vue 包
新建/usr/local/nginx/system 文件夹(作为宿主机挂载到 docker 容器的文件夹),在 vue 打包的文件中获取 dist 文件,并将文件夹放于/usr/local/nginx/system 中。
3.挂载 nginx 配置
将 nginx.conf 复制到/usr/local/nginx/conf 中,下文附上 nginx 配置。
5.运行镜像
参数讲解:(ps 宿主机的文件夹需要新建)docker run --name nginx:容器名称
-d -p 80:80 将容器中的 80 端口,指定到宿主机的 80 端口。
--net=host:以 host 方式启动
-v /usr/local/nginx/conf/nginx.conf:/etc/nginx/nginx.conf :宿主机的/usr/local/nginx/conf/nginx.conf 文件映射到容器的/etc/nginx/nginx.conf,实际是以/usr/local/nginx/conf/nginx.conf 为配置文件启动。
-v /usr/local/nginx/log:/var/log/nginx:宿主机/usr/local/nginx/log 映射到容器的/var/log/nginx 存放 log 日志,与 nginx 搭配使用。
-v /usr/local/nginx/system:/usr/share/nginx/system :宿主机/usr/local/nginx/system 文件夹与容器/usr/share/nginx/system 映射,将 vue 的 dist 文件放入/usr/local/nginx/system,容器中 nginx.conf 指定跳转的目录为/usr/share/nginx/system。
nginx 镜像名称
上面的映射的流程是,在启动时/usr/local/nginx/conf/nginx.conf 会复制到/etc/nginx/nginx.conf 中,同理 docker 容器下 log 文件也会映射到/usr/local/nginx/log,/usr/share/nginx/system 会映射到 docker 容器的/usr/share/nginx/system 中。
2.总结
nginx 发布 vue 原理是当你在 web 浏览器中输入 xxxx/system 时(路径可以多种配置),nginx 会监听 web 的 80 端口。如果路径在配置有拦截,那么会到配置的文件路径中获取(上文配置 alias /usr/share/nginx/system/dist)。这样就能够获取到 vue 的前台静态文件了。
同时如果向上文这样配置也会通过全域的方式,配置单点登录。
评论