nginx前端必備知識

nginx在應(yīng)用程序中的作用

解決跨域
請求過濾
配置gzip
負載均衡
靜態(tài)資源服務(wù)器

正向代理與反向代理

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

不管是正向代理還是反向代理深滚,實現(xiàn)的都是上面的功能访忿。


正向代理和反向代理

正向代理

正向代理撵幽,意思是一個位于客戶端和原始服務(wù)器(origin server)之間的服務(wù)器是牢,為了從原始服務(wù)器取得內(nèi)容僵井,客戶端向代理發(fā)送一個請求并指定目標(原始服務(wù)器),然后代理向原始服務(wù)器轉(zhuǎn)交請求并將獲得的內(nèi)容返回給客戶端驳棱。
正向代理是為我們服務(wù)的批什,即為客戶端服務(wù)的,客戶端可以根據(jù)正向代理訪問到它本身無法訪問到的服務(wù)器資源社搅。

正向代理對我們是透明的驻债,對服務(wù)端是非透明的,即服務(wù)端并不知道自己收到的是來自代理的訪問還是來自真實客戶端的訪問形葬。

反向代理

反向代理(Reverse Proxy)方式是指以代理服務(wù)器來接受internet上的連接請求却汉,然后將請求轉(zhuǎn)發(fā)給內(nèi)部網(wǎng)絡(luò)上的服務(wù)器,并將從服務(wù)器上得到的結(jié)果返回給internet上請求連接的客戶端荷并,此時代理服務(wù)器對外就表現(xiàn)為一個反向代理服務(wù)器合砂。
反向代理是為服務(wù)端服務(wù)的,反向代理可以幫助服務(wù)器接收來自客戶端的請求,幫助服務(wù)器做請求轉(zhuǎn)發(fā)翩伪,負載均衡等微猖。

反向代理對服務(wù)端是透明的,對我們是非透明的缘屹,即我們并不知道自己訪問的是代理服務(wù)器凛剥,而服務(wù)器知道反向代理在為他服務(wù)。

使用

前端開發(fā)完成轻姿,對代碼進行打包后犁珠,webpack就無法使用了。這個時候我們手里只有html互亮、css犁享、js等靜態(tài)文件,后臺接口地址都會訪問不到豹休。這個時候nginx就登場了炊昆,nginx反向代理配置和webpack大同小異,匹配到動態(tài)的地址時將請求轉(zhuǎn)發(fā)到一個服務(wù)器地址實現(xiàn)跨域威根。具體流程如下:

  1. 訪問nginx官網(wǎng)凤巨,下載nginx到本地
  2. 將打包完成的代碼放置在nginx的html目錄下
  3. 打開conf文件夾下的nginx.conf文件,配置如下:
server {
    listen       3000;    //監(jiān)聽的本地端口
    server_name  localhost;    
                
    location /api {         //匹配到/api開頭的接口時洛搀,轉(zhuǎn)發(fā)到下面的服務(wù)器地址
        root   html;  
        proxy_pass  http://192.168.xxx.xxx:8080;    //服務(wù)器地址      
    }  
                        
    location =/ {
        root html;
        index  index.htm  index.html;   //默認主頁
    }
                        
    # 所有靜態(tài)請求都由nginx處理敢茁,存放目錄為html  
    location ~ \.(htm|html|js|css|jpg|png|gif|eot|svg|ttf|woff|woff2)$ {  
        root    html;      //配置靜態(tài)資源地址
    }    
                
    error_page   500 502 503 504  /50x.html;
        location = /50x.html {
        root   html;
    }
}    

常用變量:

main:nginx的全局配置,對全局生效留美。
events:配置影響nginx服務(wù)器或與用戶的網(wǎng)絡(luò)連接卷要。
http:可以嵌套多個server,配置代理独榴,緩存,日志定義等絕大多數(shù)功能和第三方模塊的配置奕枝。
server:配置虛擬主機的相關(guān)參數(shù)棺榔,一個http中可以有多個server。
location:配置請求的路由隘道,以及各種頁面的處理情況症歇。
upstream:配置后端服務(wù)器具體地址,負載均衡配置不可或缺的部分谭梗。

內(nèi)部變量

下面是nginx一些配置中常用的內(nèi)置全局變量忘晤,你可以在配置的任何位置使用它們。

