tailor+ skipper 实现micro-frontends 简单试用
tailor 在Mosaic 框架中扮演fragment 模版layout的处理，后端fragment可以用任何服务编写
tailor 主要就是进行layout的处理。tailor的是类似facebook bigpipe的实现，功能挺强大的。
说明：测试使用docker-compose 运行
环境准备
- docker-compose 文件
version: "3"
services:
skipper:
image: dalongrong/skipper:latest
ports:
- "9090:9090"
- "9911:9911"
volumes:
- "./router.eskip:/router.eskip"
command: skipper -enable-ratelimits -enable-prometheus-metrics -routes-file /router.eskip
web:
build:
context: ./
dockerfile: Dockerfile
ports:
- "8080:8080"
fragment-a:
build:
context: ./
dockerfile: Dockerfile-fragment-a
ports:
- "8081:8081"- web dockerfile
web 服务实际上是入口服务，为了简单，使用了docker 运行，实际上就是一个node 项目，使用tailor 进行layout处理
FROM node:9
WORKDIR /app
COPY index.js /app/index.js
COPY templates /app/templates
COPY package.json /app/package.json
RUN yarn
CMD [ "yarn","start"]index.js 是入口
'use strict';
const http = require('http');
const Tailor = require('node-tailor');
const tailor = new Tailor({
templatesPath: './templates'
});
// Root Server
http
.createServer((req, res) => {
tailor.requestHandler(req, res);
})
.listen(8080, function() {
console.log('Tailor server listening on port 8080');
});
模版定义
templates 目录下，注意需要一个index.html 的文件
<!-- Tailor needs an index.html -->
<h1>dalong demo</h1>
// 此处使用skipper 的router 之后的地址
<fragment primary src="http://skipper:9090/fragment-a"></fragment>- fragment dockerfile
fragment 是具体的代码片段的代码,这个比较简单，就是一个html 页面的输出
FROM node:9
WORKDIR /app
COPY fragment-a/* /app/
EXPOSE 8081
CMD [ "yarn","start" ]fragment-a/index.js
const http = require('http');
http
.createServer((req, res) => {
res.writeHead(200, {
'Content-Type': 'text/html'
});
res.end('<div>Fragment 1</div>');
})
.listen(8081, function() {
console.log('Fragment Server listening on port 8081');
});
- skipper router 配置
主要是对于路由的添加,同时添加了一些filter 支持gzip 以及cors
root: Path("/") ->setPath("/index")->compress("text/html")-> corsOrigin()
->setResponseHeader("TOKEN","dalongdemo") ->"http://web:8080";
fragment_a: Path("/fragment-a") ->compress("text/html")-> corsOrigin()
->"http://fragment-a:8081";启动&&测试
- 启动
docker-compose up -d- 效果
访问http://localhost:9090 可以查看效果，或者http://localhost:8080/index 访问没有使用skipper 的入口
说明
测试代码很简单，实际可以支持好多强大的功能，具体的可以参考tailor 的examples 目录
