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)跨域。具體流程如下:
- 訪問Nginx官網(wǎng),下載Nginx到本地
- 將打包完成的代碼放置在nginx的html目錄下
- 打開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ù),流程具體如下:
- 申請證書,便宜ssl可以申請三個月免費ssl證書,申請過程請按照官方提示步驟
- 申請完成后下載nginx版本的證書至本地,一個crt文件一個key文件,crt為證書,key為密鑰
- 配置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ù)器