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

Nginx主要功能

1. 負載均衡
2. 反向代理
3. 動靜分離
4. 配置https

負載均衡

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

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

經過這種方法，當有一臺服務器宕機時，負載均衡器就分配其餘的服務器給用戶，極大的增長的網站的穩定性。

負載均衡器主要能夠轉發http、https、tcp、udp四種請求規則
負載均衡器如何給用戶分配服務器？ 負載均衡器有多種負載均衡算法，基本就是給每臺服務器一個不一樣的權重，經過權重來給用戶分配服務器。
負載均衡不須要前端進行配置，主要是服務端進行配置，前端稍做了解便可。

反向代理

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

1.jsonp跨域： 使用html的<script>標籤能夠引入第三方的js文件，因此咱們能夠經過

<script src="http://後臺接口"></script>

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

2.webpack反向代理： 前端開發中，基於webpack配置環境的spa頁面已是一種趨勢，webpack內置的proxy能夠幫助咱們在開發環境調試接口時將咱們的地址代理到後臺服務地址，解決跨域問題。配置以下

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進行反向代理
前端開發完成，對代碼進行打包後，webpack就沒法使用了。這個時候咱們手裏只有html、css、js等靜態文件，後臺接口地址都會訪問不到。這個時候nginx就登場了，nginx反向代理配置和webpack大同小異，匹配到動態的地址時將請求轉發到一個服務器地址實現跨域。具體流程以下：
1) 訪問nginx官網，下載nginx到本地
2) 將打包完成的代碼放置在nginx的html目錄下
3) 打開conf文件夾下的nginx.conf文件，配置以下：

server {
    listen       3000;    //監聽的本地端口
    server_name  localhost;    
                
    location /api {         //匹配到/api開頭的接口時，轉發到下面的服務器地址
        root   html;  
        proxy_pass  http://192.168.xxx.xxx:8080;    //服務器地址      
    }  
                        
    location =/ {
        root html;
        index  index.htm  index.html;   //默認主頁
    }
                        
    # 全部靜態請求都由nginx處理，存放目錄爲html  
    location ~ \.(htm|html|js|css|jpg|png|gif|eot|svg|ttf|woff|woff2)$ {  
        root    html;      //配置靜態資源地址
    }    
                
    error_page   500 502 503 504  /50x.html;
        location = /50x.html {
        root   html;
    }
}

動靜分離

動靜分離是爲了減小沒必要要的請求已減小資源的浪費、請求的延時。

舉個例子，假如咱們全部的前臺數據都從後臺獲取，咱們訪問百度首頁時，若是首頁有一張背景圖，那麼咱們每一個人每次進入首頁時都要去請求接口獲取這張背景圖，而首頁的訪問量是巨大的，每次都爲了一張背景圖去請求同一個接口對於資源的消耗不可計數，爲了減小資源的損耗、加快網頁的加載速度，動靜分離由此而生。

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

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

當匹配到上述後綴名時，直接去html內獲取靜態資源，不向後臺發起請求。

配置https服務

微信小程序如今愈來愈火，大批前端開發進軍微信小程序，可是微信小程序只支持https請求，這是一個問題。但當你看完這篇文章，這將再也不是阻擋你的一座大山。

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

server {
    listen       443 ssl;    //監聽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監聽到80端口被訪問，匹配到域名爲www.dream.com，將服務代理到http://192.168.3.10:8080
3.服務器返回頁面資源
4.用戶輸入https://二級域名,默認端口爲443
5.nginx監聽443端口,匹配到相應域名，進行證書驗證，將服務代理到指定服務器

以上的都只是nginx最基礎的配置，還具備不少能夠優化的地方。若是有什麼配置不當的地方，歡迎評論區批評指正，謝謝。