docker部署vue的一些坑

本次部署使用Tomcat运行Java服务，docker安装nginx运行vue项目的方式。

过程中碰到一些坑，简单记录一下。

贴一张nginx.conf中server的配置，80端口又占用，所以改为88。以后可能会部署多个项目，所以用路径区分项目的方式放置文件。用反向代理指定服务端地址。

server {
    listen       88;
    server_name  localhost;

    #access_log  /var/log/nginx/host.access.log  main;

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
    }
    
    location /tt/ {
        root   /usr/share/nginx/html/;    #这里写vue项目打包好的dist文件的地址
        index  index.html index.htm;
     }
    location /yygsgxc/ {
        root   /usr/share/nginx/html/;    #这里写vue项目打包好的dist文件的地址
        try_files  $uri $uri/  @router;   #刷新页面配置
        index  index.html index.htm;
     }

        location @router {
            rewrite ^.*$ /yygsgxc/index.html;
        }


        location /yygsgxcprod-api/ {
		    proxy_redirect off;
    		proxy_pass_header Server;
    		proxy_set_header X-Scheme $scheme;
		    proxy_set_header Host $http_host;
    		proxy_set_header X-Real-IP $remote_addr;
    		proxy_set_header x-Forwarded-For $proxy_add_x_forwarded_for;
    		proxy_pass http://10.204.170.210:9080/;
        }


    #error_page  404              /404.html;

    # redirect server error pages to the static page /50x.html
    #
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }

}	

页面指向

root指令 设置了 静态根目录 为 html。
index指令 设置了 目录的默认文件 为 index.html。
try_files指令 设置了 文件查找规则 为 $uri $uri/ /index.html。即3个规则，先从 $uri 查找，再从 $uri/ 目录中查找，最后查找 /index.html。

反向代理

（1）$http_host：代理服务器本身IP。

（2）$remote_addr：前一节点的IP，并不一定是用户的真实IP。

（3）$proxy_host：代理服务器请求的host，即后端服务器/源站的IP，后端服务器有可能还是代理服务器。

（4）$proxy_port：代理服务器请求的后端服务器的端口。

（5）$http_x_real_ip：获取的是前一节点的X-Real-IP的值。

（6）$proxy_add_x_forwarded_for：获取的是前一节点的X-Forwarded-For的值。

（7）proxy_redirect off;  关闭重定向

（8）proxy_pass http://10.204.170.210:9080/; docker内部的localhost和外部的不一样，所以指向服务端直接用ip不能用localhost

router.js
export default new Router({
  mode: 'history', // 去掉url中的#
  base: '/yygsgxc/',
  scrollBehavior: () => ({ y: 0 }),
  routes: constantRoutes
})
base
类型: string 
默认值: "/"
应用的基路径。例如，如果整个单页应用服务在 /app/ 下，然后 base 就应该设为 "/app/"

vue.config.js

// 例如 https://www.ruoyi.vip/。如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。例如，如果你的应用被部署在 https://www.ruoyi.vip/admin/，则设置 baseUrl 为 /admin/。
publicPath: process.env.NODE_ENV === "production" ? "/yygsgxc/" : "/",

.env.production

# 前端请求路径/生产环境
VUE_APP_BASE_API = '/yygsgxcprod-api'

 如果代码中有 location.href 需要根据文件名进行调整，否则会失败例如

location.href = '/index'; =》  location.href = '/yygsgxc/index';