原创

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做一个代理转发和跨域处理。如果前端代码和后台代码在一个服务器上,就不需要做代理转发和跨域处理。

参考文章

https://www.jianshu.com/p/575bf78caa9d

本文目录