原创
Docker运行nginx以及部署Vue项目的一些问题
温馨提示:
本文最后更新于 2020年02月24日,已超过 1,719 天没有更新。若文章内的图片失效(无法正常加载),请留言反馈或直接联系我。
拉取、部署nginx镜像
拉取镜像:
docker pull nginx:1.10
运行,目的是拷贝文件:
docker run -p 80:80 --name nginx \
-v /mydata/nginx/html:/usr/share/nginx/html \
-v /mydata/nginx/logs:/var/log/nginx \
-d nginx:1.10
拷贝文件至本机:
docker container cp nginx:/etc/nginx /mydata/nginx/
删除:
docker rm -f nginx
重新创建:
docker run -p 80:80 --name nginx \
-v /mydata/nginx/html:/usr/share/nginx/html \
-v /mydata/nginx/logs:/var/log/nginx \
-v /mydata/nginx/conf:/etc/nginx \
-d nginx:1.10
Vue部署问题
由于之前自己一直是在本地开发,开发完之后也只是执行npm run build直接放在指定的位置,并没有过多的考虑项目是如何在服务器上跑起来,这次是自己一个人负责从头搭建到部署到服务器上,所以开始考虑和更深入的了解这方面的知识。
在部署的时候首先遇到的问题是,在本地开发时我使用了vue-cli自动生成的proxyTable解决的代理转发和跨域问题,但是真正build出来放在服务器上时再去访问后台接口就会报404,因为前端代码和后台代码不在同一个服务器上,而且在服务器上没有做代理转发,在服务器上访问的接口是服务器的IP+接口地址,而不是后台的IP+接口地址,这样就造成了404,我使用的解决方式是使用nginx做的代理转发请求和后台修改跨域。因为nginx在转发代理使用时请求头部就会不起作用。
如何配置nginx做代理转发呢?
server {
#配置HTTP服务器监听的端口号,这里默认写为8880
listen 8880;
server_name 此处是你的服务器IP;
location / {
#替换下面的地址为您网页目录地址
add_header Access-Control-Allow-Origin *;
#该位置是你的网页目录地址,例如我的dist文件的位置是/home/user/dist
root /home/user/dist
index index.html index.htm;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
#下面配置Tomcat或WAS服务器的地址,服务程序会自动进行代理转发
#下面就是代理转发,当遇到请求中带有api时就换将api前面的内容,包括api,替换成下面的proxy_pass,proxy_pass地址输入的是后台接口的IP地址,比如我需要联调的后台接口地址是:http://10.120.189.181:8080/。
location ^~ /api/ {
proxy_pass http://10.120.189.181:8080/;
}
}
记住:vue项目部署的时候build出来的是一个静态文件,我们只需要使用nginx做一下指向,指向dist文件下的index.html即可。如果前端代码和后台代码不在一个服务器上就需要使用nginx做一个代理转发和跨域处理。如果前端代码和后台代码在一个服务器上,就不需要做代理转发和跨域处理。
参考文章
- 本文标签: Vue Docker
- 本文链接: http://www.lzhpo.com/article/104
- 版权声明: 本文由lzhpo原创发布,转载请遵循《署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)》许可协议授权