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:alpineLABEL AUTHOR="1141591465@qq.com"WORKDIR /appCOPY . /appRUN yarnEXPOSE 7100RUN yarnCMD [ "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:alpineLABEL AUTHOR="1141591465@qq.com"WORKDIR /appCOPY . /appRUN yarnEXPOSE 7101RUN yarnCMD [ "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></section> <section></section>`);});app.listen(7000); Dockerfile
FROM node:alpineLABEL AUTHOR="1141591465@qq.com"WORKDIR /appCOPY . /appRUN yarnEXPOSE 7000RUN yarnCMD [ "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
