Nginx

Nginx(engine x) 是一個高性能的HTTP和反向代理web服務(wù)器，同時也提供了IMAP/POP3/SMTP服務(wù)。其將源代碼以類BSD許可證的形式發(fā)布，因它的穩(wěn)定性、豐富的功能集、簡單的配置文件和低系統(tǒng)資源的消耗而聞名。

正向代理與反向代理

代理是在服務(wù)器和客戶端之間假設(shè)的一層服務(wù)器，代理將接收客戶端的請求并將它轉(zhuǎn)發(fā)給服務(wù)器，然后將服務(wù)端的響應(yīng)轉(zhuǎn)發(fā)給客戶端。

正向代理
正向代理，意思是一個位于客戶端和原始服務(wù)器(origin server)之間的服務(wù)器，為了從原始服務(wù)器取得內(nèi)容，客戶端向代理發(fā)送一個請求并指定目標(biāo)(原始服務(wù)器)，然后代理向原始服務(wù)器轉(zhuǎn)交請求并將獲得的內(nèi)容返回給客戶端。
1、正向代理是為我們服務(wù)的，即為客戶端服務(wù)的，客戶端可以根據(jù)正向代理訪問到它本身無法訪問到的服務(wù)器資源。
2、正向代理對我們是透明的，對服務(wù)端是非透明的，即服務(wù)端并不知道自己收到的是來自代理的訪問還是來自真實(shí)客戶端的訪問。

反向代理
反向代理（Reverse Proxy）方式是指以代理服務(wù)器來接受internet上的連接請求，然后將請求轉(zhuǎn)發(fā)給內(nèi)部網(wǎng)絡(luò)上的服務(wù)器，并將從服務(wù)器上得到的結(jié)果返回給internet上請求連接的客戶端，此時代理服務(wù)器對外就表現(xiàn)為一個反向代理服務(wù)器。
1、反向代理是為服務(wù)端服務(wù)的，反向代理可以幫助服務(wù)器接收來自客戶端的請求，幫助服務(wù)器做請求轉(zhuǎn)發(fā)，負(fù)載均衡等。
2、反向代理對服務(wù)端是透明的，對我們是非透明的，即我們并不知道自己訪問的是代理服務(wù)器，而服務(wù)器知道反向代理在為他服務(wù)。

為什么需要Nginx反向代理
使用反向代理最主要的兩個原因： 1）安全及權(quán)限?？梢钥闯?，使用反向代理后，用戶端將無法直接通過請求訪問真正的內(nèi)容服務(wù)器，而必須首先通過Nginx?？梢酝ㄟ^在Nginx層上將危險或者沒有權(quán)限的請求內(nèi)容過濾掉，從而保證了服務(wù)器的安全。 2）負(fù)載均衡。例如一個網(wǎng)站的內(nèi)容被部署在若干臺服務(wù)器上，可以把這些機(jī)子看成一個集群，那么Nginx可以將接收到的客戶端請求“均勻地”分配到這個集群中所有的服務(wù)器上（內(nèi)部模塊提供了多種負(fù)載均衡算法），從而實(shí)現(xiàn)服務(wù)器壓力的負(fù)載均衡。此外，nginx還帶有健康檢查功能（服務(wù)器心跳檢查），會定期輪詢向集群里的所有服務(wù)器發(fā)送健康檢查請求，來檢查集群中是否有服務(wù)器處于異常狀態(tài)，一旦發(fā)現(xiàn)某臺服務(wù)器異常，那么在以后代理進(jìn)來的客戶端請求都不會被發(fā)送到該服務(wù)器上（直到后面的健康檢查發(fā)現(xiàn)該服務(wù)器恢復(fù)正常），從而保證客戶端訪問的穩(wěn)定性。

前端可以用Nginx做些什么

1. 快速實(shí)現(xiàn)簡單的訪問限制 經(jīng)常會遇到希望網(wǎng)站讓某些特定用戶的群體（比如只讓公司內(nèi)網(wǎng)）訪問，或者控制某個uri不讓人訪問。Nginx配置如下：

location / {
  deny  192.168.1.100;
  allow 192.168.1.10/200; 
  allow 10.110.50.16; 
  deny  all;   
}

其實(shí)deny和allow是ngx_http_access_module模塊（已內(nèi)置）中的語法。采用的是從上到下匹配方式，匹配到就跳出不再繼續(xù)匹配。上述配置的意思就是，首先禁止192.168.1.100訪問，然后允許192.168.1.10-200 ip段內(nèi)的訪問（排除192.168.1.100），同時允許10.110.50.16這個單獨(dú)ip的訪問，剩下未匹配到的全部禁止訪問。實(shí)際生產(chǎn)中，經(jīng)常和ngx_http_geo_module模塊（可以更好地管理ip地址表，已內(nèi)置）配合使用。

