Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >Nginx之动静分离解读

Nginx之动静分离解读

原创
作者头像
一个风轻云淡
发布于 2023-10-02 00:59:22
发布于 2023-10-02 00:59:22
30700
代码可运行
举报
文章被收录于专栏:java学习javajava学习java
运行总次数:0
代码可运行

基本概念

动静分离是让动态网站里的动态网页根据一定规则把不变的资源和经常变的资源区分开来,动静资源做好了拆分以后,我们就可以根据静态资源的特点将其做缓存操作,这就是网站静态化处理的核心思路

优势:分担负载,减轻web服务器的压力,适用于大负载。静态资源放置cdn,同时还可以通过配置缓存到客户浏览器中,这样极大减轻web服务器的压力。 劣势:网络环境不佳时,ajax回应很慢,导致页面出现空白,出错处理会不好看。不利于网站SEO(搜索引擎优化),增加了开发复杂度。

动态资源:运用 Nginx 的反向代理功能分发请求:所有动态资源的请求交给应用服务器 静态资源:静态资源的请求(例如图片、视频、CSS 文件等)直接由 Nginx 返回到浏览器,这样能大大减轻应用服务器的压力

在企业开发中,为了理好的处理动态次源和提高服务器的响应速度,一般采用动态内容和静态内容进行分离。

基本入门

例子:

  • 如果请求的资源地址是location//的优先级比较低,如果下面的location没匹配到,就会走http://xxx这个地址的机器
  • 如果请求的资源地址是location/css/*,就会被匹配到nginx的html目录下的css文件夹中(我们把css静态资源放在这个位置)
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
server {
        listen       80;
        server_name  localhost;
				
				location / { # /的优先级比较低,如果下面的location没匹配到,就会走http://xxx这个地址的机器
        		proxy_pass http://xxx;
        }
        
        location /css {  # root指的是html,location/css指的是root下的css,所以地址就是html/css
        		root html;
            index  index.html index.htm;
        }

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
}

这里也可以使用正则表达式进行匹配

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
location ~*/(js|css|img){
	root html;
  index  index.html index.htm;
}

