原创
Docker运行nginx以及部署Vue项目的一些问题
温馨提示：
本文最后更新于 2020年02月24日，已超过 1,733 天没有更新。若文章内的图片失效（无法正常加载），请留言反馈或直接联系我。
拉取、部署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)》许可协议授权
热门推荐
关于我
会打篮球的程序猿
Talk is cheap, show me the code.
