Nginx配置文件踩坑

前端项目部署配置 Nginx

1. 首先修改 baseURL

let requests = axios.create({
    //基础路径,发请求URL携带api
    baseURL: "/api",
});

下面是 Nginx 常见的命令

// 编辑配置文件
cd /usr/local/nginx/conf
vim nginx.conf
// 重启Nginx
cd /usr/local/nginx/sbin
./nginx -s reload
// 启动Nginx
cd /usr/local/nginx/sbin
./nginx

2. 将以下内容拷贝进配置文件，注意看以下注释信息进行理解：

server {
    listen 8081; # 前端项目的端口
    server_name localhost; # 服务器地址或绑定域名

    location / {
        root /usr/share/nginx/html/dist; # dist包存放的路径
        index index.html index.htm;
    }

    location /api/ {
        proxy_pass http://ip:port/;
        # 当访问路径包含/api时，进行代理跳转。
        # 举个栗子：访问的是 http://ip:port/api/user/login
        # 则会被代理为 http://ip:port/user/login
    }
    # 再举个栗子
    location /api/ {
        proxy_pass http://ip:port;
        # 注意：比上面的少一个 '/'
        # 访问的是 http://ip:port/api/user/login
    }
    # 再举个栗子
    location /api/ {
        proxy_pass http://ip:port/test/;
        # 访问的是 http://ip:port/test/user/login
        # 如果最后少了 '/' ，就会代理到 http://ip:port/testuser/login
    }
    error_page 500 502 503 504 /50x.html;
    location = /50x.html {
        root html;
    }
}

总结：在 nginx 中配置 proxy_pass 时，如果在 proxy_pass 后面的 url 加 ‘/‘ ，相当于是绝对根路径，则 nginx 不会把 location 中匹配的路径部分代理走;如果没有 ‘/‘ ，则会把匹配的路径部分给代理走。
参考文章：https://blog.csdn.net/wyl9527/article/details/89671506

location URI 结尾带不带 /

参考文章：https://juejin.cn/post/7044438248495513614

关于 URI 尾部的  /  有三点也需要说明一下。第一点与 location 配置有关，其他两点无关。

location 中的字符有没有  /  都没有影响。也就是说  /homepage/  和  /homepage  是一样的。
如果 URI 结构是  https://domain.com/  的形式，尾部有没有  /  都不会造成重定向。因为浏览器在发起请求的时候，默认加上了  / 。虽然很多浏览器在地址栏里也不会显示  / 。
如果 URI 的结构是  https://domain.com/homepage/ 。尾部如果缺少  /  将导致重定向。因为根据约定，URL 尾部的  /  表示目录，没有  /  表示文件。所以访问  /homepage/  时，服务器会自动去该目录下找对应的默认文件。如果访问  /homepage  的话，服务器会先去找  homepage  文件，找不到的话会将  homepage  当成目录，重定向到  /homepage/ ，去该目录下找默认文件。

补充：location 指令说明

参考文章：https://developer.aliyun.com/article/898207

我们看下 Location 的具体语法：

location [ = | ~ | ~* | ^~ ] uri { ... }

重点看方括号中的 [ = | ~ | * | ^ ]，其中 | 分隔的内容表示你可能会用到的语法，其中：

• = 表示精确匹配，比如：

location = /test {
    return 200 "hello";
}

• /test ok

• /test/ not ok

• /test2 not ok

• /test/2 not ok

• ~ 表示区分大小写的正则匹配，比如：

location ~ ^/test\$ {
[ configuration ]
}

• /test ok

• /Test not ok

• /test/ not ok

• /test2 not ok

• ~_ 表示不区分大小写的正则匹配
  location ~_ ^/test$ {
  [ configuration ]
  }

• /test ok

• /Test ok

• /test/ not ok

• /test2 not ok

• ^~ 表示 uri 以某个字符串开头
  location ^~ /images/ {
  [ configuration ]
  }

• /images/1.gif ok

而当你不使用这些语法的时候，只写 uri 的时候：
/ 表示通用匹配：
location / {
[ configuration ]
}

• /index.html ok

location /test {
[ configuration ]
}

• /test ok

• /test2 ok

• /test/ ok

location 的定义分为两种

• 前缀字符串（prefix(前缀) string(字符串)）
• 正则表达式（regular expression(表达)），具体为前面带 ~* 和 ~ 修饰符的
  而匹配 location 的顺序为：

1. 检查使用前缀字符串的 locations，在使用前缀字符串的 locations 中选择最长匹配的，并将结果进行储存
2. 如果符合带有 = 修饰符的 URI，则立刻停止匹配
3. 如果符合带有 ^~ 修饰符的 URI，则也立刻停止匹配。
4. 然后按照定义文件的顺序，检查正则表达式，匹配到就停止
5. 当正则表达式匹配不到的时候，使用之前储存的前缀字符串

再总结一下就是

在顺序上，前缀字符串顺序不重要，按照匹配长度来确定，正则表达式则按照定义顺序。
在优先级上，= 修饰符最高，^~ 次之，再者是正则，最后是前缀字符串匹配。