nginx部署时的路径配置问题

背景

一直觉得程序员敲代码就行了,结果前端一打包部署就给我打回原形了。每回部署都失败,然后我都形成惯性了,一到nginx部署我就摇人,我都不好意思了。

这一次的问题是原前端代码的基础路径为'/',现在要改成'/abc',即原来访问首页路径是'http://localhost/index',现在变成了'http://localhost/abc/index',我们这是一个vite项目,在代码的配置文件的前缀中已经修改好了这个前缀,并且已经打包好了(其实我觉得这个应该只用在nginx的配置文件中修改,而不应该在代码的配置文件中修改,否则改一次前缀就要在代码的配置文件中改一下,然后重新打包,然后又在nginx的配置文件中修改一下。但是好处也有一个,就是打包好的文件都在名为abc的文件夹目录下,直接把这个abc文件夹复制到nginx的html目录下即可。鉴于我低劣的前端水平,就先不质疑这个了)。现在就是要修改ngxin的配置以适应新的路径,但我立刻就改错了。

解决

json 复制代码
    # 前端资源(实际是,避免出现刷新404,用/)
    location / {
        root   html;
        index  index.html index.htm;
        try_files  $uri $uri/ /abc/index.html /abc/lowcode/index.html;
        add_header 'Access-Control-Allow-Credentials' true;
        add_header 'Access-Control-Allow-Origin' * always;
        add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';
    
    }
    # 后端接口 
    location /abc/server {
        proxy_pass http://127.0.0.1:8081;
        proxy_set_header Host $host;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Real-IP $remote_addr;
        # 清除前缀
        rewrite ^/abc/server(/.*)$ $1 break; 
        add_header 'Access-Control-Allow-Credentials' true;
        add_header 'Access-Control-Allow-Origin' * always;
        add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';
    }

其实我主要是对nginx配置的各个字段不熟悉,上述这些字段我以前都看过,但是时间久了不看就不知道时干嘛的了。而且我对nginx这个技术也不是很熟悉,毕竟部署这个工作我也很少接触。

上述这段我当时首先就是在前端资源的location这里犯了错,我把这给改成了'/abc',然后我在index和try_files的文件前都加了'/abc'。其实location字段后面的这个路径是用来匹配的,大括号里的root指定了nginx的根目录,也就是我把打包后的dist目录里的东西复制到的地方,try_files是用来解决history路由不能跳转的问题,在vue-router官网有介绍 。try_files的路径和root目录是拼接在一起的,正好就对应了nginx的根目录下打包后的路径。

感受

感觉自己对这块还不是很熟,以后有时间还是要把这块好好学下。

参考

参考1
参考2

相关推荐
qq762118223 分钟前
Linux c 在内存中创建zip,最后写入测试
linux·运维·服务器
故事很腻i21 分钟前
安装elk
运维·elk·jenkins
华纳云IDC服务商33 分钟前
网站服务器频繁掉线的主要原因是什么
运维·服务器
小黄人软件35 分钟前
【部署python网站】宝塔面板 小目标2:实时搜索网上资源文件网站放在服务器上 用AI做一个作品,不断迭代。
运维·服务器
未来之窗软件服务39 分钟前
服务器运维(四)服务器漏洞扫描工具与审查——东方仙化神期
运维·服务器·仙盟创梦ide·东方仙盟·东方仙盟运维
云飞云共享云桌面42 分钟前
SolidWorks服务器多人使用方案
大数据·运维·服务器·前端·网络·电脑·制造
你疯了抱抱我42 分钟前
【H3C NX30Pro】光猫桥接并使用OpenWRT配置NAS端口映射;配置IPv6、IPv4公网直连内网服务器;
运维·服务器·网络·智能路由器·路由器
liyugang20151 小时前
MySQL数据库性能优化的七个关键策略与实践
运维
IT成长日记6 小时前
【Nginx开荒攻略】Nginx虚拟主机配置:从域名、端口到IP的完整指南
linux·运维·服务器·nginx·虚拟主机
taxunjishu7 小时前
DeviceNet 转 Modbus TCP 协议转换在 S7-1200 PLC化工反应釜中的应用
运维·人工智能·物联网·自动化·区块链