docker 入门：vue 和可视化界面的部署，另附 ngxin 配置

对于后端开发的小伙伴，可以只了解后台服务的发布，但是如果搭建个人的项目或者做私活的话。前台的部署的也是离不开的话题。本文将介绍如何发布 vue 的前段项目。

这里楼主主要依赖 nginx 发布 vue。

1.安装发布 vue

老生常谈，首先需要使用 docker 安装 nginx。

1.查看镜像

docker search nginx  

2.拉取镜像

docker pull nginx 

3.查看镜像

docker images

4.vue 打包

此时，我们需要将 vue 打包，需要执行打包命令，如果没有特殊修改请执行：

npm run build

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 配置。

worker_processes  1; events {    worker_connections  1024;}  http {    include       mime.types;    default_type  application/octet-stream;      #指定日志路径     access_log /var/log/nginx/access.log;     error_log /var/log/nginx/error.log;     sendfile        on;     keepalive_timeout  65;     server {        listen       80;        server_name  localhost;         #charset koi8-r;         #access_log  logs/host.access.log  main;         location ^~/system { #当访问路径为 ip/system时 会访问/usr/share/nginx/system/dist下的静态文件 然后静态文件会调用接口 ajax完成              alias /usr/share/nginx/system/dist; #指定dist文件存放路径                  index index.html;            try_files $uri $uri/ /system/index.html;        }         error_page   500 502 503 504  /50x.html;        location = /50x.html {            root   html;        }    }

5.运行镜像

docker run --name nginx -d -p 80:80 --net=host -v /usr/local/nginx/conf/nginx.conf:/etc/nginx/nginx.conf  -v /usr/local/nginx/log:/var/log/nginx  -v /usr/local/nginx/system:/usr/share/nginx/system nginx

参数讲解：（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 的前台静态文件了。

同时如果向上文这样配置也会通过全域的方式，配置单点登录。