Nginx主要功能

負載均衡

反向代理

動靜分離

配置https

負載均衡

負載均衡是一門計算機網絡技術，主要用來優化資源使用、最大化吞吐率、最小化響應時間、同時避免過載的目的。

如果一個網站只有一臺服務器的話，如果這臺服務器宕機了，那么整個網站將無法正常訪問。當訪問網站人數過多，并發量達到一定規模，超過服務器性能的極限，整個網站也將無法訪問。而負載均衡就是用來解決這一類的問題。

image

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

image

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

負載均衡器主要可以轉發http、https、tcp、udp四種請求規則

負載均衡器如何給用戶分配服務器？ 負載均衡器有多種負載均衡算法，基本就是給每臺服務器一個不同的權重，通過權重來給用戶分配服務器。

負載均衡不需要前端進行配置，主要是服務端進行配置，前端稍作了解即可。

反向代理

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

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

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

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

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 {   
         listen3000;    //監聽的本地端口  

          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 { listen443ssl;//監聽443端口，因為443端口是https的默認端口。80為http的默認端口server_name www.domain.com;//配置域名ssl_certificate 證書的絕對路徑; ssl_certificate_key 密鑰的絕對路徑;# location / {//反向代理的服務器地址，視情況進行配置# proxy_pass http://112.35.xxx.xxx;# } }

總結

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

image

1.用戶輸入http://域名，默認80端口

2.nginx監聽到80端口被訪問，匹配到域名為www.dream.com，將服務代理到http://192.168.3.10:8080

3.服務器返回頁面資源

4.用戶輸入https://二級域名,默認端口為443

5.nginx監聽443端口,匹配到相應域名，進行證書驗證，將服務代理到指定服務器