微服务乾坤使用

2021-05-24 20:33:22 阅读：707 来源： 互联网

标签：服务 string stream QIANKUN token 应用使用 return 乾坤

1、安装乾坤

npm i qiankun -S

2、修改主应用

主应用分为路由形式加载和手动加载俩种形式

路由形式加载，在启动文件中增加启动代码，适合基于大面积替换子应用的场景，例如切换首页应用直接替换当前应用。

registerMicroApps([
    {
        name: 'stream-media', // app name registered
        entry: '//localhost:9001', // 加载应用地址
        container: '#stream-media', // 加载应用绑定的domi d
        activeRule: '/test/stream-media', // 加载应用的路由
    }
]);
start();

手动加载，适合在其他路由中，动态创建一小块页面

import React, {useEffect, useRef} from 'react';
import {loadMicroApp} from 'qiankun';
import {withRouter} from "react-router-dom";
import GlobalShared from "@/share";

const StreamMedia: React.FC<any> = (props: any) => {
    const divRef: any = useRef<HTMLDivElement>(null);
    useEffect(() => {
        const videoStreamApp = loadMicroApp({
            name: 'video-stream', // app name registered
            // 部署地址
            entry: process.env.REACT_APP_VIDEO_STREAM as string,
            container: '#video-stream',
            props: Object.assign({
                token: sessionStorage.logintoken,
                height: divRef.current.offsetHeight, // margin-bottom
                GlobalShared
            }, props.location?.state)
        }, {
            // sandbox: {strictStyleIsolation: true} // 强制隔离
        });
        return () => {
            /**

             * 将微应用卸载掉

             */
            videoStreamApp.unmount();
        }
    }, []);
    return (
        <div ref={divRef} id="video-stream" style={{position: 'relative', height: '100%'}}></div>
    )
};
export default withRouter(StreamMedia);

3、修改微应用

config-overrides.js中修改主要有俩出，一处是指定输出，一处是允许跨域

/**
 * 微服务参数处理
 * @type {string}
 */
config.output.library = `stream-media`;  // 注意，这个是主应用注册的子应用名称
config.output.libraryTarget = "umd";
config.output.publicPath = 'http://localhost:9001/'; // 注意，这个是你子应用的启动地址

devServer: overrideDevServer(
    // dev server plugin
    (config) => {
        /**
         * 配置允许跨域
         * @type {{"Access-Control-Allow-Origin": string}}
         */
        config.headers = {"Access-Control-Allow-Origin": "*",};
        return config;
    }
)

启动文件index中需要暴露3个函数

export async function bootstrap() {
    console.log('[react16] react app bootstraped');
}

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


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

根路径下新增public-path.js用于修改publicPath路径

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

4、开发环境处理微应用js、json等文件的加载跨域问题

微应用需要处理路径

在微应用中，将暴露的参数提取到.env文件中管理

#注意，这个是主应用注册的子应用名称

REACT_APP_QIANKUN_library= video-stream

# 支持的导入形式

REACT_APP_QIANKUN_libraryTarget= umd

# 注意，这个是你子应用的启动地址

REACT_APP_QIANKUN_publicPath= http://localhost:9004/

加载js时，如果是给作为微应用启动时，需要处理下路径

// @ts-ignore 如果是作为微应用启动 则修改路径
if (window.__POWERED_BY_QIANKUN__) {
    GlobalStaticFile = GlobalStaticFile.map((url: string) => {
        // @ts-ignore
        return Path.resolve(process.env.REACT_APP_QIANKUN_publicPath, url);
    });
}

加载json文件时，需要增加前缀，建议使用子应用名称，统一管理，方便主应用处理跨域

如果使用fetch报错请删除headers的'content-type': 'application/json'属性

Access to fetch at 'http://localhost:9004/bin/layout.json' from origin 'http://localhost:3000' has been blocked by CORS policy: Request header field content-type is not allowed by Access-Control-Allow-Headers in preflight response.

/**
 * 获取资源路径
 * @param url
 */
const getPathName = (url: string) => {
    // @ts-ignore
    if (!window.__POWERED_BY_QIANKUN__) {
        return  Path.resolve(window.location.pathname, url);
    }
    // return url;
    return Path.resolve(process.env.REACT_APP_QIANKUN_library as string, url);
};

主应用需要处理跨域

setupProxy中处理跨域

/**
 * 处理微应用跨域问题
 */
app.use(
    createProxyMiddleware('/video-stream', {
        target: 'http://localhost:9004', //
        changeOrigin: true, // needed for virtual hosted sites
        ws: true, // proxy websockets
        secure: false, // 验证SSL证书。应用于https
        pathRewrite: {
            '^/video-stream': ''
        }
    })
);

5、处理样式隔离

增加前缀，'@ant-prefix': process.env.REACT_APP_QIANKUN_library,

