嵌入式分析 SDK - 示例应用程序快速入门
嵌入式分析 SDK 仅在 Pro 和 Enterprise 计划（包括自托管和 Metabase Cloud）中可用。
本指南将介绍如何使用示例 React 应用程序设置嵌入式分析 SDK，但您也可以按照自己的应用程序进行操作。
先决条件
- Node.js 20.x LTS 或更高版本（适用于示例应用程序）。
- Metabase 版本 v1.52 或更高版本.
- Metabase Pro 或 Enterprise 许可证（如果您没有许可证，请查看此快速入门指南，其中不包含付费 JWT SSO 设置。）
- （可选）：Docker
克隆示例应用程序仓库
git clone git@github.com:metabase/metabase-nodejs-react-sdk-embedding-sample.git
- 在metabase-nodejs-react-sdk-embedding-sample仓库中，检出与您的 Metabase 版本对应的分支。
git checkout v0.57-stable
例如，如果您正在运行 Metabase 1.57，请确保示例应用程序仓库位于57-stable分支。您可以通过单击 Metabase UI 右上角的齿轮图标并选择“关于 Metabase”来找到您的 Metabase 版本。
设置示例应用程序与 Metabase 的两种方法
- 使用 Docker 快速设置（包含一个示例 Metabase）
- 分步设置（使用您自己的 Metabase，或启动一个新的 Metabase）
使用 Docker 快速设置
此设置将运行一个包含示例应用程序和示例 Metabase 的 Docker 容器。
-
复制环境变量模板文件
在克隆的目录中，运行
cp .env.docker.example .env.docker
-
在
.env.docker文件中，将<your_enterprise_token>替换为您的 premium embedding token。 -
在顶层目录中，运行
yarn start
此脚本将
- 拉取 Metabase Docker 镜像并在容器中运行它。
- 在 Metabase 中设置JWT SSO
- 构建并运行带有嵌入式问题的示例应用程序。
- 应用程序将在https://:4400上启动。
搞定！
如果您想登录此命令集设置的示例 Metabase，请访问https://:4300。您可以使用 Rene Descartes 的电子邮件和密码登录：E
- 邮箱：rene@example.com
- 密码：foobarbaz
分步设置
我们将在 Metabase 中进行一些设置，然后在示例应用程序中进行。您也可以使用您自己的 Metabase，在这种情况下，您可以跳过安装步骤。
以下是您将要执行的操作的快速概述
设置 Metabase 以进行嵌入
启动示例应用程序
然后调整样式。
开始吧。
安装 Metabase Enterprise Edition
您可以在免费试用的 Cloud 计划上运行 Metabase Pro。
或者本地运行。这是一个docker单行命令
docker run -d -p 3000:3000 --name metabase metabase/metabase-enterprise:latest
您也可以下载 JAR，并像这样运行
java --add-opens java.base/java.nio=ALL-UNNAMED -jar metabase.jar
默认情况下，Metabase 将在https://:3000上运行。
如果遇到问题，请查看我们的安装文档。
激活您的许可证
要在使用自托管版时启用 JWT SSO，您需要激活您的许可证。Cloud 上的 Metabase Pro 计划将为您处理此问题。
在 Metabase 中启用嵌入
从任何 Metabase 页面，单击右上角的齿轮图标，然后选择管理员设置 > 嵌入。
打开
- 嵌入式分析 SDK（在模块化部分）
- 静态嵌入
否则，这一切都是徒劳的。
启用 JWT SSO
我们还需要更新 Metabase 中的 JWT Provider URI。默认情况下，SDK 将重定向登录请求到此 URI。
从任何 Metabase 页面，单击右上角的齿轮图标，然后选择管理员设置 > 设置 > 身份验证。
在标记为JWT的卡片上，单击设置按钮。
JWT 身份提供商 URI
在JWT IDENTITY PROVIDER URI字段中，粘贴
https://:9090/sso/metabase
或者用您的 Cloud URL 替换https://。
用于 JWT 签名密钥的字符串
单击生成密钥按钮。
复制密钥并将其粘贴到您的.env文件中的环境变量METABASE_JWT_SHARED_SECRET中。
应用程序服务器将使用此密钥对令牌进行签名，以便 Metabase 知道应用程序的内容请求已获得授权。
保存并启用 JWT
请务必单击保存并启用按钮，否则一切都是徒劳的。
设置示例应用程序
设置应用程序环境
克隆示例应用程序并cd到其中。
在示例应用程序的主目录中，将.env.example模板复制到.env。
cp .env.example .env
在.env中，确保VITE_METABASE_INSTANCE_URL和METABASE_INSTANCE_URL指向您的 Metabase 实例 URL，例如https://:3000。
您的.env文件将类似于
# FRONTEND
CLIENT_PORT=3100
VITE_METABASE_INSTANCE_URL="https://:3000"
# BACKEND
AUTH_PROVIDER_PORT=9090
METABASE_INSTANCE_URL="https://:3000"
METABASE_JWT_SHARED_SECRET="TODO"
设置应用程序服务器
切换到server目录
cd server
安装软件包
npm install
启动服务器
npm start
设置客户端应用程序
在另一个终端中，切换到client目录
cd client
安装依赖项
npm install
此命令将安装Metabase 嵌入式分析 SDK以及应用程序的其他依赖项。
您也可以安装不同版本的 SDK。只需确保 SDK 的主版本与您使用的 Metabase 的主版本匹配。
启动客户端应用程序
npm start
您的浏览器应该会自动打开应用程序。默认情况下，应用程序运行在https://:3100。
此时，您应该已启动并运行
在您的应用程序中，您将看到一个嵌入的InteractiveQuestion组件。
<MetabaseProvider authConfig={authConfig} theme={theme}>
<InteractiveQuestion questionId={questionId} />
</MetabaseProvider>
后续步骤
要样式化组件，请尝试更改客户端应用程序client/src/App.jsx中的一些theme选项。有关主题的更多信息，请参阅外观。
阅读其他版本的 Metabase 的文档。