# 拉取代码
git clone [email protected]:fmfe/vue-genesis-micro.git
# 进入项目目录
cd vue-genesis-micro
# 安装依赖
npm install
# 开发环境启动
npm run dev
# 打包生产环境代码
npm run build
# 生产环境运行
npm run start
微服务是一个新兴的软件架构,就是把一个大型的单个应用程序和服务拆分为数十个的支持微服务。
随着业务的发展,项目规模越来越大,给编译打包、合并的代码冲突带来了巨大的挑战,而服务的拆分可以获得更快的编译打包,独立部署、增量更新、不同的团队只需要负责自己的服务、更好的支持多端,在大型的项目中,使用微服务架构可以获得极大的收益。
目前社区的微前端解决方案,基本上都是基于客户端去进行聚合的思路,而本项目却是完全基于后端微服务的概念而诞生的,页面的聚合既可以在服务端完成,也可以在客户端完成,一切取决于需求。
本项目基于 Vue 的Genesis开发,一个编写了三个例子:
ssr-common
公共的页面导航ssr-home
首页ssr-about
关于我们Genesis是在FOLLOWME5.0升级而诞生的一个项目,它解决了以往架构的很多弊端,例如:
服务的拆分后,那么服务和服务之间的调用是必不可少的,这里提出了一个渲染接口的概念,它可能是这样子的
// 下面的接口,你可能需要做Nginx反向代理,来做到下面的接口
// /api/ssr-服务名称/render?url=渲染地址&mode=渲染模式&routerMode=路由模式
const renderModes = ['ssr-html', 'ssr-json', 'csr-html', 'csr-json'];
/**
* 提供一个API允许外部渲染
*/
app.use('/api/render', (req, res, next) => {
// 获取渲染的地址
const url = decodeURIComponent(String(req.query.renderUrl));
// 获取路由渲染的模式
const routerMode =
['abstract', 'history'].indexOf(String(req.query.routerMode)) > -1
? req.query.routerMode
: 'history';
// 渲染默认
const mode: any =
renderModes.indexOf(String(req.query.renderMode)) > -1
? String(req.query.renderMode)
: 'ssr-json';
renderer
.render({
url,
mode,
state: {
routerMode
}
})
.then((r) => {
res.send(r.data);
})
.catch(next);
});
这样第三方的服务,就可以随意的调用这个服务的渲染结果,传递需要渲染的地方渲染,比如Vue、React、或者其它的EJS模板引擎等等。本项目会使用渲染接口,来传递给远程组件进行渲染。
当你需要调用其它服务的页面渲染时,你请求渲染接口,拿到渲染的结果,传递给远程组件,它就会负责帮你渲染该服务的内容。
.
├── .vscode
│ ├── settings.json vscode的配置
├── examples 服务拆分的例子
│ ├── ssr-about 关于我们服务
│ | ├── src Vue源码目录
│ | | ├── views 页面目录
│ | | | ├── about-help.vue 帮助中心页面
│ | | | └── about-us.vue 关于我们页面
│ | | ├── app.vue 页面入口文件,公共导航
│ | | ├── entry-client.ts 客户端入口文件
│ | | ├── entry-server.ts 服务端入口文件
│ | | ├── router.ts 路由配置文件
│ | | └── shims-vue.d.ts .vue文件的TS声明
│ | ├── genesis.build.ts 当前服务生产环境构建入口
│ | ├── genesis.dev.ts 当前服务开发环境入口
│ | ├── genesis.prod.ts 当前服务生产环境入口
│ | └── genesis.ts 当前服务通用的服务端逻辑
│ ├── ssr-common 基础的页面聚合服务,包含公共导航
│ | ├── src Vue源码目录
│ | | ├── views 页面目录
│ | | | ├── about-help.vue 帮助中心页面
│ | | | └── about-us.vue 关于我们页面
│ | | ├── app.vue 页面入口文件,公共导航
│ | | ├── container.vue 子应用的容器
│ | | ├── entry-client.ts 客户端入口文件
│ | | ├── entry-server.ts 服务端入口文件
│ | | ├── router.ts 路由配置文件
│ | | └── shims-vue.d.ts .vue文件的TS声明
│ | ├── genesis.build.ts 当前服务生产环境构建入口
│ | ├── genesis.dev.ts 当前服务开发环境入口
│ | ├── genesis.prod.ts 当前服务生产环境入口
│ | └── genesis.ts 当前服务通用的服务端逻辑
│ ├── ssr-home 首页的服务
│ | ├── src Vue源码目录
│ | | ├── views 页面目录
│ | | | └── home.vue 首页页面
│ | | ├── app.vue 页面入口文件,公共导航
│ | | ├── container.vue 子应用的容器
│ | | ├── entry-client.ts 客户端入口文件
│ | | ├── entry-server.ts 服务端入口文件
│ | | ├── router.ts 路由配置文件
│ | | └── shims-vue.d.ts .vue文件的TS声明
│ | ├── genesis.build.ts 当前服务生产环境构建入口
│ | ├── genesis.dev.ts 当前服务开发环境入口
│ | ├── genesis.prod.ts 当前服务生产环境入口
│ | └── genesis.ts 当前服务通用的服务端逻辑
| ├── .editorconfig 编辑器配置
| ├── .eslintignore eslint忽略配置
| ├── .eslintrc.js eslint配置
| ├── .gitignore git忽略配置
| ├── .stylelintignore stylelint忽略配置
| ├── genesis.build.ts 所有服务生产构建
| ├── genesis.dev.ts 所有服务开发环境启动
| ├── genesis.prod.ts 所有服务生产环境入口
| ├── stylelint.config.js stylelint配置
| └── tsconfig.json TS的配置
│
└── package.json
注意:本项目是为了演示,才把几个服务全部放到一个仓库中,在实际的应用中,每一个服务,都应该放到独立的git仓库中。