addLessLoader({
    lessOptions: {
        javascriptEnabled: true,
        localIdentName: '[local]--[hash:base64:5]',
        modifyVars: Object.assign({}, getThemeVariables({
            // dark: true, // 开启暗黑模式
            compact: false, // 开启紧凑模式
        }), {
            '@ant-prefix': process.env.REACT_APP_QIANKUN_library,
        }),
    }
}),

ant message（创建方式）无法销毁及样式不可用问题处理

思路：样式不可用问题，将样式独立下载，独立维护，且增加前缀

/* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */
/* stylelint-disable no-duplicate-selectors */
/* stylelint-disable */
/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */
.video-stream-ant-message {

 ...

}

AntdMessage.config({
    prefixCls: `${process.env.REACT_APP_QIANKUN_library}-ant-message`,
});

// 销毁问题：手动销毁
AntdMessage[fnKey]({
    content: _msg,
    key: key,
    className: key,
    duration: 3,
}).then((t: any) => {

    /**
     * 微组件销毁时处理 ant组件实现有bug
     * 直接使用key不能销毁
     */

    AntdMessage.destroy(key);
    const msg: any = document.getElementsByClassName(`${key}`);
    if (msg && msg[0] && msg[0].parentNode) {
        msg[0].parentNode.removeChild(msg[0])
    }
});

6、父子通信问题

使用props传递给微应用（直接传递，绑定到客户端sessionStorage localStorage）
使用Actions方式通信

// qiankun提供的api 使用观察者模式处理数据流动

import { initGlobalState, MicroAppStateActions } from "qiankun";
const initialState = {};
const actions: MicroAppStateActions = initGlobalState(initialState);
export default actions;

//赋值

actions.setGlobalState({ token });
// 注册观察者监听变化
actions.onGlobalStateChange((state, prevState) => {
      // state: 变更后的状态; prevState: 变更前的状态
      console.log("主应用：改变前的值为 ", prevState.token);
      console.log("主应用：登录状态发生改变，改变后的值为 ", state.token);
    });

// 子应用在index中需要接受actions
// 通信方式也是通过setGlobalState
// TODO 通信业务复杂时，该种方案维护较为困难，数据流转不好跟踪

使用shared方式传递给微应用

使用redux来管理状态，并把管理状态的类作为工具传递给微应用，来达到数据共享和交互的目的

// src/share/Store.ts

/**
 * 暴露的类型
 */

export enum SharedType {
    TOKEN = 'SET_TOKEN'
}

/**
 * 绑定的数据 后续可继续添加
 */

type SharedState = {
    token: string,
}

/**
 * 动作支持
 */
type SharedAction = {
    type: string,
    value: any,
}

const reducer = (state: SharedState, action: SharedAction): SharedState => {
    switch (action.type) {
        case SharedType.TOKEN:
            return Object.assign({}, state, {token: action.value});
        default:
           return state;
    }
};


const SharedStore = createStore<SharedState, SharedAction, any, any>(reducer as any, {} as any);

export default SharedStore;

//主应用 src/share/index.ts

import SharedStore, {SharedType} from './Store';

class Shared {
    /**
     * 获取token
     */
    public getToken = (): string => {
        return SharedStore.getState()[SharedType.TOKEN];
    }

    /**
     * 设置token
     * @param token
     */
    public setToken = (token: string): void => {
        SharedStore.dispatch({
           type: SharedType.TOKEN,
            value: token
        });
    }
}

const GlobalShared = new Shared();

export default GlobalShared;
// login是通过GlobalShared. setToken 去赋值 将GlobalShared整个传递给微应用

//微应用/Shared/index.ts

import GLOBALCONFIG from "@share/HttpClient/GLOBALCONFIG";

class Shared {
    /**
     * 获取token
     */
    public getToken(): string {
        return localStorage.getItem(GLOBALCONFIG.USERlocalStorage) || '';
    }

    /**
     * 设置token
     * @param token
     */
    public setToken(token: string): void {
       localStorage.setItem('autoLogin', token);
    }

}

class SharedModlue {
    static shared = new Shared();
    /**
     * 父应用传递进来的shared 进行覆盖
     * @param shared
     */
    static overloadShared(shared: any) {
        SharedModlue.shared = shared;
    }

    /**
     * 获取shared 里面有token
     */
    static getShared() {
        return SharedModlue.shared
    }
}

export default SharedModlue;

// 在index render函数中覆盖

if (GlobalShared) SharedModlue.overloadShared(GlobalShared);

7、部署后静态资源请求必须支持跨域，nginx配置

location /video-stream  {  
        add_header Access-Control-Allow-Origin *;
        add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
        add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';

        if ($request_method = 'OPTIONS') {
                return 204;
        }
              
        try_files $uri /video-stream/index.html;
        index  /video-stream/index.html;
    }

标签：服务,string,stream,QIANKUN,token,应用,使用,return,乾坤
来源： https://blog.csdn.net/ligaoming_123/article/details/117230984

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9