前言

最近要给公司的新项目部署上线，虽然之前也部署过，但是还是对nginx不熟，捣鼓了很久才部署成功，总结下nginx的知识，方便后面查阅。

可能会有人说，nginx部署项目不是后端负责的吗？为什么需要前端来负责？

怎么说呢？可以让后端同事部署，但是你如果学会了，是不是又多了一项技能，以后在面试的时候也可以展示自己有这项技能。

正文

nginx

首先我们得找到nginx的配置文件nginx.conf放在哪里？

我们可以使用

js 复制代码

ps -ef | grep nginx

如果没找到还可以使用

js 复制代码

nginx -t // (如果需要管理员权限，就加sudo)

更改了nginx.conf后，可以先使用-t检测语法是否通过

通过了使用-s reload来重启nginx，这样你修改的nginx.conf配置才生效。

如果要关闭nginx则使用

js 复制代码

nginx -s stop // 快速关闭
nginx -s quit // 优雅关闭
taskkill /f /t /im nginx.exe  // window端
kill -QUIT  pid进程号  // mac端 pid进程号可以通过`ps -ef | grep nginx`查询

nginx字段解读

在nginx上部署项目，最重要是nginx.conf的配置文件要写对，下面来讲讲nginx里各个字段的解读。

location

这个字段是匹配不同的请求，进而做出对应的响应。

js 复制代码

    server {
        listen       80;
        server_name  localhost;
        location / {
            root /usr/web/static/;
        }
        location /vue3 {
            root /usr/web/static/;
        }
    }

访问http://localhost, 会跳转到/usr/web/static/目录，执行它下面的index文件。

访问http://localhost/vue3, 会跳转到/usr/web/static/vue3目录，执行它下面的index文件。

上面说的只是一种模式，它还有几种模式

js 复制代码

 location = /vue3 {}  // 精准匹配， 优先级最高
 location ^~ /vue3 {} // 前缀匹配
 location ~* /vue3 {} // 正则匹配，忽略大小写
 location ~ /vue3 {} //  正则匹配
 location /vue3 {} //  普通匹配， 优先级最低

优先级：精准匹配优先级最高，接着到前缀匹配，然后是正则匹配（如果多个都匹配，以定义顺序优先），最后是普通匹配。

具体匹配过程是这样：

提取非正则匹配的location（=，^~ , 普通），记住跟请求url路径匹配的最长字符串
如果请求url路径跟精准匹配（=）一致，则返回，否则继续匹配
如果最长字符串跟前缀匹配（^~）一致，则返回，否则继续匹配
如果最长字符串跟正则符合(无需一致)，则返回，否则继续匹配
最后返回普通匹配

举个例子：

js 复制代码

location  /test {
    default_type application/json; 
    return 200 '我是普通匹配';
}
location ^~ /tes {
    default_type application/json; 
    return 200 '我是前缀匹配'; 
}

访问http://localhost/test，跟请求url匹配最长的字符串是/test，这个字符串跟前缀匹配（^~）不一致，返回我是普通匹配

js 复制代码

location  /test {
    default_type application/json; 
    return 200 '我是普通匹配';
}
location ~ ^/tes {
    default_type application/json; 
    return 200 '我是正则匹配'; 
}

访问http://localhost/test，跟请求url匹配最长的字符串是/test，这个字符串跟正则匹配（~）匹配，返回我是正则匹配

js 复制代码

location ~ /test {
    default_type application/json; 
    return 200 '我是普通匹配1';
}
location *~ /test {
    default_type application/json; 
    return 200 '我是正则匹配2'; 
}

访问http://localhost/test/a，跟请求url匹配最长的字符串是/test，这个字符串跟正则匹配都匹配，以顺序优先，返回我是正则匹配1

js 复制代码

location = /test/a {
    default_type application/json; 
    return 200 '我是精准匹配';
}
location ~ /test/a {
    default_type application/json; 
    return 200 '我是正则匹配';
}

访问http://localhost/test/abc，路径是/test/abc,不符合精准匹配，符合正则匹配，返回我是正则匹配

root与alias

从字面上理解一个是根路径，一个是别名

写法如下：

js 复制代码

    server {
        listen       80;
        server_name  localhost;
        location ^~ /vue3/demo/ {
            root /usr/web/static/;
            
        }
    }

js 复制代码

        location ^~ /vue3/demo/ {
            alias /usr/web/static/;
        }

它们的区别：

你访问 http://localhost/vue3/demo/ 的时候

如果是root，则是去目录/usr/web/static/vue3/demo查找

如果是alias，则是去目录/usr/web/static/查找

就是说root会拼接你访问的url的相对路径，而alias则不会拼接。

另外alias最后面带上/，而root则可带可不带。

try_files

try_files是按照顺序从左到右边读取文件的，如果能读取到就返回，如果读取不到，则会重定向到最后一个参数。

js 复制代码

try_files $uri $uri/ /index.html;

这里$uri是指访问的路径
先看$uri是否为文件，是则返回
不是则继续，再看$uri/这个目录下是否有index文件
有则返回，否则重定向到/index.html

举个例子：

js 复制代码

location /vue3/demo {
    root /usr/web/static/;
    try_files $uri $uri/ /index.html;
}

比如访问http://localhost/vue3/demo时，$uri就是/vue3/demo，try_files会拼接root + $uri去读取文件或者文件夹（root + $uri/）

$uri: /usr/web/static/vue3/demo 看看demo是否为文件

$uri/: /usr/web/static/vue3/demo/ demo目录是否有index文件

如果你是vue项目，router用了history 模式，部署的时候都要配置这个（try_files $uri$ uri/ /index.html ），不然你二级路由（比如 /about ）刷新的时候会报404。

总结

今天把最近学到的nginx知识总结了一下，nginx还有很多用法，大家如果感兴趣，可以本地安装nginx来学习，也欢迎大家评论交流。

总结下最近学到的nginx知识

前言

正文

nginx

nginx字段解读

location

root与alias

try_files

总结