一区二区三区在线-一区二区三区亚洲视频-一区二区三区亚洲-一区二区三区午夜-一区二区三区四区在线视频-一区二区三区四区在线免费观看

服務器之家：專注于服務器技術及軟件下載分享
分類導航

云服務器|WEB服務器|FTP服務器|郵件服務器|虛擬主機|服務器安全|DNS服務器|服務器知識|Nginx|IIS|Tomcat|

服務器之家 - 服務器技術 - Nginx - 詳解前端到底可以用nginx做什么

詳解前端到底可以用nginx做什么

2022-02-24 22:21一米八的蘿卜 Nginx

Nginx因為它的穩定性、豐富的模塊庫、靈活的配置和低系統資源的消耗而聞名,下面這篇文章主要給大家介紹了關于前端到底可以用nginx做什么的相關資料,需要的朋友可以參考下

前言

這篇文章是收集我在工作中經常會用到的nginx相關知識點，本文并不是基礎知識的講解更多的是一些方案中的簡單實現。

location的匹配規則

  1. = 表示精確匹配。只有請求的url路徑與后面的字符串完全相等時，才會命中。
  2. ^~ 表示如果該符號后面的字符是最佳匹配，采用該規則，不再進行后續的查找。
  3. ~ 表示該規則是使用正則定義的，區分大小寫。
  4. ~* 表示該規則是使用正則定義的，不區分大小寫。

注意的是，nginx的匹配優先順序按照上面的順序進行優先匹配，而且注意的是一旦某一個匹配命中直接退出，不再進行往下的匹配

剩下的普通匹配會按照最長匹配長度優先級來匹配，就是誰匹配的越多就用誰。

?
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 因為正則的優先級更高,而且正則是一旦匹配到就直接退出 所以不會再匹配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/document
HTTP/1.1 702
# 匹配702 因為 ^~精確匹配的優先級比正則高 也是匹配到之后支持退出
?
1
2
3
4
5
6
7
8
9
10
server {
    server_name website.com;
    location /doc {
        return 702;
    }
    location /docu {
        return 701;
    }
}
# 701 前綴匹配匹配是按照最長匹配，跟順序無關

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設置history模式
location / {
    index index.html index.htm;
    proxy_set_header Host $host;
    # history模式最重要就是這里
    try_files $uri $uri/ /index.html;
    # index.html文件不可以設置強緩存 設置協商緩存即可
    add_header Cache-Control 'no-cache, must-revalidate, proxy-revalidate, max-age=0';
}
 
# 接口反向代理
location ^~ /api/ {
    # 跨域處理 設置頭部域名
    add_header Access-Control-Allow-Origin *;
    # 跨域處理 設置頭部方法
    add_header Access-Control-Allow-Methods 'GET,POST,DELETE,OPTIONS,HEAD';
    # 改寫路徑
    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)$ {
    # 靜態資源設置七天強緩存
    expires 7d;
    access_log off;
}

以目錄去區分多個history單文件

因為不可能每一個項目開啟一個域名，僅僅指向通過增加路徑來劃分多個網站，比如：

  1. www.taobao.com/tmall/login訪問天貓的登錄頁面
  2. www.taobao.com/alipay/login訪問支付寶的登錄頁面
?
1
2
3
4
5
6
7
8
9
server {
    listen 80;
    server_name taobao.com;
    index index.html index.htm;
    # 通過正則來匹配捕獲 [tmall|alipay]中間的這個路徑
    location ~ ^/([^\/]+)/(.*)$ {
        try_files $uri $uri/ /$1/dist/index.html =404;
    }
}

負載均衡

基于upstream做負載均衡,中間會涉及一些相關的策略比如ip_hash、weight

?
1
2
3
4
5
6
7
8
upstream backserver{
    # 哈希算法，自動定位到該服務器 保證唯一ip定位到同一部機器 用于解決session登錄態的問題
    ip_hash;
    server 127.0.0.1:9090 down; (down 表示單前的server暫時不參與負載)
    server 127.0.0.1:8080 weight=2; (weight 默認為1.weight越大，負載的權重就越大)
    server 127.0.0.1:6060;
    server 127.0.0.1:7070 backup; (其它所有的非backup機器down或者忙的時候，請求backup機器)
}

灰度部署

如何根據headers頭部來進行灰度，下面的例子是用cookie來設置

如何獲取頭部值在nginx中可以通過$http_xxx來獲取變量

?
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;
    # 設置默認
    set $group "stable";
 
    # 根據cookie頭部設置接入的服務
    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;
    }
}

優雅降級

常用于ssr的node服務掛了返回500錯誤碼然后降級到csr的cos桶或者nginx中

優雅降級主要用error_page參數來進行降級指向備用地址。

