更新时间:2022-05-17 13:22:15
对于后端开发的小伙伴,可以只了解后台服务的发布,但是如果搭建个人的项目或者做私活的话。前台的部署的也是离不开的话题。本文将介绍如何发布vue的前段项目。
这里楼主主要依赖nginx发布vue。
老生常谈,首先需要使用docker安装nginx。
docker search nginx 复制代码
docker pull nginx 复制代码
docker images 复制代码
此时,我们需要将vue打包,需要执行打包命令,如果没有特殊修改请执行:
npm run build 复制代码
1.新建文件夹
分别新建
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; } } 复制代码
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:容器名称
上面的映射的流程是,在启动时/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中。
nginx发布vue原理是当你在web浏览器中输入xxxx/system时(路径可以多种配置),nginx会监听web的80端口。如果路径在配置有拦截,那么会到配置的文件路径中获取(上文配置alias /usr/share/nginx/system/dist)。这样就能够获取到vue的前台静态文件了。
同时如果向上文这样配置也会通过全域的方式,配置单点登录。