Mac环境：Nginx入门

绝地灬酷狼 2023-10-04 17:21 6阅读 0赞

> Nginx是一款高性能的Web和反向代理服务器，今天我们就在MacOS（Mojave，版本10.14.6）环境下学习下Nginx。

一、安装、启动、重启、停止Nginx

Mac环境的安装比较简单，使用[Homebrew][]安装即可:

brew install nginx

安装后的路径如下：

/usr/local/Cellar/nginx
    /usr/local/etc/nginx

启动Nginx服务：

sudo nginx

验证下是否启动成功，在浏览器打开`http://localhost:8080/`，  
Nginx默认端口为`8080`，出现以下界面说明启动成功了：

![4f87d741dcfc3bfd7c8b6d21fd59ca0f.png][]

图1

我们新增个html页面：`hello.html`，页面内容为`Hello World`，将html文件拷贝到`/usr/local/var/www`目录下：

![58f5644dd8882368db2335ce21cfd62f.png][]

图2

修改配置：

![9ef7834effe410526322e6758a048d69.png][]

vim /usr/local/etc/nginx/nginx.conf

图3

重启服务：

sudo nginx -s reload

好了，我们成功地更改了欢迎页面~

当然，如果要停止服务执行以下命令先找到Nginx进程号，然后kill命令：

ps -ef|grep nginx 
    sudo kill -QUIT 进程号

二、Nginx的location映射规则

> **语法**：  
> `location [=|~|~*|^~] /uri/ { … }`  
> **说明**：  
> `=` 精确匹配；  
> `^~` ：以某个常规字符串开头；  
> `~` ：区分大小写的正则匹配；  
> `~*` ：不区分大小写的正则匹配；  
> `!` ：逻辑取反；  
> `/`：通用匹配；  
> **优先级（从高到低）**：  
> location = /a \{…\} \#精准匹配  
> location ^~ /a \{…\} \#前缀匹配，按最长前缀匹配  
> location ~ /a.\* \{…\} \#正则匹配（区分大小写）  
> location ~\* /a.\* \{…\} \#正则匹配（不区分大小写）  
> location /a \{…\} \#最长前缀匹配，按最长前缀匹配  
> location / \{…\} \#任何没有匹配成功的，都会匹配这里处理

**示例（host：localhost，port：8080为例）：**

1.  精准匹配 = "/login"，只有访问`http://localhost:8080/login`才能被匹配；  
    location = /login \{  
    \}
2.  以/static/为前缀的路径会被匹配，如：`http://localhost:8080/static/a.html`  
    location ^~ /static/ \{  
    \}  
    如果有另一个规则：  
    location ^~ /static/css/ \{  
    \}  
    且访问路径为：`http://localhost:8080/static/css/b.css`  
    则优先匹配规则`^~ /static/css/`，这就是按最长前缀匹配；
3.  以`gif|jpg|png|js|css`结尾的路径，区分大小写  
    location ~ .(gif|jpg|png|js|css)$ \{  
    \}  
    如果访问`http://localhost:8080/static/images/c.PNG`，不会匹配上，需要改成不区分大小写的规则：`~* \.(gif|jpg|png|js|css)`
4.  访问`http://localhost:8080/api/a` 会被匹配上，同样是按最长前缀匹配；  
    location /api \{  
    \}
5.  当其他规则都不满足时...  
    location /\{  
    \}

二、Nginx的反向代理

> **什么是反向代理？**  
> 反向代理（Reverse Proxy）实际运行方式是指以代理服务器来接受internet上的连接请求，然后将请求转发给内部网络上的服务器，并将从服务器上得到的结果返回给internet上请求连接的客户端，此时代理服务器对外就表现为一个服务器，反向代理实际是服务器的代理。

![9fd9c8c886b12f191e7c5701862cc68f.png][]

图4.反向代理

Nginx实现反向代理

首先，我们使用node创建一个server，访问地址为： `http://localhost:7001/`，返回内容为：`我被代理了`。

![0efdb8aadecc4e00a33ef0ce214967f1.png][]

var http = require('http');
    
    http.createServer(function (request, response) {
        response.writeHead(200, {'Content-Type': 'text/plain; charset=utf-8'});
        response.end('我被代理了');
    }).listen(7001);

然后，修改下n`ginx.conf`的配置，增加一个`location`：

![a4af3afc2d294a6fc6f12206b186c0ed.png][]

图5.nginx反向代理配置

我们通过`proxy_pass`将请求路径为`/node` 的请求转发到了`http://localhost:7001/`上。现在我们访问`http://localhost:8080/node`后成功返回`我被代理了`。

三、Nginx实践案例

*  动态资源与静态资源分离（前后端分离）  
    现在有很多前后端分离的项目，比如在我们访问`http://localhost:8080/`时访问网站主页，而访问`http://localhost:8080/api`时又能请求接口，即前端静态资源和后端分离。通过以上的反向代理实现起来很简单：
    
    ![c1a6c5897f9868fe29dcaf51e7154dd4.png][]
    
    图6.前后端分离
    
      
    `root` 指向前端静态资源路径。
 *  文件服务器

server {
            listen 8081;
            server_name localhost;
            charset utf-8;
            location /videos {
                root /Users/my_name/Desktop; #文件路径
                autoindex on; #文件列表功能打开
            }
        }

![1a4ceb95563daf7ad4b7eeb9f0da213b.png][]

[Homebrew]: https://links.jianshu.com/go?to=%255Bhttps%3A%2F%2Fbrew.sh%2F%255D%28https%3A%2F%2Fbrew.sh%2F%29
[4f87d741dcfc3bfd7c8b6d21fd59ca0f.png]: https://img-blog.csdnimg.cn/img_convert/4f87d741dcfc3bfd7c8b6d21fd59ca0f.png
[58f5644dd8882368db2335ce21cfd62f.png]: https://img-blog.csdnimg.cn/img_convert/58f5644dd8882368db2335ce21cfd62f.png
[9ef7834effe410526322e6758a048d69.png]: https://img-blog.csdnimg.cn/img_convert/9ef7834effe410526322e6758a048d69.png
[9fd9c8c886b12f191e7c5701862cc68f.png]: https://img-blog.csdnimg.cn/img_convert/9fd9c8c886b12f191e7c5701862cc68f.png
[0efdb8aadecc4e00a33ef0ce214967f1.png]: https://img-blog.csdnimg.cn/0efdb8aadecc4e00a33ef0ce214967f1.png
[a4af3afc2d294a6fc6f12206b186c0ed.png]: https://img-blog.csdnimg.cn/img_convert/a4af3afc2d294a6fc6f12206b186c0ed.png
[c1a6c5897f9868fe29dcaf51e7154dd4.png]: https://img-blog.csdnimg.cn/img_convert/c1a6c5897f9868fe29dcaf51e7154dd4.png
[1a4ceb95563daf7ad4b7eeb9f0da213b.png]: https://img-blog.csdnimg.cn/img_convert/1a4ceb95563daf7ad4b7eeb9f0da213b.png