前端配置化平台——快速搞定活动页面

共 2783字,需浏览 6分钟

 ·

2021-03-18 18:55

痛点及要求


- 成本比较高:广告活动平台,一直以来都是变化最多耗用人力最多的一件事情,而且每次都要研发配合去开发新的页面,每个页面又只使用两三天。

- 业务对平台的基本要求:C端的稳定性,B端的灵活性。

- 技术对平台的要求:服务稳定要在 99.999%


项目介绍


配置化平台主要功能是可以灵活、方便、快捷生成活动等相关页面,降低开发成本,新活动生成无需额外的开发工作,只需简单配置即可快速上线。此次介绍内容分别从后台配置及用户端阐述,在开始之前先简单介绍一下 Openresty 和 Lua。


Openresty


OpenResty(又称:ngx_openresty)是一个基于 Nginx 与 Lua 的高性能 Web 平台,其内部集成了大量精良的 Lua 库、第三方模块以及大多数的依赖项,用于方便地搭建能够处理超高并发、扩展性极高的动态 Web 应用、Web 服务和动态网关。


OpenResty 的目标是让你的 Web 服务直接跑在 Nginx 服务内部,充分利用 Nginx 的非阻塞 I/O 模型,不仅仅对 HTTP 客户端请求,甚至于对远程后端诸如 MySQL、PostgreSQL、Memcached 以及 Redis 等都进行一致的高性能响应。所以对于一些高性能的服务来说,可以直接使用 OpenResty 访问 Mysql 或 Redis等,而不需要通过第三方语言(PHP、Python、Ruby)等来访问数据库再返回,这大大提高了应用的性能。


Lua


Lua 是一种轻量小巧的脚本语言,用标准 C 语言编写并以源代码形式开放,其设计目的是为了嵌入应用程序中,从而为应用程序提供灵活的扩展和定制功能。


Lua特性


- 轻量级:它用标准 C 语言编写并以源代码形式开放,编译后仅仅一百余 K,可以很方便地嵌入别的程序里。

- 可扩展:Lua 提供了非常易于使用的扩展接口和机制,由宿主语言(通常是 C 或C++)提供这些功能。Lua 可以使用它们,就像是本来就内置的功能一样。

- 其它特性:

  • 支持面向过程(procedure-oriented)编程和函数式编程(functional programming);

  • 自动内存管理。只提供了一种通用类型的表(table),用它可以实现数组,哈希表,集合,对象;

  • 语言内置模式匹配;闭包(closure);函数也可以看做一个值;提供多线程(协同进程,并非操作系统所支持的线程)支持;

  • 通过闭包和 table 可以很方便地支持面向对象编程所需要的一些关键机制,比如数据抽象,虚函数,继承和重载等。


应用场景


  • 游戏开发

  • 独立应用脚本

  • Web 应用脚本

  • 扩展和数据库插件,如:MySQL Proxy 和 MySQL WorkBench

  • 安全系统,如入侵检测系统


后台配置



后台配置相关流程中涉及 Openresty、Nginx、Lua 脚本、ElasticSearch、Redis 等。



Nginx配置


部分 nginx.config 配置如下:



1、Server 配置



在 server 配置中还导入了 locations 下的部分配置,配置如下:



当请求 url 匹配到包含 /example/ 时,对于请求数据进行处理,其中包含:

  1. 单条JSON限制为5M
  2. lua对于请求访问阶段处理
  3. 转发到Es服务


单条 JSON 限制以及请求方式的拦截都可以在配置当中清晰地了解到,再看一下 Lua 到底做了些什么?


2、Lua 相关


在此配置化平台中,Lua 的主要作用是为了同步数据到 Redis 中,这样当用户端访问数据的时候,如果是已经存在 Redis 中且未过期的情况下,那么将会直接读取 Redis 中的数据,而不是通过 ES 服务来获取数据。


接下来看一下具体实现。首先,在 location 引入 lua 相关的配置,通过 access_by_lua_file 来嵌入 lua 相关处理。



(1)链接 Redis



(2)PUT、POST请求数据缓存


链接 Redis 成功之后,开始针对请求访问进行处理,如果是 PUT、POST 请求对数据进行缓存处理,并设置缓存过期时间,代码如下:



(3)DELETE 请求清除缓存


当请求方式为 DELETE 时,将数据从 Redis 数据中进行清除,并将缓存过期时间设置为0,代码如下:



ElasticSearch


ElasticSearch,简称 ES。ES 是一个开源的高扩展的分布式全文搜索引擎。它可以近乎实时地存储、检索数据。本身扩展性很好,可以扩展到上百台服务器,处理 PB 级别的数据。ES 也是用 Java 开发并使用 Lucene 作为其核心来实现所有索引和搜索的功能,但是他的目的是通过简单 RESTful API来隐藏 Lucene 的复杂性,从而让全文搜索变得简单。


ElasticSearch 对比传统关系型数据库:




- Elasticsearch-head 插件


对于 ES 具体的数据我们可以通过 elasticsearch-head 插件来查看索引、类型、分片、文档等信息,如下图所示:



- ES 后台配置


以栏目配置为例,其中包含 settings 中的分片设置,mappdings 中针对 menu 栏目配置的相关字段,elasticsearch-head 插件中的部分索引信息如下:



用户端



此前,我们通过配置化平台后台配置一些相关活动相关的数据,并存放在 ES 服务以及Redis 中。在用户端时,当有用户访问到我们生成好的活动页面时,首先在 Nginx 中通过 content_by_lua_file 配置使用 Lua 对于活动配置相关的请求处理,对于非 GET 方式的请求将会直接返回 403,否则会在 Redis 中去查询相关的数据并返回到用户端。


- 用户端 Nginx 中 server 配置



- Lua 在用户端的请求访问处理


在后台配置中已经提到 Lua 链接 Redis 以及针对不同的请求方式的拦截处理,接下来看一下在用户端相关处理,代码如下:



可以看到对于非 Get 方式的请求进行拦截,并返回 403,否则将链接 Redis,代码如下:



推荐阅读:

基于 Vue CLI 搭建脚手架。

破解项目臃肿之道:微前端落地实践

H5 活动页面快速生成神器——Mocha

从理解 React 框架开始,开启金三银四面试之旅。

前端典型面试题:为什么 React 选择使用 JSX ?

尤雨溪 3 天 10 更的 Vite 究竟有什么魔力?


点个“在看”和“”吧,

毕竟我是要成为前端网红的人。

浏览 124
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报