当前位置：首页 > article >正文

nginx部署时的路径配置问题

article 2024/11/15 12:18:54

背景

一直觉得程序员敲代码就行了，结果前端一打包部署就给我打回原形了。每回部署都失败，然后我都形成惯性了，一到nginx部署我就摇人，我都不好意思了。
这一次的问题是原前端代码的基础路径为‘/’，现在要改成‘/abc’，即原来访问首页路径是‘http://localhost/index’，现在变成了‘http://localhost/abc/index’，我们这是一个vite项目，在代码的配置文件的前缀中已经修改好了这个前缀，并且已经打包好了（其实我觉得这个应该只用在nginx的配置文件中修改，而不应该在代码的配置文件中修改，否则改一次前缀就要在代码的配置文件中改一下，然后重新打包，然后又在nginx的配置文件中修改一下。但是好处也有一个，就是打包好的文件都在名为abc的文件夹目录下，直接把这个abc文件夹复制到nginx的html目录下即可。鉴于我低劣的前端水平，就先不质疑这个了）。现在就是要修改ngxin的配置以适应新的路径，但我立刻就改错了。

解决

    # 前端资源(实际是，避免出现刷新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的根目录下打包后的路径。