前端必須知道的Nginx的常用配置

tracymac7 發(fā)布于2019-07-25 14:27 / 2621人閱讀

摘要：負(fù)載均衡是通過(guò)后端引入一個(gè)負(fù)載均衡器和至少一個(gè)額外的服務(wù)器來(lái)緩解這類(lèi)問(wèn)題增加的服務(wù)器和原本的服務(wù)器提供相同的內(nèi)容。負(fù)載均衡不需要前端進(jìn)行配置，主要是服務(wù)端進(jìn)行配置，前端稍作了解即可。

Nginx主要功能

負(fù)載均衡

反向代理

動(dòng)靜分離

配置https

負(fù)載均衡

負(fù)載均衡是一門(mén)計(jì)算機(jī)網(wǎng)絡(luò)技術(shù)，主要用來(lái)優(yōu)化資源使用、最大化吞吐率、最小化響應(yīng)時(shí)間、同時(shí)避免過(guò)載的目的。
如果一個(gè)網(wǎng)站只有一臺(tái)服務(wù)器的話，如果這臺(tái)服務(wù)器宕機(jī)了，那么整個(gè)網(wǎng)站將無(wú)法正常訪問(wèn)。當(dāng)訪問(wèn)網(wǎng)站人數(shù)過(guò)多，并發(fā)量達(dá)到一定規(guī)模，超過(guò)服務(wù)器性能的極限，整個(gè)網(wǎng)站也將無(wú)法訪問(wèn)。而負(fù)載均衡就是用來(lái)解決這一類(lèi)的問(wèn)題。

負(fù)載均衡是通過(guò)后端引入一個(gè)負(fù)載均衡器和至少一個(gè)額外的web服務(wù)器來(lái)緩解這類(lèi)問(wèn)題(增加的web服務(wù)器和原本的web服務(wù)器提供相同的內(nèi)容)。用戶(hù)訪問(wèn)的時(shí)候，先訪問(wèn)到負(fù)載均衡器，再通過(guò)負(fù)載均衡器將請(qǐng)求轉(zhuǎn)發(fā)給后臺(tái)服務(wù)器。

通過(guò)這種方法，當(dāng)有一臺(tái)服務(wù)器宕機(jī)時(shí)，負(fù)載均衡器就分配其他的服務(wù)器給用戶(hù)，極大的增加的網(wǎng)站的穩(wěn)定性。

負(fù)載均衡器主要可以轉(zhuǎn)發(fā)http、https、tcp、udp四種請(qǐng)求規(guī)則
負(fù)載均衡器如何給用戶(hù)分配服務(wù)器？負(fù)載均衡器有多種負(fù)載均衡算法，基本就是給每臺(tái)服務(wù)器一個(gè)不同的權(quán)重，通過(guò)權(quán)重來(lái)給用戶(hù)分配服務(wù)器。
負(fù)載均衡不需要前端進(jìn)行配置，主要是服務(wù)端進(jìn)行配置，前端稍作了解即可。

反向代理

反向代理是前端經(jīng)常會(huì)用到的一項(xiàng)功能，主要是為了解決瀏覽器跨域訪問(wèn)的問(wèn)題。當(dāng)協(xié)議、域名、端口號(hào)有一項(xiàng)或多項(xiàng)不同時(shí)，便違反了同源策略，需要跨域。前端跨域用的較多的有：

1.jsonp跨域：使用html的

來(lái)繞過(guò)跨域的限制。但是需要注意的是，jsonp只支持get請(qǐng)求。

2.webpack反向代理：前端開(kāi)發(fā)中，基于webpack配置環(huán)境的spa頁(yè)面已經(jīng)是一種趨勢(shì)，webpack內(nèi)置的proxy可以幫助我們?cè)陂_(kāi)發(fā)環(huán)境調(diào)試接口時(shí)將我們的地址代理到后臺(tái)服務(wù)地址，解決跨域問(wèn)題。配置如下

    
        proxyTable: {
            "/api": {
                target: "http://192.168.xxx.xxx:8080",
                changeOrigin: true
            }
        }

