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';
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值