Evidence BIをvercelにデプロイする
簡単なページを作成して、vercel上にデプロイするところまで試した。接続先 の設定で割とつまづいたので残しておく
正式名称はEvidenceだが、BIもつけておかないと検索にひっかかりづらいためEvidence BIとした。記事中ではevidenceと表記する
BI-as-Codeツールというくくりの一種で、markdown＋グラフなどのcomponentの組み合わせで記述し、インタラクティブなレポートが作成できる。フロントエンドでいうところのSSGやSPAとしてbuildして、ホスティングできるというスグレモノ
環境・スタック
- python: 3.11
- dbt-core: 1.8.x
- evidence: 39.1.x
- motherduck: データ格納・加工
- vercel: evidenceデプロイ先
- pokeapi: データ取得元 https://pokeapi.co/
手順
ローカル
セットアップ
evidence projectはdbt project以下に設置する。コマンドは公式通りのものを実行した
https://docs.evidence.dev/install-evidence/#other-options
cd path/to/your/dbt/project
npx degit evidence-dev/template reports
npm --prefix ./reports install
npm --prefix ./reports run sources
npm --prefix ./reports run devこれでサンプルプロジェクトのファイル群がreports以下に配置される
ローカルでの接続設定
環境変数から設定できるか試したが、結局evidenceの画面から設定しないとtokenの値が設定されなかった
motherduckの接続に必要となる情報はdatabaseとtokenの値。tokenはsecretとして扱う。uriで表現すると
md:{database}?motherduck_token={token}ローカルにてevidenceの立ち上げ localhost:3000 にてアクセス
npm --prefix ./dbt_project/reports run dev右上のメニューからsettingsｰ>Data Sourcesを追加、motherduckを選択し、各設定項目を埋めていく。設定後の値は以下のようになる
保存するとreports/sources以下に設定ファイル
connection.yaml, connection.options.yaml後者のファイルにsecret情報が入っている。生成ファイルのコメントにも記載されているが、base64でencodeした値が設定されているため（decodeすればsecretの値が取得できてしまうので）こちらはリポジトリに追加しない
各ファイルの中身は以下
- connection.yaml
# This file was automatically generated
name: pokemon
type: motherduck
options:
database: dlt_data- connection.options.yaml
# This file was automatically generated
# It should *not* be source controlled, as it likely contain credentials or other sensitive configuration values.
# Values in this file are base64 encoded; https://it-tools.tech/base64-string-converter has an excellent encoder / decoder tool.
# Base64 is NOT encryption, and should not be treated as secure
token: dW5p
データ表示。ページ作成
データソースはpokeapiから取得している。データの取得〜加工は別途行っており、この記事では割愛する。ポケモンの情報と、日本語名の一覧テーブルをdbtにて加工して作成している
このテーブルの表示をevidenceでおこなう
クエリ
build時にparquetとして固められるデータの単位となる。ページ内でこちらのファイル名を指定してクエリできる
-- dbt_project/reports/sources/pokemon/pokemons.sql
select * from agg.poke_with_ja_namesページ
ほぼテンプレートの流用。表示するポケモン一覧をpoke_names sqlにて取得。dropdown componentで選択、絞り込みができる。テーブル形式で表示する
---
title: pokemon viewer
---
```sql poke_names
select distinct
ja_name
from pokemon.pokemons
```
<Dropdown
data={poke_names}
name=ja_name
value=ja_name
multiple=true
title="表示するポケモン"
selectAllByDefault=true
>
</Dropdown>
```sql pokes
select
id
,ja_name as name
,weight
,sprites__front_default as poke_front_img
,sprites__front_shiny as poke_front_shiny_img
from pokemon.pokemons
where ja_name in ${inputs.ja_name.value}
order by id asc
```
<DataTable data={pokes} search=true>
<Column id=id />
<Column id=poke_front_img title="image" contentType=image width=60px align=center />
<Column id=poke_front_shiny_img title="イロチ" contentType=image width=60px align=center />
<Column id=name />
<Column id=weight />
</DataTable>
画面はこんな感じになる
vercel project設定
基本的にドキュメントに書いてある通りに設定。vercel自体の使い方、projectの作成について割愛する
ローカルのevidenceの画面からsettingsｰ>deployment、vercelを選択すると手順が表示されるのでその通りにvercel projectの設定行う。以下はvercel上のproject設定画面の項目
dbtプロジェクト以下にevidenceプロジェクトを作成しているのでRoot Directoryには
./dbt_project/reportsprojectとrepositoryに紐づけておくと、リモートブランチにpushすると自動でhostingまで行われる。preview urlにアクセスするとローカルにて確認した画面と同じものが表示されるはず
vercelでの接続設定
vercel projectの環境変数に接続先情報を設定する。値は画面からsettingsｰ>environment variableの項目からコピペするのがはやい。画像はevidenceの環境変数の値
エラー
- GLIBCXX_3.4.30’ not found`
libstdc++.so.6: version
[ ! ] Error connecting to datasource pokemon: Invalid Input Error: Initialization function "motherduck_init"
from file "/vercel/.duckdb/extensions/v1.1.3/linux_amd64/motherduck.duckdb_extension" threw an exception: "Extension "/vercel/.duckdb/extensions/v1.1.3/linux_amd64/motherduck.v1.1.3-2024-11-142.duckdb_extension"
could not be loaded: /lib64/libstdc++.so.6: version `GLIBCXX_3.4.30' not found (required by /vercel/.duckdb/extensions/v1.1.3/linux_amd64/motherduck.v1.1.3-2024-11-142.duckdb_extension)"libc6 npm install "@evidence-dev/motherduck"@1.0.0 "@evidence-dev/duckdb"@1.0.0参考
- フォルダ構成
https://github.com/archiewood/analytics_monorepo/tree/master
- evidence公式
https://docs.evidence.dev/deployment/vercel/
https://github.com/evidence-dev/evidence
- pokeapi sdk https://github.com/PokeAPI/pokebase