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

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

摘要：負載均衡是通過后端引入一個負載均衡器和至少一個額外的服務器來緩解這類問題增加的服務器和原本的服務器提供相同的內容。負載均衡不需要前端進行配置，主要是服務端進行配置，前端稍作了解即可。

Nginx主要功能

負載均衡

反向代理

動靜分離

配置https

負載均衡

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

負載均衡是通過后端引入一個負載均衡器和至少一個額外的web服務器來緩解這類問題(增加的web服務器和原本的web服務器提供相同的內容)。用戶訪問的時候，先訪問到負載均衡器，再通過負載均衡器將請求轉發(fā)給后臺服務器。

通過這種方法，當有一臺服務器宕機時，負載均衡器就分配其他的服務器給用戶，極大的增加的網站的穩(wěn)定性。

負載均衡器主要可以轉發(fā)http、https、tcp、udp四種請求規(guī)則
負載均衡器如何給用戶分配服務器？負載均衡器有多種負載均衡算法，基本就是給每臺服務器一個不同的權重，通過權重來給用戶分配服務器。
負載均衡不需要前端進行配置，主要是服務端進行配置，前端稍作了解即可。

反向代理

反向代理是前端經常會用到的一項功能，主要是為了解決瀏覽器跨域訪問的問題。當協(xié)議、域名、端口號有一項或多項不同時，便違反了同源策略，需要跨域。前端跨域用的較多的有：

1.jsonp跨域：使用html的

來繞過跨域的限制。但是需要注意的是，jsonp只支持get請求。

2.webpack反向代理：前端開發(fā)中，基于webpack配置環(huán)境的spa頁面已經是一種趨勢，webpack內置的proxy可以幫助我們在開發(fā)環(huán)境調試接口時將我們的地址代理到后臺服務地址，解決跨域問題。配置如下

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

這段代碼的含義就是，當前端訪問接口匹配到"/api"時，將代理到"http://192.168.xxx.xxx:8080"服務端地址，如果前臺的接口名為/api/restful，代理的請求路徑將是"http://192.168.xxx.xxx:8080/api/restful"。

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

        
server {
    listen       3000;    //監(jiān)聽的本地端口
    server_name  localhost;    
                
    location /api {         //匹配到/api開頭的接口時，轉發(fā)到下面的服務器地址
        root   html;  
        proxy_pass  http://192.168.xxx.xxx:8080;    //服務器地址      
    }  
                        
    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;
    }
}

動靜分離

動靜分離是為了減少不必要的請求已減少資源的浪費、請求的延時。

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

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

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

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

配置https服務

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

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

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

總結

最后，我們走一遍整個流程

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

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

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

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

轉載請注明本文地址：http://www.ezyhdfw.cn/yun/40117.html

PHP程序員學習路線

摘要：第一階段基礎階段基礎程序員重點把搞熟練核心是安裝配置基本操作目標能夠完成基本的系統(tǒng)安裝，簡單配置維護能夠做基本的簡單系統(tǒng)的開發(fā)能夠在中型系統(tǒng)中支持某個功能模塊的開發(fā)。本項不做重點學習，除非對前端有興趣。第一階段：基礎階段（基礎PHP程序員）重點：把LNMP搞熟練（核心是安裝配置基本操作）目標：能夠完成基本的LNMP系統(tǒng)安裝，簡單配置維護；能夠做基本的簡單系統(tǒng)的PHP開發(fā)；能夠在P...

genedna 2019-06-27 16:06 評論0 收藏0
前端性能優(yōu)化與上線

摘要：看下狀態(tài)可以看到我已經有一些鏡像了我已經刪除了拉鏡像正常即可，中間那段是中國鏡像源，我們成功下來了的鏡像。攻破像我這樣屌絲的服務器一般都買的，大的資源文件不住，一個動輒的文件這很蛋疼，不上很難受。 4000字長文，多圖預警！??！流量慎入！！性能優(yōu)化 - 屌絲前端性能優(yōu)化、上線一條龍大家好我又來了，本章給大家?guī)淼膬热菔牵荷暇€和上線后的性能優(yōu)化項目地址實戰(zhàn)預覽地址實戰(zhàn)項目地址...

wupengyu 2019-06-28 16:51 評論0 收藏0
關于 nginx 前端知道這些就夠了

摘要：我備案了個域名，買了一個阿里云服務器，想要搭建幾個自己的網站，難免要接觸。創(chuàng)建軟鏈接假如我們每個網站程序放在一個文件夾里，該程序的配置文件也應該放在這個文件夾里才方便管理。我備案了個域名，買了一個阿里云服務器，想要搭建幾個自己的網站，難免要接觸 nginx。那么我用 nginx 來干嘛呢：靜態(tài)資源反向代理將域名泛解析到服務器之后，通過 nginx 來給不同的二級域名分配服務器...

Alfred 2019-08-22 16:58 評論0 收藏0
關于 nginx 前端知道這些就夠了

摘要：我備案了個域名，買了一個阿里云服務器，想要搭建幾個自己的網站，難免要接觸。創(chuàng)建軟鏈接假如我們每個網站程序放在一個文件夾里，該程序的配置文件也應該放在這個文件夾里才方便管理。我備案了個域名，買了一個阿里云服務器，想要搭建幾個自己的網站，難免要接觸 nginx。那么我用 nginx 來干嘛呢：靜態(tài)資源反向代理將域名泛解析到服務器之后，通過 nginx 來給不同的二級域名分配服務器...

xiao7cn 2019-07-25 14:17 評論0 收藏0
Docker Compose 整合發(fā)布應用相關服務

摘要：于是，程序不再是原先單一的服務，而是，變成了一系列密切相關的服務。需要注意的是，在模式下申請證書，需要向證明服務器能被訪問。首先，祝各位新年快樂，萬事如意，雞年大吉。這次要來說說一個和前端并不太相關的東西——docker compose，一個整合發(fā)布應用的利器。如果，你對 docker 有一些耳聞，那么，你可能知道它是什么。不過，你不了解也沒有關系，在作者眼中，docker 就...

microcosm1994 2019-07-25 13:51 評論0 收藏0