openresty 页面静态化及多级缓存

冷不防 2022-11-09 06:02 301阅读 0赞

# openresty 页面静态化及多级缓存 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NTQyMzgw_size_16_color_FFFFFF_t_70]

## 多级缓存： ##

*  数据缓存的好处不用介绍了吧！，  
    所谓多级缓存，即在整个系统架构的不同系统层级进行数据缓存，**以提升访问效率，这也是应用最广的方案之一。**
 *  **而 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代码缓存方式：`不细致讲解`可以了解：[点击][Link 1]**

*  **Service层 —— Controller层——数据展示！**  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NTQyMzgw_size_16_color_FFFFFF_t_70 1]

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NTQyMzgw_size_16_color_FFFFFF_t_70 2]  
**加载顺序**

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

**这时候，静态数据就已将放在了nginx服务器中，启动运行…**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NTQyMzgw_size_16_color_FFFFFF_t_70 3]

*  **可以直接通过，请求来获取到服务器上部署的文件…**
 *  `当然对于静态的 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 传入指定模板静态页面！

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NTQyMzgw_size_16_color_FFFFFF_t_70 4]

*  **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输出。

### 测试： ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NTQyMzgw_size_16_color_FFFFFF_t_70 5]

--------------------

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NTQyMzgw_size_16_color_FFFFFF_t_70]: /images/20221023/3c70de6e0f0a4757bac79df4a45521dd.png
[Link 1]: https://blog.csdn.net/qq_45542380/article/details/112958881
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NTQyMzgw_size_16_color_FFFFFF_t_70 1]: /images/20221023/6c0a203fa38c4cd0a8de7c99247e48b4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NTQyMzgw_size_16_color_FFFFFF_t_70 2]: /images/20221023/86a069d9a9864eb78bba3f8fb857468e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NTQyMzgw_size_16_color_FFFFFF_t_70 3]: /images/20221023/f77904591e0140a58524985633ed87c1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NTQyMzgw_size_16_color_FFFFFF_t_70 4]: /images/20221023/c2d38548398d45c58966d2d1b4999fc3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NTQyMzgw_size_16_color_FFFFFF_t_70 5]: /images/20221023/03125ae060c44223a377d68b4e2446c9.png