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

1,560

这是我参与8月更文挑战的第22天,活动详情查看:8月更文挑战

对于后端开发的小伙伴,可以只了解后台服务的发布,但是如果搭建个人的项目或者做私活的话。前台的部署的也是离不开的话题。本文将介绍如何发布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的前台静态文件了。

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