openresty 页面静态化及多级缓存

「这是我参与2022首次更文挑战的第22天，活动详情查看：2022首次更文挑战」

openresty 页面静态化及多级缓存

多级缓存：

• 数据缓存的好处不用介绍了吧！， 所谓多级缓存，即在整个系统架构的不同系统层级进行数据缓存，以提升访问效率，这也是应用最广的方案之一。
• 而 nginx 是可以缓存数据的，缓存在内存中，提高程序性能！ 程序中可以做缓存的技术有很多，加在以前就叫 多级缓存 而且不同的缓存技术存在，在不同的地方..实现不同的功能！
• 目前我所知道可以做缓存的有： nginx —— Elasticearch —— redis —— @Ehcache JVM缓存 —— mybatis也有二级缓存！太强了！ 当然本章并不会讲解这么多，而是抽出几个来： nginx redis @Ehcache JVM缓存

页面静态化 模板渲染

• 动态web网页开发是Web开发中一个常见的场景 比如像京东商品详情页，其页面逻辑是非常复杂的，需要使用模板技术来实现。 而Lua中也有许多模板引擎 lua-resty-template 可以渲染很复杂的页面，借助LuaJIT其性能也是可以接受的。

什么是动态页面？什么是静态页面？

• 动态网页： 是以.asp、.jsp、.php、.perl、.cgi等形式为后缀， 根据用户的不同的操作，呈现出不同的数据给用户看； eg: 浏览器的 搜索~ 输入不同的关键字 会呈现给用户不同的内容；
• 静态页面： 静态网页是实际存在的，无需经过服务器的编译，直接加载到客户浏览器上显示出来。 静态页面需要占一定的服务器空间，且不能自主管理发布更新的页面， 如果想更新网页内容，要通过FTP软件把文件DOWN下来用网页制作软件修改（通过fso等技术例外）常见的静态页面举例：.html扩展名的、.htm扩展名的
• 除了静态页面和动态页面还有一种的伪静态页面，在网站页面转化的时候大多转化成伪静态页面。

为什么需要页面静态化

• 网页静态化有利于搜索引擎收录，静态页面和动态页面想对比来说，搜索引擎更喜欢静态页面 对于静态页面也更好抓取收录，这样对于网站优化来说有很大的好处，更利于排名 你可以去观察那些大型的门户网站，比如新浪、阿里巴巴、百度等页面大多采用静态或伪静态页面来显示，可想而知，这足够说明了静态化带给网站很大好处。
• 网页静态化有利于网站的稳定性 首先从安全角度来看，静态页面不容易遭受黑客的攻击， 黑客从你的网址中看不出你网站的后台、网站的程序、数据库的地址，这样就比动态页面要安全的多。 还有就是静态页面不会因为程序、数据库等出问题，影响网站的正常打开静态页面会使网站更加稳定，增加网站的信任度。
• 网页静态化有利于提高速度 SEO网站优化的一个很重要的因素就是网站打开速度的快慢，打开速度越快，SEO优化效果越好... 众所周知动态页面打开都是要调用数据库内容，这样就影响了网站速度，而静态页面则不用，减少了环节，提高了网站反映速度。

实例Demo

Boot 多级缓存设置：

这里是 redis 和 Ehcache的Java代码缓存方式：不细致讲解可以了解：点击

• Service层 —— Controller层——数据展示！

nginx 缓存 ＋页面静态化处理：

当然主要是 lua ...

