一个很简单的需求,就是静态页面请求url 的rewrite 方便使用,类似mvc 的路由,不同的请求,对应到后边不同的website,但是是一个地址

作用:类似一种micro frontend 的一些部分功能实现,这样静态web site 就有了一个统一而且灵活的入口 ,比较适合sass,或者用户有特定

需求的场景

格式处理

调整为的格式

http://:/<.html>/

website 部署规则说明

subpath的命名为/

正则规则

需求比较明确了,rewrite 我们基于正则处理,所以需要先梳理出来正则的格式

参考格式:

^(.*?)(.html)?\/(\d)$

说明 任意字符开始 .html 开头以及结尾是可选的,同时以数字开头的(目前只处理了一个数字的,多个也很简单)

^(.*?)(.html)?\/(\d+)$

重写处理使用了正则的分组匹配

格式:

/demo$3$1

基于nginx rewrite 的实现

参考部署目录结构

说明demo1 以及demo2是我们需要部署的website,为了给用户一个清晰,简单的访问入口,原有提供的格式成为内部(nginx 使用internal)

├── README.md
├── demoapps
│   ├── 404.html
│   ├── default
│   │   └── index.html
│   ├── demo1
│   │   ├── css1
│   │   │   └── index.css
│   │   ├── index
│   │   ├── index.html
│   │   └── js1
│   ├── demo2
│   │   ├── css2
│   │   │   └── index.css
│   │   ├── index
│   │   ├── index.html
│   │   └── js2
│   ├── favicon.ico
│   └── index.html
├── docker-compose.yaml
├── nginx.conf

为了简单使用了demo 的prefix

nginx 配置

说明使用rewrite 的正则匹配,内容部分使用了openresty, rewrite 使用了last 模式的

server {
listen 80;
charset utf-8;
default_type text/html;
location / {
root /opt/demoapps/;
index index.html index.htm index;
# 不同规则的重写(比如固定的几个),注意last 与break 的区别
rewrite ^(.*?)(.html)?\/(\d)$ /demo$3$1 last;
# rewrite ^(.*?)(.html)?\/2$ /demo2$1 last;
}
error_page 404 /404.html;
# 不存在默认界面
location = /404.html {
root /opt/demoapps/;
}
location /css1 {
root /opt/demoapps/demo1;
}
location /css2 {
root /opt/demoapps/demo2;
}
location =/favicon.ico {
root /opt/demoapps/;
}
# 可以基于openresty 的处理,此处可以基于web 框架处理比如 lua-resty-route 以及lua-resty-template
location ~* ^/demo {
internal;
root /opt/demoapps/;
#   content_by_lua_block {
#       local cjson = require("cjson.safe")
#       local args, err = ngx.req.get_uri_args()
#       if err == "truncated" then
#           ngx.say(cjson.encode([[fetch error]]))
#       end
#       local body = {
#           args = args,
#           url = ngx.var.request_uri
#       }
#       ngx.say(cjson.encode(body))
#   }
}
}

基于openresty 的配置

通过rewrite_by_lua_block 阶段处理

server {
listen 8080;
charset utf-8;
default_type text/html;
location / {
root /opt/demoapps/;
index index.html index.htm index;
rewrite_by_lua_block {
local uri,n,err = ngx.re.sub(ngx.var.uri, [[^(.*?)(.html)?\/(\d)$]], "/demo$3$1", "o")
ngx.log(ngx.ERR,"fetch"..uri)
local newuri = "/default"
if n >  0 then
newuri = uri
end
ngx.req.set_uri(newuri,true)
}
}
location /css1 {
root /opt/demoapps/demo1;
}
location /css2 {
root /opt/demoapps/demo2;
}
location =/favicon.ico {
root /opt/demoapps/;
}
error_page 404 /404.html;
# 不存在默认界面
location = /404.html {
root /opt/demoapps/;
}
location /default/ {
root /opt/demoapps/;
}
# 基于openresty 的处理,此处可以基于web 框架处理比如 lua-resty-route 以及lua-resty-template
location ~* ^/demo {
internal;
index index.html index.htm index;
root /opt/demoapps/;
#   content_by_lua_block {
#       local cjson = require("cjson.safe")
#       local args, err = ngx.req.get_uri_args()
#       if err == "truncated" then
#           ngx.say(cjson.encode([[fetch error]]))
#       end
#       local body = {
#           args = args,
#           url = ngx.var.request_uri
#       }
#       ngx.say(cjson.encode(body))
#   }
}
}

docker-compose 文件

version: "3"
services:
api:
image: openresty/openresty:alpine
volumes:
- "./nginx.conf:/usr/local/openresty/nginx/conf/nginx.conf"
- "./demoapps:/opt/demoapps"
ports:
- "80:80"
- "8080:8080"

效果

80 与8080的效果是一样的

默认页面

不同用户的website

说明

基于nginx 的rewrite或者使用openresty 的rewrite_by_lua_block 阶段,我们可以实现静态website的动态路由能力,高效而且方便,同时实际我们

使用的过程中基于s3或者oss 等效果会更好,可以让静态页面不在单一,而是具有了灵活的控制能力,比较适合复杂的website 项目而且是前后端

分离的项目