内网环境下的Superset自定义组件——环境搭建

内网环境搭建Superset真的折磨，尤其是dev-server，记录一下希望大家跳过这些坑

目标一：搭建Superset前后端环境，能正确运行；

目标二：在Superset中添加自定义组件，能在Superset中进行添加删除等操作；

目标三：封装Superset仪表盘接入sdk，支持其他系统可以直接展示Superset生成的仪表盘。

环境搭建流程

Superset版本4.0.2

Superset github地址 https://github.com/apache/superset

环境要求：Python 3.9.13（不能低于3.8，其他python版本没试过）,

                  Node 18.19.1版本以上,

                  npm 10.2.4以上

网络要求：可以连接内部pip库、npm库

Github下载Superset源码 得到superset-master.zip，解压后放在一个空文件夹下；

1、后端Superset服务器环境搭建与运行

1、配置superset_config.py文件，在该文件可以直接修改superset默认config.py中的参数

在方便查找的路径下创建空的python文件superset_config.py

例如C:/superset-master/superset_config.py 创建系统变量 SUPERSET_CONFIG_PATH=C:/superset-master/superset_config.py

from superset.utils import core as utils
import os

SECRET_KEY = '***************' // 密钥

SQLALCHEMY_DATABASE_URI = 'sqlite:///C:/superset/superset-master/database.db'  // superset用户数据库
SQLALCHEMY_EXAMPLES_URI = 'sqlite:///C:/superset/superset-master/examples.db'  // superset图表样例数据库

CACHE_CONFIG = {
    'CACHE_TYPE': 'filesystem',
    'CACHE_DIR':'C:\\superset\\superset\\cache',
} // 缓存配置

TALISMAN_ENABLED = utils.cast_to_boolean(os.environ.get("TALISMAN_ENABLED", False))  

WTF_CSRF_ENABLED = False

PUBLIC_ROLE_LIKE = 'Gamma'       // 游客权限配置
GUEST_ROLE_NAME = "Gamma"      // 游客权限配置

ENABLE_CORS = False

DEFAULT_FEATURE_FLAGS: dict[str, bool] = {
    "EMBEDDED_SUPERSET": True,
    "ENABLE_TEMPLATE_PROCESSING": True,
} // 嵌入式开发配置

2、使用pip安装虚拟环境并启动superset

路径: /superset-master

python -m venv venv
venv\Scripts\activate
pip install apache-superset
pip install cx_Oracle // 后续需要连接oracle
superset db upgrade
superset init
// superset examples // 可以连接外网才能使用该命令，能在创建的superset中添加一些三方库中的数据及图表样例
superset fab create-admin
superset run -h 0.0.0.0 -p 8088 --with-threads --reload

2、前端dev-server开发环境搭建与运行

路径：/superset-master/superset-frontend

内网环境需要修改一些配置文件才能npm安装并运行dev

package-lock.json 由于dom-to-image的依赖是通过github连接到其他网站下载的，不会自动跳转内部库安装，需要将所有dom-to-image的git安装，全都手动改成从内部库安装

    "dom-to-image": {
      "version": "2.6.0",
      "resolved": "内部库dom-to-image的连接",
      "integrity": "sha512-Dt0QdaHmLpjURjU7Tnu3AgYSF2LuOmksSGsUcE6ItvJoCWTBEmiMXcqBdNSAm9+QbbwD7JMoVsuuKX6ZVQv1qA=="
    },
    
    "dom-to-pdf": {
      "version": "0.3.2",
      "resolved": "https://registry.npmjs.org/dom-to-pdf/-/dom-to-pdf-0.3.2.tgz",
      "integrity": "sha512-eHLQ/IK+2PQlRjybQ9UHYwpiTd/YZFKqGFyRCjVvi6CPlH58drWQnxf7HBCVRUyAjOtI3RG0kvLidPhC7dOhcQ==",
      "requires": {
        "dom-to-image": "^2.6.0",
        "jspdf": "^2.6.0"
      }
    },

webpack.proxy-config.js

let urltest = 'http://{本地ipv4地址}:8088' 
const backend = (urltest || `http://localhost:${supersetPort}`).replace(

babel.config.js

// 'react-hot-loader/babel', // 将该参数注释掉

修改完后，在命令行执行

$env:PUPPETEER_SKIP_DOWNLOAD="True"
npm install --ignore-scripts
npm run dev-server

由于本地编解码的问题，访问dev-server时需要访问
http://{本地ipv4地址}:9000而不能是http://localhost:9000