info.lua

 -- 中文转码
 ngx.header.content_type="text/html;charset=utf8"
 -- 获取url    参数 
 local uri_args = ngx.req.get_uri_args()
 local goodsId = uri_args["goodsId"]
 -- 打印日志 
 ngx.log(ngx.ERR,"json------",goodsId)
 ​
 local cache_ngx = ngx.shared.my_cache               -- nginx 缓存模板对象
 local goodsCacheKey = "goods:"..goodsId             -- 设置key
 local goodsCache = cache_ngx:get(goodsCacheKey)     -- 根据get(key); 获取缓存中数据！
 -- 判断是否存在数据 “” 或 nil 就发送请求....
 if goodsCache == "" or goodsCache == nil then
 local http = require("resty.http")
 local httpc = http.new()
 local resp, err = httpc:request_uri("http://127.0.0.1:6001",{
  method = "GET",
  path = "/showinfo/"..goodsId
 })
 -- 获取结果
 goodsCache = resp.body
 -- 设置缓存时间
 local expireTime = math.random(600,1200)
 -- set(key,value); 设置缓存
 cache_ngx:set(goodsCacheKey,goodsCache,expireTime)
 end
 ​
 -- 日志输出
 ngx.log(ngx.ERR,"json------",goodsCache)
 -- 获取到JSON 模板！
 local cjson = require("cjson")
 local goodsCacheJSON = cjson.decode(goodsCache) -- 结果数据转换成JSON
 -- 响应参数封装 context 
 local context = {
 goodsname = goodsCacheJSON.spu.name,
 img = goodsCacheJSON.spu.images,
 introduction = goodsCacheJSON.spu.introduction,
 specItems = goodsCacheJSON.spu.specItems
 }
 -- 获取模板对象。
 local template = require("resty.template")
 template.render("item.html", context)           -- context 传入指定模板静态页面！
复制代码

缓存

 local cache_ngx = ngx.shared.my_cache               -- nginx 缓存模板对象
 ​
 local goodsCache = cache_ngx:get(goodsCacheKey)     -- 根据get(key); 获取缓存中数据！
 -- 判断是否存在数据 “” 或 nil 就发送请求....
 if goodsCache == "" or goodsCache == nil then
     -- 请求数据通过set方法,根据指定key 设置缓存/缓存时间(建议随机预防 缓存雪崩！)
     -- 设置缓存时间
     local expireTime = math.random(600,1200)
     -- set(key,value); 设置缓存
     cache_ngx:set(goodsCacheKey,goodsCache,expireTime)
 end
复制代码

ok。以上就是nginx 设置缓存的基本结构语法... 总的来说并不难！

页面静态化处理

nginx lua 通过：lua-resty-template实现大体内容有：

• 模板位置：从哪里查找模板；
• 变量输出/转义：变量值输出；
• 代码片段：执行代码片段，完成如if/else、for等复杂逻辑，调用对象函数/方法；
• 注释：解释代码片段含义；
• include：包含另一个模板片段；

模板位置

• 我们需要告诉lua-resty-template去哪儿加载我们的模块 此处可以通过set指令定义 template_location、template_root 或者使用 root指令定义的位置加载

nginx执行的配置文件：指定该请求下的模板位置 lua.conf

 #给nginx 分内存 128m 兆  缓存大小！用于存放热点数据（频繁使用的数据！）
 lua_shared_dict my_cache 128m;
 ​
 #nginx服务
 server {
     listen  9090;       #指定端口9090，默认80
     server_name _;
 ​
     #静态资源管理模板地址...
     set $template_location "/templates";
     set $template_root "D:/WSMwork/www/templates";
     
     root D:/WSMwork/www/templates;      # "指定要导入的模板路径！"  
     #注意这里不能设置 中文地址！
 ​
     location /info{
         default_type text/html;
         content_by_lua_file D:/WSMwork/www/info.lua;
     }
 }
复制代码

加载顺序

• 通过ngx.location.capture从template_location查找，如果找到（状态为为200）则使用该内容作为模板； 此种方式是一种动态获取模板方式；
• 如果定义了template_root，则从该位置通过读取文件的方式加载模板
• 如果没有定义template_root，则默认从root指令定义的document_root处加载模板。
• 建议首先template_root 尽量不要通过root指令定义的document_root加载，因为其本身的含义不是给本模板引擎使用的。

这时候，静态数据就已将放在了nginx服务器中，启动运行...

