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

相关推荐
爱学习饼34 分钟前
CentOS下安装配置JDK24和tomcat11
linux·运维·centos
Super Rookie39 分钟前
Tomcat 自动化脚本安装方案
运维·tomcat·自动化
qinxue72244 分钟前
Jenkins自动化配置--CICD流水线
运维·自动化·jenkins
wanhengidc2 小时前
什么是站群服务器
运维·服务器·网络·游戏·智能手机
琦琦琦baby3 小时前
VRRP技术重点总结
运维·网络·智能路由器·vrrp
筑梦之路3 小时前
深入linux的审计服务auditd —— 筑梦之路
linux·运维·服务器
陈说技术3 小时前
服务器CPU达到100%解决思路
运维·服务器
hi_link3 小时前
centos系统将/home分区的空间分配给/
linux·运维·centos
应用市场4 小时前
Linux驱动开发原理详解:从入门到实践
linux·运维·驱动开发
siriuuus4 小时前
Linux MySQL 多实例部署与配置实践
linux·运维·mysql