2. 解決跨域 在眾多的解決跨域方式中， 都不可避免的都需要服務(wù)端進(jìn)行支持， 使用Nginx可以純前端解決請求跨域問題。 特別是在前后端分離調(diào)試時， 經(jīng)常需要在本地起前端工程， 接口希望拉取服務(wù)端的實(shí)際數(shù)據(jù)而不是本地的mock。 而如果本地程序直接訪問遠(yuǎn)程接口， 肯定會遇到跨域問題?，F(xiàn)在前端成熟的做法，一般是把node proxy server集成進(jìn)來。事實(shí)上，用Nginx同樣可以解決問題，甚至可以應(yīng)用于線上。 本地起一個nginx server。server_name是mysite-base.com，比如現(xiàn)在需要請求線上www.kaola.com域下的線上接口 www.kaola.com/getPCBanner… 的數(shù)據(jù)，當(dāng)在頁面里直接請求，瀏覽器會報錯，為了繞開瀏覽器的跨域安全限制，[現(xiàn)在需要將請求的域名改成mysite-base.com。同時約定一個url規(guī)則來表明代理請求的身份，然后Nginx通過匹配該規(guī)則，將請求代理回原來的域。Nginx配置如下：

#請求跨域，這里約定代理請求url path是以/apis/開頭
    location ^~/apis/ {
        # 這里重寫了請求，將正則匹配中的第一個()中$1的path，拼接到真正的請求后面，并用break停止后續(xù)匹配
        rewrite ^/apis/(.*)$ /$1 break;
        proxy_pass https://www.kaola.com/;
    }  

在頁面代碼里，把請求url換成http://mysite-base.com/apis/getPCBannerList.html 。這樣就可以正常請求到數(shù)據(jù)。 這樣其實(shí)是通過nginx，用類似于hack的方式規(guī)避掉了瀏覽器跨域限制，實(shí)現(xiàn)了跨域訪問。

3. 適配PC與移動環(huán)境 現(xiàn)在很多網(wǎng)站都存在PC站和H5站兩個站點(diǎn)，因此根據(jù)用戶的瀏覽環(huán)境自動切換站點(diǎn)是很常見的需求。Nginx可以通過內(nèi)置變量$http_user_agent，獲取到請求客戶端的userAgent，從而知道用戶處于移動端還是PC，進(jìn)而控制重定向到H5站還是PC站。 例如：pc端站點(diǎn)是mysite-base.com，H5端是mysite-base-H5.com 。pc端Nginx配置如下：

location / {
        # 移動、pc設(shè)備適配
        if ($http_user_agent ~* '(Android|webOS|iPhone|iPod|BlackBerry)') {
            set $mobile_request '1';
        }
        if ($mobile_request = '1') {
            rewrite ^.+ http://mysite-base-H5.com;
        }
    }  

這樣當(dāng)瀏覽設(shè)備切換成移動模式，再次刷新頁面后，站點(diǎn)被自動切換到H5站。

4. 合并請求 前端性能優(yōu)化中重要一點(diǎn)就是盡量減少http資源請求的數(shù)量。通過nginx-http-concat模塊（淘寶開發(fā)的第三方模塊，需要單獨(dú)安裝）用一種特殊的請求url規(guī)則，前端可以將多個資源的請求合并成一個請求，后臺Nginx會獲取各個資源并拼接成一個結(jié)果進(jìn)行返回。例如上面的例子通過一個請求將1.js,2.js,3js三個js資源合并成一個請求，減少了瀏覽器開銷。 本地server mysite-base.com為例，static/js文件夾下有三個文件，文件內(nèi)容很簡單，分別為：

# js資源http-concat
    # nginx-http-concat模塊的參數(shù)遠(yuǎn)不止下面三個，剩下的請查閱文檔
    location /static/js/ {
        concat on; # 是否打開資源合并開關(guān)
        concat_types application/javascript; # 允許合并的資源類型
        concat_unique off; # 是否允許合并不同類型的資源
        concat_max_files 5; # 允許合并的最大資源數(shù)目
    }

當(dāng)在瀏覽器請求http://mysite-base.com/static/js/??a.js,b.js,c.js 時，發(fā)現(xiàn)三個js被合并成一個返回了。

5. 圖片處理 在前端開發(fā)中，經(jīng)常需要不同尺寸的圖片?，F(xiàn)在的云儲存基本對圖片都提供有處理服務(wù)（一般是通過在圖片鏈接上加參數(shù)）。其實(shí)用Nginx，可以通過幾十行配置，搭建出一個屬于自己的本地圖片處理服務(wù)，完全能夠滿足日常對圖片的裁剪/縮放/旋轉(zhuǎn)/圖片品質(zhì)等處理需求。要用到ngx_http_image_filter_module模塊。這個模塊是非基本模塊，需要安裝。 下面是圖片縮放功能部分的Nginx配置：

# 圖片縮放處理
    # 這里約定的圖片處理url格式：以 mysite-base.com/img/路徑訪問
    location ~* /img/(.+)$ {
        alias /Users/cc/Desktop/server/static/image/$1; #圖片服務(wù)端儲存地址
        set $width -; #圖片寬度默認(rèn)值
        set $height -; #圖片高度默認(rèn)值
        if ($arg_width != "") {
            set $width $arg_width;
        }
        if ($arg_height != "") {
            set $height $arg_height;
        }
        image_filter resize $width $height; #設(shè)置圖片寬高
        image_filter_buffer 10M;   #設(shè)置Nginx讀取圖片的最大buffer。
        image_filter_interlace on; #是否開啟圖片圖像隔行掃描
        error_page 415 = 415.png; #圖片處理錯誤提示圖，例如縮放參數(shù)不是數(shù)字
    }

這里只是最基本的配置。此外，可以通過proxy_cache配置Nginx緩存，避免每次請求都重新處理圖片，減少Nginx服務(wù)器處理壓力；還以可以通過和 nginx-upload-module 一起使用加入圖片上傳的功能等。

6. 頁面內(nèi)容修改 Nginx可以通過向頁面底部或者頂部插入額外的css和js文件，從而實(shí)現(xiàn)修改頁面內(nèi)容。這個功能需要額外模塊的支持，例如：nginx_http_footer_filter或者ngx_http_addition_module (都需要安裝)。 工作中，經(jīng)常需要切換各種測試環(huán)境，而通過switchhosts等工具切換后，有時還需要清理瀏覽器dns緩存。可以通過頁面內(nèi)容修改+Nginx反向代理來實(shí)現(xiàn)輕松快捷的環(huán)境切換。 這里首先在本地編寫一段js代碼（switchhost.js），里面的邏輯是：在頁面插入hosts切換菜單以及點(diǎn)擊具體某個環(huán)境時，將該host的ip和hostname儲存在cookie中，最后刷新頁面；接著編寫一段css代碼（switchhost.css）用來設(shè)置該hosts切換菜單的樣式。 然后Nginx腳本配置：

server {
        listen 80;
        listen  443 ssl;
        expires -1;
        # 想要代理的域名
        server_name m-element.kaola.com;
        set $root /Users/cc/Desktop/server;
        charset utf-8;
        ssl_certificate      /usr/local/etc/nginx/m-element.kaola.com.crt;
        ssl_certificate_key  /usr/local/etc/nginx/m-element.kaola.com.key;
 
        # 設(shè)置默認(rèn)$switch_host，一般默認(rèn)為線上host，這里的1.1.1.1隨便寫的
        set $switch_host '1.1.1.1';
        # 設(shè)置默認(rèn)$switch_hostname，一般默認(rèn)為線上'online'
        set $switch_hostname '';
        # 從cookie中獲取環(huán)境ip
        if ($http_cookie ~* "switch_host=(.+?)(?=;|$)") {
            set $switch_host $1;
        }
        
        # 從cookie中獲取環(huán)境名
        if ($http_cookie ~* "switch_hostname=(.+?)(?=;|$)") {
            set $switch_hostname $1;
        }
        
        location / {
            expires -1;
            index index.html;
            proxy_set_header Host $host;
            #把html頁面的gzip壓縮去掉，不然sub_filter無法替換內(nèi)容
            proxy_set_header Accept-Encoding '';
            #反向代理到實(shí)際服務(wù)器ip
            proxy_pass  http://$switch_host:80;
            #全部替換
            sub_filter_once off;
            #ngx_http_addition_module模塊替換內(nèi)容。
            # 這里在頭部插入一段css，內(nèi)容是hosts切換菜單的css樣式
            sub_filter '</head>' '</head><link rel="stylesheet" type="text/css" media="screen" href="/local/switchhost.css" />';
            #將頁面中的'網(wǎng)易考拉'文字后面加上環(huán)境名，便于開發(fā)識別目前環(huán)境
            sub_filter '網(wǎng)易考拉' '網(wǎng)易考拉:${switch_hostname}';
            #這里用了另一個模塊nginx_http_footer_filter，其實(shí)上面的模塊就行，只是為了展示用法
            # 最后插入一段js，內(nèi)容是hosts切換菜單的js邏輯
            set $injected '<script language="javascript" src="/local/switchhost.js"></script>';
            footer '${injected}';
        }
        # 對于/local/請求，優(yōu)先匹配本地文件
        # 所以上面的/local/switchhost.css，/local/switchhost.js會從本地獲取
        location ^~ /local/ {
            root $root;
        }
}

這個功能其實(shí)為Nginx在前端開發(fā)中的應(yīng)用提供了無限可能。例如，可以通過區(qū)分本地、測試和線上環(huán)境，為本地/測試環(huán)境頁面增加很多開發(fā)輔助功能：給本地頁面加一個常駐二維碼便于手機(jī)端掃碼調(diào)試；本地調(diào)試線上頁面時，在js文件底部塞入sourceMappingURL，便于本地debug等等。

文章摘自：https://juejin.cn/post/6844903684967825421
ngnix的基本配置：https://blog.csdn.net/weixin_42167759/article/details/85049546