nginx转发docker部署的vue项目

nginx转发 docker部署的vue项目

       上一篇跟大家分享了自动化部署vue项目，最终我们是服务器8083端口映射我们vue项目容器80端口，今天跟大家分享如何通过服务器的Nginx去转发我们的这个vue项目，同时针对我们的vue项目路由使用history模式，如何做修改。如果我们的vue项目路由使用history模式的话，访问其他页面会一直跳到首页，这时候需要针对镜像的nginx配置进行修改，修改如下

       一、新增nginx配置文件

       我们在vue项目下新增default.conf文件，配置如下

server {
    listen       80;
    server_name  localhost;

    location / {
        try_files $uri $uri/ /index.html;
        root   /usr/share/nginx/html;
        index  index.html index.htm;
    }
    #
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }
}

       二、修改Dockerfile镜像打包文件

       我们修改vue项目下Dockerfile文件，我们将上一步nginx配置文件映射到nginx镜像配置文件，配置如下

FROM nginx:1.15-alpine
COPY ./dist /usr/share/nginx/html
COPY default.conf /etc/nginx/conf.d/default.conf

到这一步，我们就实现了vue项目路由使用history模式下，nginx访问

       三、服务器nginx转发docker部署的vue项目

       我是通过服务器安装的nginx进行docker部署的vue项目，修改服务器的nginx配置文件，新增这一段配置

server {
      listen 80;
      server_name  vue.test.cn;

      location / {
         proxy_set_header  X-Real-IP  $remote_addr;
         proxy_set_header  X-Forwarded-For $proxy_add_x_forwarded_for;
         proxy_set_header Host $http_host;
         proxy_redirect off;
         proxy_pass http://127.0.0.1:8083;
      }
    }

添加完成后热加载nginx

 nginx -s reload

       然后我们就可以通过vue.test.cn进行访问我们的vue项目。