使用Lua+Redis+OpenResty实现电商首页并发优化

案例背景

电商首页通常都有广告轮播图,轮播图数据一般需要通过后台接口获得,当并发量较大时会给服务器带来压力。

一般的解决方案是将轮播图数据缓存到Redis中,这样就能减少对数据库的访问。

我们访问Redis也需要使用Java,Java项目部署在Tomcat中,Tomcat服务器也会面对并发量大的压力。

Nginx服务器的并发性能要远远高于Tomcat,在Nginx中使用Lua脚本就能实现MySQL和Redis的读写,绕过Tomcat,大大提高首页的并发性能。

案例需要使用OpenResty,参考:https://blog.csdn.net/u013343114/article/details/123991729

开发步骤

分为两大步骤:

1、缓存预热

2、缓存读取

缓存预热

使用Lua读取MySQL中的轮播图数据,保存到Redis中

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TPCS8uek-1655367724026)(Lua优化首页.assets/1655365058445.png)]

ad_update.lua

-- 获得uri中的sid参数值
local uri_args = ngx.req.get_uri_args()
local sid = uri_args["sid"]
-- 连接mysql
local mysql = require "resty.mysql"
local db = mysql:new()
db:set_timeout(1000)
local ok, err = db:connect{
    host = "127.0.0.1",
    port = 3306,
    database = "edu_ad",
    user = "root",
    password = "123456",
    charset = "utf8"
}
if not ok then
    ngx.say("failed to connect: ", err)
    return
end
ngx.say("connected to mysql.")
-- 按区域编号查询轮播图表
local res, err = db:query("select * from promotion_ad where space_id="..sid)
if not res then
    ngx.say("bad result: ", err)
    return
end
db:close()
-- 结果转换为json
local cjson = require "cjson"
ngx.say("res->",cjson.encode(res))
-- 连接redis
local redis = require "resty.redis"
local red = redis:new()
red:set_timeout(2000)
local ok,err = red:connect("127.0.0.1",6379)
if not ok then
    ngx.say("connect error: ", err)
    return
end
-- 保存到reids
red:set("ad_space_"..sid,cjson.encode(res))
red:close()

ngx.say("updated redis")

将ad_update.lua保存到openresty/nginx/conf/lua目录下

配置nginx.conf

server {
        listen 8080;
		default_type  'applicaiton/json;charset=utf8';
    	charset utf-8;

		location /ad_update{
	   		default_type text/html;
            content_by_lua_file conf/lua/ad_update.lua;
		}
   }

访问测试

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-16RM0inJ-1655367724042)(Lua优化首页.assets/1655366388575.png)]

缓存读取

分为两级缓存,一级缓存是nginx内部缓存,二级是redis缓存,先读取内部缓存,如果没有再读取redis缓存

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gf2FpNYm-1655367724055)(Lua优化首页.assets/1655366301383.png)]

ad_load.lua

-- 获得sid参数
local uri_args = ngx.req.get_uri_args()
local sid = uri_args["sid"]
-- 读取内部缓存
local cache = ngx.shared.dis_cache:get('ad_space_'..sid)
if cache == nil then
    -- 内部缓存没有读取redis
    local redis = require "resty.redis"
    local red = redis:new()
    red:set_timeout(2000)
    local ok, err = red:connect("127.0.0.1", 6379)
    local res = red:get('ad_space:'..sid)
    ngx.say(res)
    red:close()
    -- 保存到内部缓存
    ngx.shared.dis_cache:set('ad_space_'..sid, res, 10*60);
else
    ngx.say(cache)
end

配置nginx.conf

server {
        listen 8080;
		default_type  'applicaiton/json;charset=utf8';
    	charset utf-8;

		location /ad_update{
	   		default_type text/html;
            content_by_lua_file conf/lua/ad_update.lua;
		}
		location /ad_load{
	   		default_type text/html;
            content_by_lua_file conf/lua/ad_load.lua;
		}
   }

在http模块加内部缓存配置:

lua_shared_dict dis_cache 5m;    

访问测试

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-juVsJGZ7-1655367724060)(Lua优化首页.assets/1655366610354.png)]

首页

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>泡泡教育</title>
    <link rel="stylesheet" href="css/index.css">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
    <div id="app">
        <!--广告-->
        <div style=" width:1200px; margin:0px auto; margin-top:20px;">
            <el-carousel indicator-position="outside">
                <el-carousel-item v-for="(item , index) in adList" :key="index">
                    <a :href="item.link">
                        <img :src="item.img" style='width: 100%;height: 100%;object-fit: cover;'/>
                    </a>
                </el-carousel-item>
            </el-carousel>
        </div>
    </div>
<script>
   new Vue( {
        el:"#app",
        name: "Index",
        data() {
            return {
                adList: []
            };
        },
        created() {
            this.getAdList();
        },
        methods: {
            // 获取顶部轮播广告
            getAdList(){
                return axios
                    .get("http://192.168.7.188:8080/ad_load?sid=1")
                    .then((result) => {
                        console.log(result);
                        this.adList = result.data;
                    }
            ).catch( (error)=>{
                    this.$message.error("获取轮播广告失败!");
            });
            }
        }
    });
</script>
</body>
</html>

将网部署到nginx的html目录中,配置首页

location / {
    default_type text/html;
    root html/edu_learn_web;
    index index.html;
}

测试

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cr9znn8B-1655367724068)(Lua优化首页.assets/1655367062628.png)]

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

恒哥~Bingo

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值