日志管理工具Graylog改装成乾坤微应用乾坤微应用的示例文档还不是很全，有些项目需要需要找方法手动添加到乾坤框架，本文

乾坤主应用增加如下配置：

{
    name: 'graylog_web_interface',
    label:"graylog",
    entry: 'http://localhost:8080',
    container: '#container',
    activeRule: '/container/graylog_web_interface',
}

微应用配置如下：

1.文件入口修改

参照乾坤微应用配置，将src/index.jsx修改如下：

    function render(props) {
        const { container } = props;
        const appContainer = document.createElement('div');
        appContainer.id = 'root';
        if(container){
            container.appendChild(appContainer);
        }else{
            document.body.appendChild(appContainer);
        }  
        ReactDOM.render(
            <CustomizationProvider>
            <GraylogThemeProvider>
                <GlobalThemeStyles />
                <AppFacade />
            </GraylogThemeProvider>
            </CustomizationProvider>,
            container ? container.querySelector('#root') : document.querySelector('#root')
        );
    }
    window.onload = () => {
        if (!window.__POWERED_BY_QIANKUN__) {
            render({});
        }
    };
    export async function bootstrap() {
        console.log('[react16] react app bootstraped');
    }

    export async function mount(props) {
        console.log('[react16] props from main framework', props);
        render(props);
    }

    export async function unmount(props) {
        const { container } = props;
        ReactDOM.unmountComponentAtNode(container ? container.querySelector('#root') : document.querySelector('#root'));
    }

2.在src下新增public-path.js

配置如下：

if (window.__POWERED_BY_QIANKUN__) {
  __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}

3.文件打包配置修改

将webpack.config.js文件中的 webpackConfig.output增加以下语句：

    // 乾坤配置
    // 微应用的包名，这里与主应用中注册的微应用名称一致
    library: `${name}-[name]`,
    libraryTarget: 'umd',
    jsonpFunction: `webpackJsonp_${name}`,
    globalObject: 'window'

webpack.vendor.js文件(配置抽离出来的库的打包配置文件) webpackConfig.output增加以下语句：

    // 乾坤配置
    library: `${name}__[name]`,
    libraryTarget: 'umd',
    jsonpFunction: `webpackJsonp_${name}`,
    globalObject: 'window'

4.设置跨域头

修改devServer.js文件如下：

app.use(webpackDevMiddleware(vendorCompiler, {
  publicPath: appConfig.output.publicPath,
  lazy: false,
  noInfo: true,
  hot: false,
  disableHostCheck: true, // 关闭主机检查，使微应用可以被 fetch
  headers: { 'Access-Control-Allow-Origin': '*' },  // 配置跨域请求头，解决开发环境的跨域问题
  historyApiFallback: true, // 配置 history 模式
  watchContentBase: false,
  liveReload: false
}));

app.use(webpackDevMiddleware(appCompiler, {
  publicPath: appConfig.output.publicPath,
  lazy: false,
  noInfo: true,
  headers: { 'Access-Control-Allow-Origin': '*' },
}));

5.修改router路由配置

src/routing/AppRouter.jsx

<Router basename={window.__POWERED_BY_QIANKUN__ ? '/container/graylog_web_interface' : '/'} history={history}>

src/util/History.js

   if (!window.graylogHistory) {
   window.graylogHistory = createBrowserHistory({
       // 基链接
       basename: window.__POWERED_BY_QIANKUN__ ? '/container/graylog_web_interface' : '/',
   });
   }

其中'/container/graylog_web_interface'这个basename和主应用中的配置的微应用路由一致。

6. 测试环境api代理

如果主应用引入的微应用也是本地启动的服务，微应用本身做了api反向代理，那么主应用中也需要代理，具体配置如下：

devServer: {
    port: process.env.VUE_APP_PORT,
    headers: {
        'Access-Control-Allow-Origin': '*'
    },
    proxy: {
        '/api': {
          target: '服务端地址',
        },
      }   
}

7. 生产包api代理

graylog生产包作为微应用，引入html文件提示需要配置跨域，修改主应用vue.config.js如下，设置ngignx的域名可以被代理

devServer: {
    port: process.env.VUE_APP_PORT,
    headers: {
        'Access-Control-Allow-Origin': '*'
    },
    proxy: {
        '/api': {
          target: '服务端地址',
        },
        '/localhost': {
            target: 'http://localhost:80',
        },
      }   
}

grylog注入乾坤框架的注意事项

乾坤主应用不能设置开启沙箱模式，开启沙箱模式时点击graylog地址，没有basename设置的信息

react中的路由配置正确，但是在主应用中，单击路由没有basename
【问题级别: 一般】 graylog嵌入到乾坤时，字体的大小有些微的区别

修复建议分析：可以忽略
【问题级别: 重要】在新窗口打开的链接跳转了新的链接有问题

具体操作：search页面的底部的all messages ，点击任意一条消息的右上角的操作，能正常打开新的窗口，打开链接，但是不能跳转新的链接。

修复建议分析: 需要查看具体的源代码分析跳转逻辑
【问题级别: 一般】左侧收起来的导航树被顶部的导航条盖住

修复建议分析: 左侧导航展开来的样式z-index的层级比导航条的低，设置高一点即可