Nginx常用配置及其他跨域處理(前端)

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ù)器。



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

負載均衡器主要可以轉(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é)


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


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

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容