• 可以直接通过，请求来获取到服务器上部署的文件....
• 当然对于静态的 html css Js...一些文件进行配置！注意html文件中引入的外部样式路劲进行更改！

lua 脚本控制静态页面：变量输出

 -- 获取到JSON 模板！
 local cjson = require("cjson")
 local goodsCacheJSON = cjson.decode(goodsCache)     -- 返回结果数据转换成JSON
 -- 响应参数封装 context 
 local context = {
 goodsname = goodsCacheJSON.spu.name,
 img = goodsCacheJSON.spu.images,
 introduction = goodsCacheJSON.spu.introduction,
 specItems = goodsCacheJSON.spu.specItems
 }
 ​
 -- 获取模板对象。
 local template = require("resty.template")
 --是否缓存解析后的模板，默认true
 template.caching(true)
 template.render("item.html", context)           -- context 传入指定模板静态页面！
复制代码

• item.html 商品详情页面。 nginx 可以通过 context 给静态化页面设置一些变量实现 伪静态化页面 {* 变量名 *} 页面中输出值！

更多实例：

lua脚本 info1.lua

 -- 中文转码
 ngx.header.content_type="text/html;charset=utf8"
 local template = require("resty.template")
  
 local context = {
     title = "测试",
     name = "张三",
     description = "<script>alert(1);</script>",
     age = 20,
     hobby = {"电影", "音乐", "阅读"},
     score = {语文 = 90, 数学 = 80, 英语 = 70},
     score2 = {
         {name = "语文", score = 90},
         {name = "数学", score = 80},
         {name = "英语", score = 70},
     }
 }
 template.render("t3.html", context)
复制代码

• 文件保存 utf-8 ....格式;

静态页面：

lua.html

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
 </head>
 <body>
     <h1> nginx页面静态化 </h1>
 ​
     {# 不转义变量输出 #}
     姓名：{* string.upper(name) *}<br/>
     
     {# 不转义输出,html形式输出,JS CSS 格式数据会成立！ #}
     {* description *}
     {# 转义变量输出,已文本形式输出... #}
     简介：{{description}}<br/>
     
     {# 可以做一些运算 #}
     年龄: {* age + 1 *}<br/>
     
     {# 循环输出 #}
     爱好：
     {% for i, v in ipairs(hobby) do %}
        {% if i > 1 then %}，{% end %}
        {* v *}
     {% end %}<br/>
 ​
     成绩：
     {% local i = 1; %}
     {% for k, v in pairs(score) do %}
        {% if i > 1 then %}，{% end %}
        {* k *} = {* v *}
        {% i = i + 1 %}
     {% end %}<br/>
     
     成绩2：
     {% for i = 1, #score2 do local t = score2[i] %}
        {% if i > 1 then %}，{% end %}
         {* t.name *} = {* t.score *}
     {% end %}<br/>
     
     {# 中间内容不解析 #}
     {-raw-}{(file)}{-raw-}
 ​
     {# 引入外部文件 #}
     {(lua2.html)}
 </body>
 </html>
复制代码

lua2.html

 <h1> 引入外部lua2.html 代码 </h1>
复制代码

• {(include_file)} ：包含另一个模板文件，相当于引入外部的 html 代码片段；
• {* var *} ：变量输出；
• {{ var }} ：变量转义输出, 不已以html 语法进行转义输出，可以使用 JS CSS等标签..
• {% code %} ：lua代码片段；
• {# comment #} ：注释；
• {-raw-} 中间的内容不会解析，作为纯文本输出；

nginx配置文件 lua.conf 添加

 location /info1{
         default_type text/html;
         content_by_lua_file D:/WSMwork/www/info1.lua;
     }
复制代码

• 模板最终被转换为Lua代码进行执行，所以模板中可以执行任意Lua代码。
• 如果学习过JavaEE中的servlet和JSP的话，应该知道JSP模板最终会被翻译成Servlet来执行； 而lua-resty-template模板引擎可以认为是JSP，其最终会被翻译成Lua代码，然后通过ngx.print输出。

测试：