对于location/css/*location/js/*location/img/*的请求资源就可以进行匹配

常见的Nginx正则表达式

  • ^ :匹配输入字符串的起始位置
  • $ :匹配输入字符串的结束位置
  • * :匹配前面的字符零次或多次。如“ol*”能匹配“o”及“ol”、“oll”
  • + :匹配前面的字符一次或多次。如“ol+”能匹配“ol”及“oll”、“olll”,但不能匹配“o”
  • ? :匹配前面的字符零次或一次,例如“do(es)?”能匹配“do”或者“does”,”?”等效于”{0,1}”
  • . :匹配除“\n”之外的任何单个字符,若要匹配包括“\n”在内的任意字符,请使用诸如“[.\n]”之类的模式
  • \ :将后面接着的字符标记为一个特殊字符或一个原义字符或一个向后引用。如“\n”匹配一个换行符,而“\$”则匹配“$”
  • \d :匹配纯数字
  • {n} :重复 n 次
  • {n,} :重复 n 次或更多次
  • {n,m} :重复 n 到 m 次
  • [] :定义匹配的字符范围
  • [c] :匹配单个字符 c
  • [a-z] :匹配 a-z 小写字母的任意一个
  • [a-zA-Z0-9] :匹配所有大小写字母或数字
  • () :表达式的开始和结束位置
  • | :或运算符 //例(js|img|css)

location匹配顺序

  • 多个正则location直接按书写顺序匹配,成功后就不会继续往后面匹配
  • 普通(非正则)location会一直往下,直到找到匹配度最高的(最大前缀匹配)
  • 当普通location与正则location同时存在,如果正则匹配成功,则不会再执行普通匹配
  • 所有类型location存在时,“=”匹配 > “^~”匹配 > 正则匹配 > 普通(最大前缀匹配)

补充:URLRewrite

rewrite是实现URL重写的关键指令,根据regex (正则表达式)部分内容,重定向到replacement,结尾是flag标记。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
rewrite     <regex>     <replacement>     [flag];
关键字         正则       替代内容          flag标记

正则:perl兼容正则表达式语句进行规则匹配

替代内容:将正则匹配的内容替换成replacement

flag标记:rewrite支持的flag标记

rewrite参数的标签段位置: server,location,if

flag标记说明 last #本条规则匹配完成后,继续向下匹配新的1ocation URI规则 break #本条规则匹配完成即终止,不再匹配后面的任何规则 redirect #返回302临重定向,游览器地址会显示跳转后的URL地址 permanent #返回301永久重定向,测览器地址栏会显示跳转后的URL地址

浏览器地址栏访问 xxx/123.html实际上是访问xxx/index.jsp?pageNum=123

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
server {
        listen       80;
        server_name  localhost;
				
				location / { 
						rewrite ^/([0-9]+).html$ /index.jsp?pageNum=$1  break;
        		proxy_pass http://xxx;
        }
      

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
}

​​​我正在参与2023腾讯技术创作特训营第二期有奖征文,瓜分万元奖池和键盘手表

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
ES6 主要的新特性
本文基于lukehoban/es6features ,同时参考了大量博客资料,具体见文末引用。 ES6(ECMAScript 6)是即将到来的新版本JavaScript语言的标准,代号harmony(和谐之意,显然没有跟上我国的步伐,我们已经进入中国梦版本了)。上一次标准的制订还是2009年出台的ES5。目前ES6的标准化工作正在进行中,预计会在14年12月份放出正式敲定的版本。但大部分标准已经就绪,且各浏览器对ES6的支持也正在实现中。要查看ES6的支持情况请点此。 目前想要运行ES6代码的话,可以用go
庞小明
2018/03/09
1K0
ECMAScript 6 新特性总结
个人感觉ECMAScript 6总体上来说:添加了块级作用域,增加了一些语法糖,增强了字符串的处理,引入Generator函数控制函数的内部状态的变化,原生提供了Promise对象,引入了Class(类)的概念,并且在语言规格的层面上实现了模块功能。 注:
IMWeb前端团队
2019/12/03
8520
(转)ES6新特性概览
ES6(ECMAScript 6)是即将到来的新版本JavaScript语言的标准,代号harmony(和谐之意,显然没有跟上我国的步伐,我们已经进入中国梦版本了)。上一次标准的制订还是2009年出台的ES5。目前ES6的标准化工作正在进行中,预计会在14年12月份放出正式敲定的版本。但大部分标准已经就绪,且各浏览器对ES6的支持也正在实现中。要查看ES6的支持情况请点此。 目前想要运行ES6代码的话,可以用google/traceur-compiler将代码转译。点此访问traceur-compiler
前端黑板报
2018/01/29
9710
ES6 常用知识总结
ECMAScript 6.0(以下简称 ES6)是 JavaScript 语言的下一代标准,已经在 2015 年 6 月正式发布了。它的目标,是使得 JavaScript 语言可以用来编写复杂的大型应用程序,成为企业级开发语言。
EchoROne
2022/08/15
5470
重读 ES6 标准入门(第3版)
仅将自己的理解做整理、归类并结合实际遇到的问题做记录,更推荐阅读 ECMAScript 6 入门。
掘金安东尼
2024/01/28
1620
es6入门
es6作为最新的js语言版本,有很多特性是不得不晓的。下面将语法中常用的分析出来,对应到基本对象类型的会在对象里描述。
RobinsonZhang
2018/08/28
5650
ECMAScript 6 学习笔记
IMWeb前端团队
2017/12/29
9080
es6学习笔记
ECMAScript 6.0( 以下简称ES6) 是JavaScript语言的下一代标准。
earthchen
2020/09/24
9910
用简单的方法学习ECMAScript 6
这里是ECMAScript 6 简要概览 本文大量参考了es6特性代码仓库,请允许我感谢其作者Luke Hoban的卓越贡献,也感谢Axel Rauschmayer所作的优秀书籍。
疯狂的技术宅
2019/03/28
1.8K0
用简单的方法学习ECMAScript 6
ES6新特性概览
前言 ECMAScript 6(以下简称ES6)是JavaScript语言的下一代标准,已经在2015年6月正式发布了。它的目标,是使得JavaScript语言可以用来编写复杂的大型应用程序,成为企业级开发语言。 标准的制定者有计划,以后每年发布一次标准,使用年份作为标准的版本。因为当前版本的ES6是在2015年发布的,所以又称ECMAScript 2015。也就是说,ES6就是ES2015,下一年应该会发布小幅修订的ES2016。 废话不多说,直接开始介绍ES6中的新特性,让你一睹新生代JS的风采。
laixiangran
2018/04/11
1K0
ES6的语法
世间万物皆对象
2024/03/20
1870
1w5000字概括ES6全部特性
第三次阅读阮一峰老师的《ECMAScript 6 入门》了,以前阅读时不细心,很多地方都是一目十行。最近这次阅读都是逐个逐个字来读,发现很多以前都没有注意到的知识点,为了方便记忆和预览全部ES6特性,所以写下本文。
前端迷
2020/02/25
1.7K0
从ES6到ES10的新特性万字大总结(不得不收藏)
ECMAScript是一种由Ecma国际(前身为欧洲计算机制造商协会)在标准ECMA-262中定义的脚本语言规范。这种语言在万维网上应用广泛,它往往被称为JavaScript或JScript,但实际上后两者是ECMA-262标准的实现和扩展。
陈大鱼头
2020/04/16
2.4K0
ES6总结
var命令会发生“变量提升”现象,即变量可以在声明之前使用,值为undefined。
愤怒的小鸟
2020/12/15
5930
ES6
在cmd命令窗口初始化项目-y代表全部默认同意,就不用一次次按回车了。命令执行完成后,会在项目根目录下生产package.json文件。
楠楠
2018/09/11
2.8K0
ES6面试、复习干货知识点汇总
https://juejin.cn/post/6844903734464495623
@超人
2021/07/29
5540
Babel下的ES6兼容性与规范
IMWeb前端团队
2017/12/28
2.1K0
前端面试必备ES6全方位总结
学习ES6需要掌握的路线,了解什么是ECMAScript概述,了解Symbol数据类型,掌握let和const,以及变量的解构赋值,Set和Map的原理。
达达前端
2022/04/13
1.2K0
前端面试必备ES6全方位总结
学习ES6 你必须知道的新特性!!关于数组的扩展
扩展运算符(spread)是三个点(…)。它好比 rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列。
我只会写Bug啊
2023/12/25
1560
「建议收藏」送你一份精心总结的3万字ES6实用指南(上)
写本篇文章目的是为了夯实基础,基于阮一峰老师的著作 ECMAScript 6 入门 以及 tc39-finished-proposals 这两个知识线路总结提炼出来的重点和要点,涉及到从 ES2015 到 ES2021 的几乎所有知识,基本上都是按照一个知识点配上一段代码的形式来展示,所以篇幅较长,也正是因为篇幅过长,所以就没把 Stage 2 和 Stage 3 阶段的提案写到这里,后续 ES2021 更新了我再同步更新。
用户4456933
2021/06/01
8650
「建议收藏」送你一份精心总结的3万字ES6实用指南(上)
相关推荐
ES6 主要的新特性
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验