這段代碼的含義就是，當(dāng)前端訪問(wèn)接口匹配到"/api"時(shí)，將代理到"http://192.168.xxx.xxx:8080"服務(wù)端地址，如果前臺(tái)的接口名為/api/restful，代理的請(qǐng)求路徑將是"http://192.168.xxx.xxx:8080/api/restful"。

3.使用nginx進(jìn)行反向代理
前端開(kāi)發(fā)完成，對(duì)代碼進(jìn)行打包后，webpack就無(wú)法使用了。這個(gè)時(shí)候我們手里只有html、css、js等靜態(tài)文件，后臺(tái)接口地址都會(huì)訪問(wèn)不到。這個(gè)時(shí)候nginx就登場(chǎng)了，nginx反向代理配置和webpack大同小異，匹配到動(dòng)態(tài)的地址時(shí)將請(qǐng)求轉(zhuǎn)發(fā)到一個(gè)服務(wù)器地址實(shí)現(xiàn)跨域。具體流程如下：
1) 訪問(wèn)nginx官網(wǎng)，下載nginx到本地
2) 將打包完成的代碼放置在nginx的html目錄下
3) 打開(kāi)conf文件夾下的nginx.conf文件，配置如下：

        
server {
    listen       3000;    //監(jiān)聽(tīng)的本地端口
    server_name  localhost;    
                
    location /api {         //匹配到/api開(kāi)頭的接口時(shí)，轉(zhuǎn)發(fā)到下面的服務(wù)器地址
        root   html;  
        proxy_pass  http://192.168.xxx.xxx:8080;    //服務(wù)器地址      
    }  
                        
    location =/ {
        root html;
        index  index.htm  index.html;   //默認(rèn)主頁(yè)
    }
                        
    # 所有靜態(tài)請(qǐng)求都由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;
    }
}

動(dòng)靜分離

動(dòng)靜分離是為了減少不必要的請(qǐng)求已減少資源的浪費(fèi)、請(qǐng)求的延時(shí)。

舉個(gè)例子，假如我們所有的前臺(tái)數(shù)據(jù)都從后臺(tái)獲取，我們?cè)L問(wèn)百度首頁(yè)時(shí)，如果首頁(yè)有一張背景圖，那么我們每個(gè)人每次進(jìn)入首頁(yè)時(shí)都要去請(qǐng)求接口獲取這張背景圖，而首頁(yè)的訪問(wèn)量是巨大的，每次都為了一張背景圖去請(qǐng)求同一個(gè)接口對(duì)于資源的消耗不可計(jì)數(shù)，為了減少資源的損耗、加快網(wǎng)頁(yè)的加載速度，動(dòng)靜分離由此而生。

像這種靜態(tài)資源，前端都會(huì)直接保存在本地文件之中，每次進(jìn)入首頁(yè)的時(shí)候從本地文件內(nèi)讀取靜態(tài)圖片資源，動(dòng)態(tài)數(shù)據(jù)再通過(guò)反向代理去服務(wù)器端獲取展示。具體配置如下：

 location ~ .(htm|html|js|css|jpg|png|gif|eot|svg|ttf|woff|woff2)$ {  
     root    html;      //配置靜態(tài)資源地址
 }

當(dāng)匹配到上述后綴名時(shí)，直接去html內(nèi)獲取靜態(tài)資源，不向后臺(tái)發(fā)起請(qǐng)求。

配置https服務(wù)

微信小程序現(xiàn)在越來(lái)越火，大批前端開(kāi)發(fā)進(jìn)軍微信小程序，但是微信小程序只支持https請(qǐng)求，這是一個(gè)問(wèn)題。但當(dāng)你看完這篇文章，這將不再是阻擋你的一座大山。

