无法在React应用中嵌入Apache Superset的问题咨询

一、解决仪表盘无嵌入选项的问题 #

默认情况下Superset的嵌入功能未开启，需通过配置和权限调整启用：

1. 开启嵌入配置
   针对Docker部署的Superset，需自定义superset_config.py配置文件：
   • 在宿主机创建配置文件，添加以下内容：

     ENABLE_EMBEDDING = True
     EMBEDDED_SUPERSET = True
     # 跨域相关配置（根据场景调整）
     SESSION_COOKIE_SAMESITE = "Lax"
     SESSION_COOKIE_SECURE = False  # 生产环境需设为True
     

   • 修改docker-compose.yml，将该配置文件挂载到容器内/app/pythonpath/superset_config.py位置，随后重启Superset服务：

     docker-compose up -d --force-recreate
     

2. 配置权限
   • 进入Superset的Security > Roles，为当前用户所属角色（如Admin或自定义角色）添加can_embed权限。
   • 打开目标仪表盘的Edit Dashboard页面，在Settings中确认开启Allow embedding选项。

完成以上操作后，仪表盘右上角会出现Embed Dashboard按钮。

二、嵌入到React应用 #

1. 获取嵌入链接 #

点击Embed Dashboard按钮生成嵌入链接，可选择启用独立模式（standalone=true，隐藏Superset导航栏），示例链接：
http://your-superset-domain/superset/embedded/dashboard/[DASHBOARD-UUID]/?standalone=true

2. React中嵌入实现 #

方式一：iframe直接嵌入

在React组件中添加iframe标签：

import React from 'react';

const SupersetDashboard = () => {
  return (
    <div style={{ width: '100%', height: 'calc(100vh - 80px)' }}>
      <iframe
        src="http://your-superset-domain/superset/embedded/dashboard/your-dashboard-uuid/?standalone=true"
        width="100%"
        height="100%"
        frameBorder="0"
        allowFullScreen
      />
    </div>
  );
};

export default SupersetDashboard;

方式二：带认证的嵌入（生产环境推荐）

若需用户认证后访问，可通过以下方式处理：

• JWT认证：在Superset配置JWT认证，React应用登录后获取Token，将其作为参数追加到嵌入链接：
  http://your-superset-domain/superset/embedded/dashboard/[DASHBOARD-UUID]/?jwt_token=[YOUR-JWT-TOKEN]
• 共享会话：若React应用与Superset同域，可利用浏览器共享Cookie实现自动登录，需确保Superset的SESSION_COOKIE_SAMESITE和CORS_OPTIONS配置正确。

三、生产环境部署注意事项 #

1. HTTPS配置
   生产环境必须启用HTTPS，可通过Nginx等反向代理实现，同时将Superset配置中的SESSION_COOKIE_SECURE设为True，避免浏览器阻止跨域Cookie。

2. CORS配置
   在superset_config.py中配置允许React应用域名访问：

   CORS_OPTIONS = {
       'supports_credentials': True,
       'resources': ['*'],
       'origins': ['https://your-react-app-domain.com'],
   }
   

3. 认证与权限

   • 避免使用公共嵌入模式，推荐采用OAuth2、SSO或JWT实现统一认证，确保仅授权用户能访问嵌入内容。
   • 精细配置角色权限，仅授予必要的仪表盘访问和嵌入权限。

4. 性能优化

   • 使用PostgreSQL替代默认SQLite作为元数据库，提升稳定性。
   • 配置Redis作为缓存和消息队列，优化仪表盘加载速度：

     CACHE_CONFIG = {
         'CACHE_TYPE': 'RedisCache',
         'CACHE_REDIS_URL': 'redis://your-redis-host:6379/0',
     }
     

   • 启用异步查询，避免长时间阻塞请求。

5. 容器化部署

   • 生产环境需将配置文件、数据库数据持久化存储，避免容器重启后数据丢失。
   • 使用Docker Compose或Kubernetes进行编排，实现服务高可用和自动扩容。

内容的提问来源于stack exchange，提问作者Atharane