2020 年，你可能需要基于 Vue 的微服务架构实践，在服务端或客户端聚合子服务

快速开始

# 拉取代码
git clone [email protected]:fmfe/vue-genesis-micro.git
# 安装依赖
npm install
# 开发环境启动
npm run dev
# 打包生产环境代码
npm run build
# 生产环境运行
npm run start

微服务是什么？

微服务是一个新兴的软件架构，就是把一个大型的单个应用程序和服务拆分为数十个的支持微服务。

为什么需要微服务？

随着业务的发展，项目规模越来越大，给编译打包、合并的代码冲突带来了巨大的挑战，而服务的拆分可以获得更快的编译打包，独立部署、增量更新、不同的团队只需要负责自己的服务、更好的支持多端，在大型的项目中，使用微服务架构可以获得极大的收益。

微服务和微前端的区别

目前社区的微前端解决方案，基本上都是基于客户端去进行聚合的思路，而本项目却是完全基于后端微服务的概念而诞生的，页面的聚合既可以在服务端完成，也可以在客户端完成，一切取决于需求。

项目介绍

本项目基于 Vue 的Genesis开发，一个编写了三个例子：

• ssr-common 公共的页面导航
• ssr-home 首页
• ssr-about 关于我们
  在学习完成本项目后，你可以搭建属于自己的微服务架构，并且深入的了解到远程组件它是怎么工作的。至此，你可以做到一个大型应用的微服务拆分下。

关于 Genesis

Genesis是在FOLLOWME5.0升级而诞生的一个项目，它解决了以往架构的很多弊端，例如：

• 公共组件库更新，导致同时十几个项目要编译发布更新
• 页面和页面之间的切换，需要刷新整页，无法做到无刷新跳转
• 数百个页面，如果全部写到一个大的项目中做 SSR 渲染，只要其中一个地方出现 BUG，就有可能导致整个服务挂掉或者不稳定，发生内存泄漏的问题时，也更加难以排查
• 大量的项目是基于 CSR 渲染，在国际化和 SEO 方面，导致 index.html 页面的标题、关键词和描述比较难做到国际化
• 不同的团队，互相交叉开发一个项目，合并代码时，很容易产生各种冲突，服务的拆分后，大大的减少了代码冲突

渲染接口

服务的拆分后，那么服务和服务之间的调用是必不可少的，这里提出了一个渲染接口的概念，它可能是这样子的

// 下面的接口，你可能需要做 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 模板引擎等等。本项目会使用渲染接口，来传递给远程组件进行渲染。

远程组件

当你需要调用其它服务的页面渲染时，你请求渲染接口，拿到渲染的结果，传递给远程组件，它就会负责帮你渲染该服务的内容。

<template>
    <div>
        <remote-view
            v-for="name in names"
            v-show="ssrname === name"
            :key="name"
            :clientFetch="() => clientFetch(name)"
            :serverFetch="() => serverFetch(name)"
        ></remote-view>
    </div>
</template>
<script lang="ts">
import Vue from 'vue';
import { RemoteView } from '@fmfe/genesis-remote';
import axios from 'axios';

interface Data {
    names: string[];
}
interface Methods {
    clientFetch: (ssrname: string) => Promise<void>;
    serverFetch: (ssrname: string) => Promise<void>;
}
interface Computed {
    ssrname: string;
}

export default Vue.extend<Data, Methods, Computed>({
    name: 'container',
    components: {
        RemoteView
    },
    data() {
        return {
            names: []
        };
    },
    computed: {
        ssrname() {
            return this.$route.meta.ssrname;
        }
    },
    watch: {
        ssrname() {
            if (this.names.indexOf(this.ssrname) > -1) return;
            this.names.push(this.ssrname);
        }
    },
    created() {
        this.names.push(this.ssrname);
    },
    methods: {
        /**
         * 客户端远程调用时，走 CSR 渲染
         */
        async clientFetch(ssrname: string) {
            const renderUrl = encodeURIComponent(this.$route.fullPath);
            const res = await axios.get(
                `http://localhost:3000/api/${ssrname}/render`,
                {
                    params: {
                        routerMode: 'history',
                        renderMode: 'csr-json',
                        renderUrl
                    }
                }
            );
            if (res.status === 200) {
                return res.data;
            }
            return null;
        },
        /**
         * 服务端远程调用时，走 SSR 渲染
         */
        async serverFetch(ssrname: string) {
            const renderUrl = encodeURIComponent(this.$route.fullPath);
            const res = await axios.get(
                `http://localhost:3000/api/${ssrname}/render`,
                {
                    params: {
                        routerMode: 'history',
                        renderMode: 'ssr-json',
                        renderUrl
                    }
                }
            );
            if (res.status === 200) {
                return res.data;
            }
            return null;
        }
    }
});
</script>

目录说明

.
├── .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 仓库中。

最后

• 本项目源码地址：vue-genesis-micro
• Genesis官方仓库
• Genesis文档地址
• 基于 Vue SSR 的微架构在 FOLLOWME5.0 实践
• 基于 Vue CSR 的微前端实现方案
  如果你对微前端、和微服务这一块感兴趣，欢迎 Star，也可以在留言区我和互动！