要配置https服務(wù)，流程具體如下：
1) 申請(qǐng)證書(shū)，便宜ssl可以申請(qǐng)三個(gè)月免費(fèi)ssl證書(shū)，申請(qǐng)過(guò)程請(qǐng)按照官方提示步驟
2) 申請(qǐng)完成后下載nginx版本的證書(shū)至本地，一個(gè)crt文件一個(gè)key文件，crt為證書(shū)，key為密鑰
3) 配置nginx，如下：

 
server {
    listen       443 ssl;    //監(jiān)聽(tīng)443端口，因?yàn)?43端口是https的默認(rèn)端口。80為http的默認(rèn)端口
    server_name  www.domain.com;    //配置域名
                
    ssl_certificate      證書(shū)的絕對(duì)路徑;
    ssl_certificate_key  密鑰的絕對(duì)路徑;
                
    # location / {        //反向代理的服務(wù)器地址，視情況進(jìn)行配置
    #    proxy_pass   http://112.35.xxx.xxx;
    # }          
}

總結(jié)

最后，我們走一遍整個(gè)流程

1.用戶(hù)輸入http://域名，默認(rèn)80端口
2.nginx監(jiān)聽(tīng)到80端口被訪問(wèn)，匹配到域名為www.dream.com，將服務(wù)代理到http://192.168.3.10:8080
3.服務(wù)器返回頁(yè)面資源
4.用戶(hù)輸入https://二級(jí)域名,默認(rèn)端口為443
5.nginx監(jiān)聽(tīng)443端口,匹配到相應(yīng)域名，進(jìn)行證書(shū)驗(yàn)證，將服務(wù)代理到指定服務(wù)器

以上的都只是nginx最基礎(chǔ)的配置，還具有很多可以?xún)?yōu)化的地方。
如果有什么配置不當(dāng)?shù)牡胤?，歡迎評(píng)論區(qū)批評(píng)指正，謝謝。

云服務(wù)器 GPU云服務(wù)器 nginx的安裝與配置你不知道的你不知道的javascript 知道別人的ip怎么攻擊

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/40117.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

tracymac7

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

深入理解取整、取余與取模問(wèn)題

閱讀 4020·2021-11-17 09:33
程序員的自我修養(yǎng) 第四章實(shí)現(xiàn)C語(yǔ)言運(yùn)行庫(kù)

閱讀 3311·2021-10-08 10:05
如何使用云主機(jī)-云主機(jī)怎么使用？

閱讀 3140·2021-09-22 15:36
Postman接口自動(dòng)化測(cè)試之——批量執(zhí)行（集合操作）

閱讀 1179·2021-09-06 15:02
十幾行代碼教你實(shí)現(xiàn)一個(gè)最簡(jiǎn)版的promise

閱讀 2799·2019-08-29 12:45
Javascript運(yùn)行機(jī)制

閱讀 1624·2019-08-26 13:40
ES6常用知識(shí)學(xué)習(xí)札記

閱讀 3439·2019-08-26 13:37
KOA2框架原理解析和實(shí)現(xiàn)

閱讀 453·2019-08-26 13:37

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

前端必須知道的Nginx的常用配置

相關(guān)文章

PHP程序員學(xué)習(xí)路線

前端性能優(yōu)化與上線

**關(guān)于 nginx 前端知道這些就夠了**

**關(guān)于 nginx 前端知道這些就夠了**

Docker Compose 整合發(fā)布應(yīng)用相關(guān)服務(wù)

發(fā)表評(píng)論

0條評(píng)論

tracymac7

男|高級(jí)講師

TA的文章

深入理解取整、取余與取模問(wèn)題

程序員的自我修養(yǎng) 第四章實(shí)現(xiàn)C語(yǔ)言運(yùn)行庫(kù)

如何使用云主機(jī)-云主機(jī)怎么使用？

Postman接口自動(dòng)化測(cè)試之——批量執(zhí)行（集合操作）

十幾行代碼教你實(shí)現(xiàn)一個(gè)最簡(jiǎn)版的promise

Javascript運(yùn)行機(jī)制

ES6常用知識(shí)學(xué)習(xí)札記

KOA2框架原理解析和實(shí)現(xiàn)

最新活動(dòng)

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

前端必須知道的Nginx的常用配置

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！