Nginx是一款高性能的Web和反向代理服務(wù)器，今天我們就在MacOS（Mojave，版本10.14.6）環(huán)境下學(xué)習(xí)下Nginx。

一、安裝、啟動(dòng)、重啟、停止Nginx

Mac環(huán)境的安裝比較簡(jiǎn)單，使用Homebrew安裝即可:

 brew install nginx 

安裝后的路徑如下：

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

啟動(dòng)Nginx服務(wù)：

sudo nginx

驗(yàn)證下是否啟動(dòng)成功，在瀏覽器打開(kāi)http://localhost:8080/，
Nginx默認(rèn)端口為8080，出現(xiàn)以下界面說(shuō)明啟動(dòng)成功了：

圖1

圖2

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

圖3

重啟服務(wù)：

sudo nginx -s reload

好了，我們成功地更改了歡迎頁(yè)面~

當(dāng)然，如果要停止服務(wù)執(zhí)行以下命令先找到Nginx進(jìn)程號(hào)，然后kill命令：

ps -ef|grep nginx 
sudo kill -QUIT 進(jìn)程號(hào)

二、Nginx的location映射規(guī)則

語(yǔ)法：
location [=|~|~*|^~] /uri/ { … }
說(shuō)明：
= 精確匹配；
^~ ：以某個(gè)常規(guī)字符串開(kāi)頭；
~ ：區(qū)分大小寫(xiě)的正則匹配；
~* ：不區(qū)分大小寫(xiě)的正則匹配；
! ：邏輯取反；
/：通用匹配；
優(yōu)先級(jí)（從高到低）：
location = /a {…} #精準(zhǔn)匹配
location ^~ /a {…} #前綴匹配，按最長(zhǎng)前綴匹配
location ~ /a.* {…} #正則匹配（區(qū)分大小寫(xiě)）
location ~* /a.* {…} #正則匹配（不區(qū)分大小寫(xiě)）
location /a {…} #最長(zhǎng)前綴匹配，按最長(zhǎng)前綴匹配
location / {…} #任何沒(méi)有匹配成功的，都會(huì)匹配這里處理

示例（host：localhost，port：8080為例）：

1. 精準(zhǔn)匹配 = "/login"，只有訪問(wèn)http://localhost:8080/login才能被匹配；
   location = /login {
   }

2. 以/static/為前綴的路徑會(huì)被匹配，如：http://localhost:8080/static/a.html
   location ^~ /static/ {
   }
   如果有另一個(gè)規(guī)則：
   location ^~ /static/css/ {
   }
   且訪問(wèn)路徑為：http://localhost:8080/static/css/b.css
   則優(yōu)先匹配規(guī)則^~ /static/css/，這就是按最長(zhǎng)前綴匹配；

3. 以gif|jpg|png|js|css結(jié)尾的路徑，區(qū)分大小寫(xiě)
   location ~ .(gif|jpg|png|js|css)$ {
   }
   如果訪問(wèn)http://localhost:8080/static/images/c.PNG，不會(huì)匹配上，需要改成不區(qū)分大小寫(xiě)的規(guī)則：~* \.(gif|jpg|png|js|css)

4. 訪問(wèn)http://localhost:8080/api/a 會(huì)被匹配上，同樣是按最長(zhǎng)前綴匹配；
   location /api {
   }

5. 當(dāng)其他規(guī)則都不滿足時(shí)...
   location /{
   }

二、Nginx的反向代理

什么是反向代理？
反向代理（Reverse Proxy）實(shí)際運(yùn)行方式是指以代理服務(wù)器來(lái)接受internet上的連接請(qǐng)求，然后將請(qǐng)求轉(zhuǎn)發(fā)給內(nèi)部網(wǎng)絡(luò)上的服務(wù)器，并將從服務(wù)器上得到的結(jié)果返回給internet上請(qǐng)求連接的客戶(hù)端，此時(shí)代理服務(wù)器對(duì)外就表現(xiàn)為一個(gè)服務(wù)器，反向代理實(shí)際是服務(wù)器的代理。

圖4.反向代理

Nginx實(shí)現(xiàn)反向代理

首先，我們使用node創(chuàng)建一個(gè)server，訪問(wèn)地址為： http://localhost:7001/，返回內(nèi)容為：我被代理了。

var http = require('http');

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

然后，修改下ginx.conf的配置，增加一個(gè)location：

圖5.nginx反向代理配置

我們通過(guò)proxy_pass將請(qǐng)求路徑為/node 的請(qǐng)求轉(zhuǎn)發(fā)到了http://localhost:7001/上。現(xiàn)在我們?cè)L問(wèn)http://localhost:8080/node后成功返回我被代理了。

三、Nginx實(shí)踐案例

• 動(dòng)態(tài)資源與靜態(tài)資源分離（前后端分離）
  現(xiàn)在有很多前后端分離的項(xiàng)目，比如在我們?cè)L問(wèn)http://localhost:8080/時(shí)訪問(wèn)網(wǎng)站主頁(yè)，而訪問(wèn)http://localhost:8080/api時(shí)又能請(qǐng)求接口，即前端靜態(tài)資源和后端分離。通過(guò)以上的反向代理實(shí)現(xiàn)起來(lái)很簡(jiǎn)單：
  

  圖6.前后端分離
  
  root 指向前端靜態(tài)資源路徑。

• 文件服務(wù)器

 server {
        listen 8081;
        server_name localhost;
        charset utf-8;
        location /videos {
            root /Users/my_name/Desktop; #文件路徑
            autoindex on; #文件列表功能打開(kāi)
        }
    }

圖7.文件服務(wù)器