文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

聊聊Nginx前端到底用来做啥

2024-12-02 06:27

关注

location的匹配规则

  1. = 表示精确匹配。只有请求的url路径与后面的字符串完全相等时,才会命中。
  2. ^~ 表示如果该符号后面的字符是最佳匹配的,采用该规则,不再进行后续的查找。
  3. ~ 表示该规则是使用正则定义的,区分大小写。
  4. ~* 表示该规则是使用正则定义的,不区分大小写。

注意的是,nginx的匹配优先顺序按照上面的顺序进行优先匹配,而且注意的是一旦某一个匹配命中直接退出,不再进行往下的匹配

剩下的普通匹配会按照最长匹配长度优先级来匹配,就是说谁匹配得越多就用谁。

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
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 因为 ^~精确匹配的优先级比正则高 也是匹配到之后支持退出
server {
server_name website.com;
location /doc {
return 702;
}
location /docu {
return 701;
}
}
# 701 前缀匹配匹配是按照最长匹配,跟顺序无关

history模式、跨域、缓存、反向代理

# 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单文件

因为不可能每一个项目开启一个域名,仅仅指向通过增加路径来划分多个网站,比如:

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

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来获取变量

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参数来进行降级指向备用地址。

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服务)上传两份图片:

然后通过nginx检测头部是否支持webp来返回webp图片,不支持的话就返回原图即可。这其中还做了错误拦截,如果cos桶丢失webp图片及时浏览器支持webp也要降级为png

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;
}
}
}


来源:今日头条内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