Nginx主要功能：

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

負載均衡

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

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

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

正 / 反向代理

• 正向代理：代理端代理的客戶端，服務(wù)端認代理端不認客戶端。
• 反向代理：代理端代理的服務(wù)端，客戶端認代理端不認服務(wù)端。

處理跨域：

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

• jsonp跨域：
  使用html的<script>標簽可以引入第三方的js文件，所以我們可以通過：

<script src="http://后臺接口頁面?key=value"></script>

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

$.ajax({
       async : true,
       url : "https://api.douban.com/v2/book/search",
       type : "GET",
       dataType : "jsonp",   // 返回的數(shù)據(jù)類型，設(shè)置為JSONP方式
       jsonp : 'callback',   //指定一個查詢參數(shù)名稱來覆蓋默認的 jsonp 回調(diào)參數(shù)名 callback
       jsonpCallback: 'handleResponse',   //設(shè)置回調(diào)函數(shù)名
       data : {}, 
       success: function(xhr){
           console.log(xhr);
       }
 });

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

proxyTable: {
    '/api': {
      target: 'http://localhost:8080',  //目標接口域名
      changeOrigin: true,  //是否跨域
      pathRewrite: {
        '^/api': '/static/config'   //重寫接口
      }
 }

這段代碼的含義就是，當前端訪問后臺接口匹配到 '/api' 時，將代理到 http://localhost:8080 服務(wù)端地址，如果前臺的接口名為：/api/home，代理的請求路徑將是：http://localhost:8080/static/config/home

• 使用Nginx進行反向代理：
  前端開發(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;
    }
}

動靜分離

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

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

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

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

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

配置https服務(wù)

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

要配置https服務(wù)，流程具體如下：

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 / {        //反向代理的服務(wù)器地址，視情況進行配置
    #    proxy_pass   http://112.35.xxx.xxx;
    # }          
}   

案例總結(jié)

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