變量名 功能
$host 請求信息中的Host激捏,如果請求中沒有Host行设塔,則等于設(shè)置的服務(wù)器名
$request_method 客戶端請求類型,如GET珍促、POST
$remote_addr 客戶端的IP地址
$args 請求中的參數(shù)
$content_length 請求頭中的Content-length字段
$http_user_agent 客戶端agent信息
$http_cookie 客戶端cookie信息
$remote_addr 客戶端的IP地址
$remote_port 客戶端的端口
$server_protocol 請求使用的協(xié)議桑阶,如HTTP/1.0、·HTTP/1.1
$server_addr 服務(wù)器地址
$server_name 服務(wù)器名稱
$server_port` 服務(wù)器的端口號

解決跨域

前端server的域名為:fe.server.com
后端服務(wù)的域名為:dev.server.com
現(xiàn)在我在fe.server.com對dev.server.com發(fā)起請求一定會出現(xiàn)跨域鱼冀。

現(xiàn)在我們只需要啟動一個nginx服務(wù)器序六,將server_name設(shè)置為fe.server.com,然后設(shè)置相應(yīng)的location以攔截前端需要跨域的請求任连,最后將請求代理回dev.server.com。如下面的配置:

server {
        listen       80;
        server_name  fe.server.com;
        location / {
                proxy_pass dev.server.com;
        }
}

請求過濾

根據(jù)狀態(tài)碼過濾

error_page 500 501 502 503 504 506 /50x.html;
    location = /50x.html {
        #將跟路徑改編為存放html的路徑例诀。
        root /root/static/html;
    }

根據(jù)URL名稱過濾随抠,精準匹配URL,不匹配的URL全部重定向到主頁繁涂。

location / {
    rewrite  ^.*$ /index.html  redirect;
}

根據(jù)請求類型過濾拱她。

if ( $request_method !~ ^(GET|POST|HEAD)$ ) {
        return 403;
    }

配置gzip

GZIP是規(guī)定的三種標準HTTP壓縮格式之一。目前絕大多數(shù)的網(wǎng)站都在使用GZIP傳輸 HTML爆土、CSS椭懊、JavaScript 等資源文件。

對于文本文件步势,GZip 的效果非常明顯氧猬,開啟后傳輸所需流量大約會降至 1/4 ~ 1/3。

并不是每個瀏覽器都支持gzip的坏瘩,如何知道客戶端是否支持gzip呢盅抚,請求頭中的Accept-Encoding來標識對壓縮的支持。
啟用gzip同時需要客戶端和服務(wù)端的支持倔矾,如果客戶端支持gzip的解析妄均,那么只要服務(wù)端能夠返回gzip的文件就可以啟用gzip了,我們可以通過nginx的配置來讓服務(wù)端支持gzip。下面的respone中content-encoding:gzip哪自,指服務(wù)端開啟了gzip的壓縮方式丰包。

gzip                    on;
    gzip_http_version       1.1;        
    gzip_comp_level         5;
    gzip_min_length         1000;
    gzip_types text/csv text/xml text/css text/plain text/javascript application/javascript application/x-javascript application/json application/xml;

gzip
開啟或者關(guān)閉gzip模塊
默認值為off
可配置為on / off
gzip_http_version
啟用 GZip 所需的HTTP 最低版本
默認值為HTTP/1.1
gzip_comp_level
壓縮級別,級別越高壓縮率越大壤巷,當然壓縮時間也就越長(傳輸快但比較消耗cpu)邑彪。
默認值為 1
壓縮級別取值為1-9
gzip_min_length
設(shè)置允許壓縮的頁面最小字節(jié)數(shù),Content-Length小于該值的請求將不會被壓縮
默認值:0
當設(shè)置的值較小時胧华,壓縮后的長度可能比原文件大寄症,建議設(shè)置1000以上
gzip_types
要采用gzip壓縮的文件類型(MIME類型)
默認值:text/html(默認不壓縮js/css)

負載均衡

負載均衡就是用來幫助我們將眾多的客戶端請求合理的分配到各個服務(wù)器,以達到服務(wù)端資源的充分利用和更少的請求時間矩动。

nginx如何實現(xiàn)負載均衡

Upstream指定后端服務(wù)器地址列表

upstream balanceServer {
    server 10.1.22.33:12345;
    server 10.1.22.34:12345;
    server 10.1.22.35:12345;
}

在server中攔截響應(yīng)請求有巧,并將請求轉(zhuǎn)發(fā)到Upstream中配置的服務(wù)器列表。

server {
        server_name  fe.server.com;
        listen 80;
        location /api {
            proxy_pass http://balanceServer;
        }
    }

上面的配置只是指定了nginx需要轉(zhuǎn)發(fā)的服務(wù)端列表悲没,并沒有指定分配策略篮迎。

nginx實現(xiàn)負載均衡的策略

輪詢策略

默認情況下采用的策略,將所有客戶端請求輪詢分配給服務(wù)端。這種策略是可以正常工作的柑潦,但是如果其中某一臺服務(wù)器壓力太大享言,出現(xiàn)延遲,會影響所有分配在這臺服務(wù)器下的用戶渗鬼。

upstream balanceServer {
    server 10.1.22.33:12345;
    server 10.1.22.34:12345;
    server 10.1.22.35:12345;
}

最小連接數(shù)策略

將請求優(yōu)先分配給壓力較小的服務(wù)器览露,它可以平衡每個隊列的長度,并避免向壓力大的服務(wù)器添加更多的請求譬胎。

upstream balanceServer {
    least_conn;
    server 10.1.22.33:12345;
    server 10.1.22.34:12345;
    server 10.1.22.35:12345;
}

最快響應(yīng)時間策略

依賴于NGINX Plus差牛,優(yōu)先分配給響應(yīng)時間最短的服務(wù)器。

upstream balanceServer {
    fair;
    server 10.1.22.33:12345;
    server 10.1.22.34:12345;
    server 10.1.22.35:12345;
}

客戶端ip綁定

來自同一個ip的請求永遠只分配一臺服務(wù)器堰乔,有效解決了動態(tài)網(wǎng)頁存在的session共享問題偏化。

upstream balanceServer {
    ip_hash;
    server 10.1.22.33:12345;
    server 10.1.22.34:12345;
    server 10.1.22.35:12345;
}

靜態(tài)資源服務(wù)器

location ~* \.(png|gif|jpg|jpeg)$ {
    root    /root/static/;  
    autoindex on;
    access_log  off;
    expires     10h;# 設(shè)置過期時間為10小時          
}

匹配以png|gif|jpg|jpeg為結(jié)尾的請求,并將請求轉(zhuǎn)發(fā)到本地路徑镐侯,root中指定的路徑即nginx本地路徑侦讨。同時也可以進行一些緩存的設(shè)置。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末苟翻,一起剝皮案震驚了整個濱河市韵卤,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌崇猫,老刑警劉巖沈条,帶你破解...
    沈念sama閱讀 218,284評論 6 506
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異诅炉,居然都是意外死亡蜡歹,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,115評論 3 395
  • 文/潘曉璐 我一進店門涕烧,熙熙樓的掌柜王于貴愁眉苦臉地迎上來月而,“玉大人,你說我怎么就攤上這事议纯「缚睿” “怎么了?”我有些...
    開封第一講書人閱讀 164,614評論 0 354
  • 文/不壞的土叔 我叫張陵痹扇,是天一觀的道長。 經(jīng)常有香客問我溯香,道長鲫构,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,671評論 1 293
  • 正文 為了忘掉前任玫坛,我火速辦了婚禮结笨,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己炕吸,他們只是感情好伐憾,可當我...
    茶點故事閱讀 67,699評論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著赫模,像睡著了一般树肃。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上瀑罗,一...
    開封第一講書人閱讀 51,562評論 1 305
  • 那天胸嘴,我揣著相機與錄音,去河邊找鬼斩祭。 笑死劣像,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的摧玫。 我是一名探鬼主播耳奕,決...
    沈念sama閱讀 40,309評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼诬像!你這毒婦竟也來了屋群?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,223評論 0 276
  • 序言:老撾萬榮一對情侶失蹤颅停,失蹤者是張志新(化名)和其女友劉穎谓晌,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體癞揉,經(jīng)...
    沈念sama閱讀 45,668評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡纸肉,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,859評論 3 336
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了喊熟。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片柏肪。...
    茶點故事閱讀 39,981評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖芥牌,靈堂內(nèi)的尸體忽然破棺而出烦味,到底是詐尸還是另有隱情,我是刑警寧澤壁拉,帶...
    沈念sama閱讀 35,705評論 5 347
  • 正文 年R本政府宣布谬俄,位于F島的核電站,受9級特大地震影響弃理,放射性物質(zhì)發(fā)生泄漏溃论。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,310評論 3 330
  • 文/蒙蒙 一痘昌、第九天 我趴在偏房一處隱蔽的房頂上張望钥勋。 院中可真熱鬧炬转,春花似錦、人聲如沸算灸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,904評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽菲驴。三九已至荐吵,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間谢翎,已是汗流浹背捍靠。 一陣腳步聲響...
    開封第一講書人閱讀 33,023評論 1 270
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留森逮,地道東北人榨婆。 一個月前我還...
    沈念sama閱讀 48,146評論 3 370
  • 正文 我出身青樓,卻偏偏與公主長得像褒侧,于是被迫代替她去往敵國和親良风。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 44,933評論 2 355

推薦閱讀更多精彩內(nèi)容