podium micro-frontends 简单试用
以下是一个简单的podium 试用，包含了layout 以及podlets,使用docker 运行
podium 主要包含了两大部分
- podlets
片段服务 - layouts
片段组合服务
环境准备
- docker-compose 文件
version: '3'
services:
layout:
build:
context: layouts/home
dockerfile: Dockerfile
ports:
- "7000:7000"
layout-index:
build:
context: podlets/indexpage
dockerfile: Dockerfile
ports:
- "7100:7100"
layout-userlogin:
build:
context: podlets/userlogin
dockerfile: Dockerfile
ports:
- "7101:7101"
服务编写
- podlets/indexpage
package.json
{
"name": "indexpage",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"dependencies": {
"@podium/podlet": "^4.2.0",
"express": "^4.17.1"
},
"scripts": {
"app":"node index"
}
}
index.js
const express = require("express")
const Podlet = require("@podium/podlet")
const app = express();
const podlet = new Podlet({
name: 'index', // required
version: '1.0.0', // required
pathname: '/', // required
manifest: '/manifest.json', // optional, defaults to '/manifest.json'
content: '/', // optional, defaults to '/'
development: true, // optional, defaults to false
});
app.use(podlet.middleware());
app.get(podlet.content(), (req, res) => {
res.status(200).podiumSend(`
<div>
This is the index podlet's HTML content
</div>
`);
});
app.get(podlet.manifest(), (req, res) => {
res.status(200).send(podlet);
});
app.listen(7100);
Dockerfile
FROM node:alpine
LABEL AUTHOR="1141591465@qq.com"
WORKDIR /app
COPY . /app
RUN yarn
EXPOSE 7100
RUN yarn
CMD [ "yarn", "app"]
- podlets/userlogin
package.json
{
"dependencies": {
"@podium/podlet": "^4.2.0",
"express": "^4.17.1"
},
"name": "userlogin",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"scripts": {
"app":"node index"
}
}
index.js
const express = require("express")
const Podlet = require("@podium/podlet")
const app = express();
const podlet = new Podlet({
name: 'userlogin', // required
version: '1.0.0', // required
pathname: '/userlogin', // required
manifest: '/manifest.json', // optional, defaults to '/manifest.json'
development: true, // optional, defaults to false
});
app.use(podlet.middleware());
app.get(podlet.content(), (req, res) => {
res.status(200).podiumSend(`
<div>
This is the userlogin podlet's HTML content
</div>
`);
});
app.get(podlet.manifest(), (req, res) => {
res.status(200).send(podlet);
});
app.listen(7101);
Dockerfile
FROM node:alpine
LABEL AUTHOR="1141591465@qq.com"
WORKDIR /app
COPY . /app
RUN yarn
EXPOSE 7101
RUN yarn
CMD [ "yarn", "app"]
- layouts/home
package.json
{
"name": "home",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"dependencies": {
"@podium/layout": "^4.2.0",
"express": "^4.17.1"
},
"scripts": {
"app":"node index"
}
}
index.js
const express = require('express');
const Layout = require('@podium/layout');
const app = express();
const layout = new Layout({
name: 'dashboard', // required
pathname: '/', // required
});
const index = layout.client.register({
name: 'index', // required
uri: 'http://layout-index:7100/manifest.json', // required
});
const userlogin = layout.client.register({
name: 'userlogin', // required
uri: 'http://layout-userlogin:7101/manifest.json', // required
});
app.use(layout.middleware());
app.get('/', async (req, res,next) => {
const incoming = res.locals.podium;
const [a,b] = await Promise.all([
index.fetch(incoming),
userlogin.fetch(incoming),
]);
incoming.view.title = 'My Super Page';
res.podiumSend(`
<section>${a.content}</section>
<section>${b.content}</section>
`);
});
app.listen(7000);
Dockerfile
FROM node:alpine
LABEL AUTHOR="1141591465@qq.com"
WORKDIR /app
COPY . /app
RUN yarn
EXPOSE 7000
RUN yarn
CMD [ "yarn", "app"]
构建&&启动
- 构建镜像
docker-compose build
- 启动
docker-compose up -d
- 效果
说明
podlets 提供片段服务，layout 提供webpage 的组合服务，使用上还是比较简单的，同时里边也包含了版本的处理（通过元数据服务）
参考资料
https://podium-lib.io/docs/podium/conceptual_overview
https://github.com/rongfengliang/podium-docker-compose
