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 id="fragment-1" 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 目录

参考资料

https://www.mosaic9.org/
https://github.com/zalando/tailor
https://github.com/rongfengliang/tailor-skipper-docker-compose