Superset 前端开发环境superset 前端本地开发环境相关配置 windows系统前端UI二次开发项目嵌入

项目里用的superset版本是2.0，windows系统

一 . superset目录结构

后台代码使用了python，在目录superset下
框架页面使用jinjia ，在目录/superset/templates
前端展示相关使用react+antdesign,在目录/superset-frontend

二 . 通过iframe将superset嵌入到项目里

src指的是引入项目里的superset的地址
<iframe 
    id="iframe" 
    width="100%" 
    height="100%" 
    frameborder="0" 
    src="https://superset.xxx.com" >
</iframe>

三 . 启动本地Superset开发

拉取代码（与superset.xxx.com对应的代码）
检查node版本，node版本过高或过低都可能会在后续执行中出现错误
windows系统中需要修改webpack.config.js文件，增加path.resolve(__dirname, 'src'),

{ 
    test: /\.jsx?$/, 
    // include source code for plugins, but exclude node_modules and test files within them exclude: [/superset-ui.*\/node_modules\//, /\.test.jsx?$/], 
    include: [ 
        new RegExp(`${APP_DIR}/src`), /superset-ui.*\/src/, 
        new RegExp(`${APP_DIR}/.storybook`), 
        path.resolve(__dirname, 'src'), // 添加本行代码，对 windows 环境不友好 
    ], 
    use: [babelLoader],
}

进入/superset-frontend目录，执行npm install，这一步如果出错，检查node版本，安全上网，多试几次
安装成功之后，执行npm run dev-server，会出现报错，提示需要安装合适的loader，修改webpack.config.js文件，增加path.resolve(__dirname, 'plugins')

{ 
    test: /\.jsx?$/, 
    // include source code for plugins, but exclude node_modules and test files within them exclude: [/superset-ui.*\/node_modules\//, /\.test.jsx?$/], 
    include: [ 
        new RegExp(`${APP_DIR}/src`), /superset-ui.*\/src/, 
        new RegExp(`${APP_DIR}/.storybook`), 
        path.resolve(__dirname, 'src'), // 添加本行代码，对 windows 环境不友好 
        path.resolve(__dirname, 'plugins') 
    ], 
    use: [babelLoader] 
}

服务启动成功，但只停留在登录页面，并且登录不进去，由于superset是一个前后端不分离的项目，需要同时启动superset后端服务器才能正常访问。前边已经有了superset.xxx.com，，这个就是服务端地址，可以直接连接。superset也提供了设置方法

npm run dev-server -- --superset=https://superset-dev.example.com

但对于项目来说，这种方法没有启动成功，于是采用了直接在代码里更换backend地址的方式，在webpack.proxy-config.js文件中，将backend地址改为

const backend = 'https://superset.xxx.com'

这里修改之后同时需要增加 scure:false

module.exports = newManifest => { 
manifest = newManifest; 
    return { 
    context: '/', 
    target: backend, 
    secure: false, 
    hostRewrite: true, 
    changeOrigin: true, 
    cookieDomainRewrite: '', // remove cookie domain 
    selfHandleResponse: true, // so that the onProxyRes takes care of sending the response onProxyRes(proxyResponse, request, response) { 
        try { 
            copyHeaders(proxyResponse, response); 
            if (isHTML(response)) { processHTML(proxyResponse, response); } 
            else { proxyResponse.pipe(response); } 
            response.flushHeaders(); 
        } 
        catch (e) { 
            response.setHeader('content-type', 'text/plain'); 
            response.write(`Error requesting ${request.path} from proxy:\n\n`); 
            response.end(e.stack); } 
        }, 
    }; 
};

启动成功npm run dev-server之后，打开本地localhost:9000,由于连接的是线上地址，登录成功之后就会跳转到线上，不是localhost，临时解决方法：可将线上已经登录的session写入本地session进行本地开发。