# 创建主应用

# 写在前面

主应用示范工程：

https://git.yx.netease.com/shark/mf-config-center

# 一、使用cli工具创建主应用

# 二、按创建好的项目中的README.md，改造项目

# 注意

切换ng和react应用的适合，顶部的文案和图片还有会有闪动，应该是react和ng的css没有做成一致

.gitlab-ci.yml

将SERVICE_CODE修改成主应用对应服务编码，用于opera部署；

server/src/conf/config.base.ts

修改主应用服务配置项

const contextPath = '/micro-fed';
const xhrPrefix = '/xhr';
const serviceCode = 'mf-config-center';// 服务编码
const productCode = 'micro-fed';// 产品编码
const productId = 7311;
const appName = '微前端配置中心';

web/public/index.html

将title设置成自己项目名称

web/src/consts.ts

web端配置参数

// 主应用contextPath
const contextPath = '/micro-fed';

web/src/pages/App.tsx

根据自己项目的信息配置顶部和左侧导航栏

web/src/pages/Home/Home.tsx

修改主页欢迎词

修改 sharkr.cli.json
如果子应用没有在权限中心注册，那么web/src/pages/ChildAppRoot/ChildAppRoot.tsx文件需要调整

这段需要掉：


useEffect(() => {
    umcService
        .getRelatedServicePaths()
        .then((res: any) => {
            res = res || [];
            const childAppPathList = (res || []).map((m: any) => m.servicePath);
            const _config = { ...(AppConfig.config || {}), childAppPathList };
            AppConfig.configure(_config); // 设置config中的childAppPathList
            setConfigReady(true);
        })
        .catch(() => {
            setConfigReady(true);
        });
}, []);

改为：


useEffect(() => {
    const _config = {
        ...(AppConfig.config || {}),
        ...{ childAppPathList: ['/mf-umc', '/xxx'] }, // 待修改
    };
    AppConfig.configure(_config);
    setConfigReady(true);
}, []);

转发配置有两种方法，接入apolloY配置中心或提网关API转发工单，2选1

接入apolloY配置中心（代码已默认集成）

修改代码: server/src/bin/_bootstrap.ts

Apollo.appId = 'mf-config-center'; // 去apolloY申请

apolloY

开发环境: http://10.246.133.60:8070/apolloy

测试环境: http://test.yx.mail.netease.com/apolloy/

线上环境: http://yx.mail.netease.com/apolloy/

详细文档：http://yx.mail.netease.com/wiki#/doc/20055

添加配置，完成后点击【发布】

开发环境示例：


key : mf.childApp.proxy

Value: 
[
    {
        "path": "/micro-fed/mf-admin/xhr/*",
        "target": {
            "default": "http://test.yx.mail.netease.com/micro-fed"
        }
    },
    {
        "path": "/micro-fed/mf-umc/xhr/*",
        "target": {
            "default": "http://test.yx.mail.netease.com/micro-fed"
        }
    }
]

测试环境示例：


key : mf.childApp.proxy

Value: 
[
    {
        "path": "/micro-fed/mf-admin/xhr/*",
        "target": {
            "default": "http://127.0.0.1:8550/proxy/test.mf-admin.service.mailsaas"
        }
    },
    {
        "path": "/micro-fed/mf-umc/xhr/*",
        "target": {
            "default": "http://127.0.0.1:8550/proxy/test.mf-umc.service.mailsaas"
        }
    }
]

线上环境示例：


key : mf.childApp.proxy

Value: 
[
    {
        "path": "/micro-fed/mf-admin/xhr/*",
        "target": {
            "default": "http://127.0.0.1:8550/proxy/online.mf-admin.service.mailsaas"
        }
    },
    {
        "path": "/micro-fed/mf-umc/xhr/*",
        "target": {
            "default": "http://127.0.0.1:8550/proxy/online.mf-umc.service.mailsaas"
        }
    }
]

主应用申请网关配置:

/micro-fed/ http://127.0.0.1:8550/proxy/test.mf-config-center.service.mailsaas

如果需要支持多环境，让sa增加转发配置: header增加 env: 'xxx' (备注：xxx为apolloy配置中target的xxx字段)

提网关API转发工单（当前轻舟网关有问题，不推荐使用）

修改代码: server/src/bin/_bootstrap.ts

/*整段注释
import Apollo from '@tiger/apolloy';// apolloy配置中心

Apollo.appId = 'mf-config-center';
Apollo.baseCachePath = './dist';
Apollo.initConfigurations();
Apollo.listenNotifications('default', ['application']); 
*/

删除文件：server/src/apolloy/index.ts

修改代码: server/src/middlewares/global.middleware.ts

去掉对apolloy/index.ts和micro-proxy的引用，并且删除以下片段：
// 子应用转发
setMicroProxyConfigByString(ApplloyConfig['mf.childApp.proxy']);
app.use(microProxy);

申请【网关API转发工单】:

域名测试：test.yx.mail.netease.com

域名线上：yx.mail.netease.com

转发配置:

/micro-fed/mf-umc/xhr/ http://127.0.0.1:8550/proxy/test.mf-umc.service.mailsaas 转发后路径去掉/micro-fed

/micro-fed/mf-admin/xhr/ http://127.0.0.1:8550/proxy/test.mf-admin.service.mailsaas 转发后路径去掉/micro-fed

/micro-fed/ http://127.0.0.1:8550/proxy/test.mf-config-center.service.mailsaas 转发后路径不变

额外要求: request的header 增加 Product-Code: micro-fed

# 三、在设置该项目的人员、角色、权限

设置权限时，需要为每个权限添加mfApp字段，区别是哪个子应用

配置中心可以查看权限设置：

测试环境： http://test.yx.mail.netease.com/micro-fed/mf-admin/#/product-list

线上环境： http://yx.mail.netease.com/micro-fed/mf-admin/#/product-list