?
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;
    # 開啟自定義錯誤捕獲 如果這里不設置為on的話 會走向nginx處理的默認錯誤頁面
    proxy_intercept_errors on;
    # 捕獲500系列錯誤 如果500錯誤的話降級為下面的csr渲染
    error_page 500 501 502 503 504 = @csr_location
 
    # error_page 500 501 502 503 504 = 200 @csr_location
    # 注意這上面的區別 等號前面沒有200 表示 最終返回的狀態碼已 @csr_location為準 加了200的話表示不管@csr_location返回啥都返回200狀態碼
}
 
location @csr_location {
    # 這時候地址還是帶著/ssr/的要去除
    rewrite ^/ssr/(.*)$ /$1 break;
    proxy_pass http://csr;
    rewrite_log on;
}

webp根據瀏覽器自動降級為png

這套方案不像常見的由nginx把png轉為webp的方案，而是先經由圖床系統（node服務）上傳兩份圖片:

  1. 一份是原圖png
  2. 一份是png壓縮為webp的圖片（使用的是imagemin-webp）

然后通過nginx檢測頭部是否支持webp來返回webp圖片，不支持的話就返回原圖即可。這其中還做了錯誤攔截，如果cos桶丟失webp圖片及時瀏覽器支持webp也要降級為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;
 
  # 設置日志格式
  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;
 
  # 開啟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;
 
  # 負載均衡 這里可以是多個cos桶地址即可
  upstream static_env {
    server xxx;
    server xxx;
  }
 
  # map 設置變量映射 第一個變量指的是要通過映射的key值 Accpet 第二個值的是變量別名
  map $http_accept $webp_suffix {
    # 默認為 空字符串
    default   "";
    # 正則匹配如果Accep含有webp字段 設置為.webp值
    "~*webp"  ".webp";
  }
  server {
 
    listen 8888;
    absolute_redirect off;    #取消絕對路徑的重定向
    #網站主頁路徑。此路徑僅供參考，具體請您按照實際目錄操作。
    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錯誤 返回原始錯誤 注意這里的=號 代表最終返回的是@static_img的狀態嗎
        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有什么特點？

nginx的特點：

  • 核心特點：高并發請求的同時保持高效的服務
  • 熱部署
  • 低內存消耗
  • 處理響應請求很快
  • 具有很高的可靠性

同時，nginx也可以實現高效的反向代理、負載均衡。

前端可以用nginx做些什么？

  • 搭建靜態資源服務器
  • 反向代理分發后端服務（可以和nodejs搭配實現前后端分離）和跨域問題
  • 根據User Agent來重定向站點
  • 開發環境或測試環境切換（切換host）
  • url重寫，使用rewrie規則本地映射
  • 資源內容篡改
  • 獲取cookie做分流
  • 資源合并
  • gzip壓縮
  • 壓縮圖片
  • sourceMap調試

總結

到此這篇關于前端到底可以用nginx做什么的文章就介紹到這了,更多相關前端使用nginx內容請搜索服務器之家以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持服務器之家！

原文鏈接：https://juejin.cn/post/7064378702779891749

延伸 · 閱讀

精彩推薦
主站蜘蛛池模板： 国产三级精品播放 | 四虎精品成人免费视频 | 国产精品久久久久无毒 | 美日韩在线观看 | 国产精品久久久久一区二区三区 | 精品日本三级在线观看视频 | ai换脸明星造梦工厂忘忧草 | 精品国产福利在线观看一区 | 超高清欧美同性videos | 香蕉国产人午夜视频在线观看 | 国产精品第3页 | 免费看视频 | 5g影院天天5g爽天天看 | 日韩欧美中文字幕一区 | 乌克兰18sex性hd | 色综合色狠狠天天综合色hd | 色综合亚洲天天综合网站 | 狠狠躁夜夜躁人人爽天天miya | 精品一区二区三区五区六区 | 第一次处破女18分钟 | 色综合久久98天天综合 | 久久婷婷丁香五月色综合啪免费 | 麻豆找网服 | 日本搜子同屋的日子2国语 日本爽p大片免费观看 | 久草热8精品视频在线观看 久草草在线视视频 | 国产亚洲综合精品一区二区三区 | 欧美三级免费观看 | 国产91在线精品狼人 | 久久伊人久久 | 胸大的姑娘中文字幕视频 | 欧美男男xxx激情做受 | 色天天久久| 久久久精品3d动漫一区二区三区 | 高清一级做a爱免费视 | 色亚州 | 国产成人欧美 | 国产理论片在线观看 | 啪啪无尽3d动漫漫画免费网站 | 高肉h护士办公室play | mm131亚洲精品久久 | blackedhd 18sex|