前言
這篇文章是收集我在工作中經(jīng)常會(huì)用到的nginx相關(guān)知識(shí)點(diǎn)，本文并不是基礎(chǔ)知識(shí)的講解更多的是一些方案中的簡(jiǎn)單實(shí)現(xiàn)。
location的匹配規(guī)則
- = 表示精確匹配。只有請(qǐng)求的url路徑與后面的字符串完全相等時(shí)，才會(huì)命中。
- ^~ 表示如果該符號(hào)后面的字符是最佳匹配，采用該規(guī)則，不再進(jìn)行后續(xù)的查找。
- ~ 表示該規(guī)則是使用正則定義的，區(qū)分大小寫(xiě)。
- ~* 表示該規(guī)則是使用正則定義的，不區(qū)分大小寫(xiě)。
注意的是，nginx的匹配優(yōu)先順序按照上面的順序進(jìn)行優(yōu)先匹配，而且注意的是一旦某一個(gè)匹配命中直接退出，不再進(jìn)行往下的匹配
剩下的普通匹配會(huì)按照最長(zhǎng)匹配長(zhǎng)度優(yōu)先級(jí)來(lái)匹配，就是誰(shuí)匹配的越多就用誰(shuí)。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
server { server_name website.com; location /document { return 701; } location ~* ^/docume.*$ { return 702; } location ~* ^/document$ { return 703; }}curl -I website.com:8080/document 702# 匹配702 因?yàn)檎齽t的優(yōu)先級(jí)更高,而且正則是一旦匹配到就直接退出 所以不會(huì)再匹配703 |
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
server { server_name website.com; location ~* ^/docume.*$ { return 701; } location ^~ /doc { return 702; } location ~* ^/document$ { return 703; }}curl http://website.com/documentHTTP/1.1 702# 匹配702 因?yàn)?^~精確匹配的優(yōu)先級(jí)比正則高 也是匹配到之后支持退出 |
|
1
2
3
4
5
6
7
8
9
10
|
server { server_name website.com; location /doc { return 702; } location /docu { return 701; }}# 701 前綴匹配匹配是按照最長(zhǎng)匹配，跟順序無(wú)關(guān) |
history模式、跨域、緩存、反向代理
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
# html設(shè)置history模式location / { index index.html index.htm; proxy_set_header Host $host; # history模式最重要就是這里 try_files $uri $uri/ /index.html; # index.html文件不可以設(shè)置強(qiáng)緩存 設(shè)置協(xié)商緩存即可 add_header Cache-Control 'no-cache, must-revalidate, proxy-revalidate, max-age=0';}# 接口反向代理location ^~ /api/ { # 跨域處理 設(shè)置頭部域名 add_header Access-Control-Allow-Origin *; # 跨域處理 設(shè)置頭部方法 add_header Access-Control-Allow-Methods 'GET,POST,DELETE,OPTIONS,HEAD'; # 改寫(xiě)路徑 rewrite ^/api/(.*)$ /$1 break; # 反向代理 proxy_pass http://static_env; proxy_set_header Host $http_host;}location ~* \.(?:css(\.map)?|js(\.map)?|gif|svg|jfif|ico|cur|heic|webp|tiff?|mp3|m4a|aac|ogg|midi?|wav|mp4|mov|webm|mpe?g|avi|ogv|flv|wmv)$ { # 靜態(tài)資源設(shè)置七天強(qiáng)緩存 expires 7d; access_log off;} |
以目錄去區(qū)分多個(gè)history單文件
因?yàn)椴豢赡苊恳粋€(gè)項(xiàng)目開(kāi)啟一個(gè)域名，僅僅指向通過(guò)增加路徑來(lái)劃分多個(gè)網(wǎng)站，比如：
- www.taobao.com/tmall/login訪問(wèn)天貓的登錄頁(yè)面
- www.taobao.com/alipay/login訪問(wèn)支付寶的登錄頁(yè)面
|
1
2
3
4
5
6
7
8
9
|
server { listen 80; server_name taobao.com; index index.html index.htm; # 通過(guò)正則來(lái)匹配捕獲 [tmall|alipay]中間的這個(gè)路徑 location ~ ^/([^\/]+)/(.*)$ { try_files $uri $uri/ /$1/dist/index.html =404; }} |
負(fù)載均衡
基于upstream做負(fù)載均衡,中間會(huì)涉及一些相關(guān)的策略比如ip_hash、weight
|
1
2
3
4
5
6
7
8
|
upstream backserver{ # 哈希算法，自動(dòng)定位到該服務(wù)器 保證唯一ip定位到同一部機(jī)器 用于解決session登錄態(tài)的問(wèn)題 ip_hash; server 127.0.0.1:9090 down; (down 表示單前的server暫時(shí)不參與負(fù)載) server 127.0.0.1:8080 weight=2; (weight 默認(rèn)為1.weight越大，負(fù)載的權(quán)重就越大) server 127.0.0.1:6060; server 127.0.0.1:7070 backup; (其它所有的非backup機(jī)器down或者忙的時(shí)候，請(qǐng)求backup機(jī)器) } |
灰度部署
如何根據(jù)headers頭部來(lái)進(jìn)行灰度，下面的例子是用cookie來(lái)設(shè)置
如何獲取頭部值在nginx中可以通過(guò)$http_xxx來(lái)獲取變量
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
upstream stable { server xxx max_fails=1 fail_timeout=60; server xxx max_fails=1 fail_timeout=60; }upstream canara { server xxx max_fails=1 fail_timeout=60;}server { listen 80; server_name xxx; # 設(shè)置默認(rèn) set $group "stable"; # 根據(jù)cookie頭部設(shè)置接入的服務(wù) if ($http_cookie ~* "tts_version_id=canara"){ set $group canara; } if ($http_cookie ~* "tts_version_id=stable"){ set $group stable; } location / { proxy_pass http://$group; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; index index.html index.htm; }} |
優(yōu)雅降級(jí)
常用于ssr的node服務(wù)掛了返回500錯(cuò)誤碼然后降級(jí)到csr的cos桶或者nginx中
優(yōu)雅降級(jí)主要用error_page參數(shù)來(lái)進(jìn)行降級(jí)指向備用地址。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
upstream ssr { server xxx max_fails=1 fail_timeout=60; server xxx max_fails=1 fail_timeout=60; }upstream csr { server xxx max_fails=1 fail_timeout=60; server xxx max_fails=1 fail_timeout=60;}location ^~ /ssr/ { proxy_pass http://ssr; # 開(kāi)啟自定義錯(cuò)誤捕獲 如果這里不設(shè)置為on的話 會(huì)走向nginx處理的默認(rèn)錯(cuò)誤頁(yè)面 proxy_intercept_errors on; # 捕獲500系列錯(cuò)誤 如果500錯(cuò)誤的話降級(jí)為下面的csr渲染 error_page 500 501 502 503 504 = @csr_location # error_page 500 501 502 503 504 = 200 @csr_location # 注意這上面的區(qū)別 等號(hào)前面沒(méi)有200 表示 最終返回的狀態(tài)碼已 @csr_location為準(zhǔn) 加了200的話表示不管@csr_location返回啥都返回200狀態(tài)碼}location @csr_location { # 這時(shí)候地址還是帶著/ssr/的要去除 rewrite ^/ssr/(.*)$ /$1 break; proxy_pass http://csr; rewrite_log on;} |
webp根據(jù)瀏覽器自動(dòng)降級(jí)為png
這套方案不像常見(jiàn)的由nginx把png轉(zhuǎn)為webp的方案，而是先經(jīng)由圖床系統(tǒng)（node服務(wù)）上傳兩份圖片:
- 一份是原圖png
- 一份是png壓縮為webp的圖片（使用的是imagemin-webp）
然后通過(guò)nginx檢測(cè)頭部是否支持webp來(lái)返回webp圖片，不支持的話就返回原圖即可。這其中還做了錯(cuò)誤攔截，如果cos桶丟失webp圖片及時(shí)瀏覽器支持webp也要降級(jí)為png
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
|
http { include /etc/nginx/mime.types; default_type application/octet-stream; # 設(shè)置日志格式 log_format main '$remote_addr - $remote_user [$time_local] "$request" ' '$status $body_bytes_sent "$http_referer" ' '"$http_user_agent" "$http_x_forwarded_for"' '"$proxy_host" "$upstream_addr"'; access_log /var/log/nginx/access.log main; sendfile on; keepalive_timeout 65; # 開(kāi)啟gzip gzip on; gzip_vary on; gzip_proxied any; gzip_comp_level 6; gzip_types text/plain text/css text/xml application/json application/javascript application/rss+xml application/atom+xml image/svg+xml; # 負(fù)載均衡 這里可以是多個(gè)cos桶地址即可 upstream static_env { server xxx; server xxx; } # map 設(shè)置變量映射 第一個(gè)變量指的是要通過(guò)映射的key值 Accpet 第二個(gè)值的是變量別名 map $http_accept $webp_suffix { # 默認(rèn)為 空字符串 default ""; # 正則匹配如果Accep含有webp字段 設(shè)置為.webp值 "~*webp" ".webp"; } server { listen 8888; absolute_redirect off; #取消絕對(duì)路徑的重定向 #網(wǎng)站主頁(yè)路徑。此路徑僅供參考，具體請(qǐng)您按照實(shí)際目錄操作。 root /usr/share/nginx/html; location / { index index.html index.htm; proxy_set_header Host $host; try_files $uri $uri/ /index.html; add_header Cache-Control 'no-cache, max-age=0'; } # favicon.ico location = /favicon.ico { log_not_found off; access_log off; } # robots.txt location = /robots.txt { log_not_found off; access_log off; } # location ~* \.(png|jpe?g)$ { # Pass WebP support header to backend # 如果header頭部中支持webp if ($webp_suffix ~* webp) { # 先嘗試找是否有webp格式圖片 rewrite ^/(.*)\.(png|jpe?g)$ /$1.webp break; # 找不到的話 這里捕獲404錯(cuò)誤 返回原始錯(cuò)誤 注意這里的=號(hào) 代表最終返回的是@static_img的狀態(tài)嗎 error_page 404 = @static_img; } proxy_intercept_errors on; add_header Vary Accept; proxy_pass http://static_env; proxy_set_header Host $http_host; expires 7d; access_log off; } location @static_img { #set $complete $schema $server_addr $request_uri; rewrite ^/.+$ $request_uri break; proxy_pass http://static_env; proxy_set_header Host $http_host; expires 7d; } # assets, media location ~* \.(?:css(\.map)?|js(\.map)?|gif|svg|jfif|ico|cur|heic|webp|tiff?|mp3|m4a|aac|ogg|midi?|wav|mp4|mov|webm|mpe?g|avi|ogv|flv|wmv)$ { proxy_pass http://static_env; proxy_set_header Host $http_host; expires 7d; access_log off; } error_page 500 502 503 504 /50x.html; location = /50x.html { root /usr/share/nginx/html; } }} |
為什么要用nginx，nginx有什么特點(diǎn)？
nginx的特點(diǎn)：
- 核心特點(diǎn)：高并發(fā)請(qǐng)求的同時(shí)保持高效的服務(wù)
- 熱部署
- 低內(nèi)存消耗
- 處理響應(yīng)請(qǐng)求很快
- 具有很高的可靠性
同時(shí)，nginx也可以實(shí)現(xiàn)高效的反向代理、負(fù)載均衡。
前端可以用nginx做些什么？
- 搭建靜態(tài)資源服務(wù)器
- 反向代理分發(fā)后端服務(wù)（可以和nodejs搭配實(shí)現(xiàn)前后端分離）和跨域問(wèn)題
- 根據(jù)User Agent來(lái)重定向站點(diǎn)
- 開(kāi)發(fā)環(huán)境或測(cè)試環(huán)境切換（切換host）
- url重寫(xiě)，使用rewrie規(guī)則本地映射
- 資源內(nèi)容篡改
- 獲取cookie做分流
- 資源合并
- gzip壓縮
- 壓縮圖片
- sourceMap調(diào)試
總結(jié)
到此這篇關(guān)于前端到底可以用nginx做什么的文章就介紹到這了,更多相關(guān)前端使用nginx內(nèi)容請(qǐng)搜索服務(wù)器之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持服務(wù)器之家！
原文鏈接：https://juejin.cn/post/7064378702779891749
