nginx转发 docker部署的vue项目

docker部署的vue项目，可以 ip:端口访问
想实现 ip/项目名 这种访问形式
ip:192.168.2.232
端口:9010
项目名：recruit
1.docker部署vue
Dockerfile

FROM nginx
ADD default.conf  /etc/nginx/conf.d/
COPY dist/ /usr/share/nginx/html/recruit

default.conf

server {
    listen       80;
    listen  [::]:80;
    server_name  localhost;


    location /recruit {
        root   /usr/share/nginx/html/;
        index  index.html index.htm;
    }

    #dsfsa    error_page  404              /404.html;

    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }

}

vue项目中，在根目录添加一个vue.conf.js,有的就不用加了

module.exports = {
    publicPath: '/recruit'
}

这个publicPath，就是部署访问的路径，这个路径，和dockerfile中 COPY后面的目录一样，也和nginx配置中default.conf 监听的一样。

我使用的是gitlab-runner实现自动部署，或者打成镜像后， 运行时 -p 9010:80
因为nginx内部是监听的80端口，外部访问9010端口

docker跑起来之后，首先确保 ip:端口/项目名，我这个就是 192.168.2.232:9010/recruit能够访问，我这个就出现了304，后来把router中的routes 这个path去掉了（开发时访问的路径）。

然后就是外部nginx配置了

  location /recruit {
        proxy_pass http://192.168.2.232:9010/recruit;
   }

这样就可以了，首先一定要确保这个路径是能访问的。