<p data-line="0" class="code-line"><strong>時雨堂の自社サービスのアピールが含まれます</strong></p>
<h2 id="%E6%A6%82%E8%A6%81" data-line="2" class="code-line">
<a class="header-anchor-link" href="#%E6%A6%82%E8%A6%81" aria-hidden="true"></a> 概要</h2>
<p data-line="4" class="code-line">これは自社サービスの管理者用ダッシュボードのログ解析機能として DuckDB-Wasm を採用したので雑に紹介します。</p>
<h2 id="duckdb-%E3%81%A8%E3%81%AF" data-line="6" class="code-line">
<a class="header-anchor-link" href="#duckdb-%E3%81%A8%E3%81%AF" aria-hidden="true"></a> DuckDB とは</h2>
<p data-line="8" class="code-line">こちらをどうぞ。</p>
<p data-line="10" class="code-line"><a href="https://speakerdeck.com/ktz/duckdbza-shao-jie-1-dot-1dui-ying-ban-at-duckdbzuo-tan-hui" target="_blank" rel="nofollow noopener noreferrer">DuckDB雑紹介(1.1対応版)@DuckDB座談会 - Speaker Deck</a></p>
<h2 id="%E3%81%BE%E3%81%A8%E3%82%81" data-line="12" class="code-line">
<a class="header-anchor-link" href="#%E3%81%BE%E3%81%A8%E3%82%81" aria-hidden="true"></a> まとめ</h2>
<p data-line="14" class="code-line"><a href="https://gyazo.com/31fc438cbfe9360810dd0c5fc1e9682e" target="_blank" rel="nofollow noopener noreferrer"><img src="https://i.gyazo.com/31fc438cbfe9360810dd0c5fc1e9682e.png" alt="Image from Gyazo" loading="lazy" class="md-img"></a></p>
<ul data-line="16" class="code-line">
<li data-line="16" class="code-line">
<a href="https://github.com/duckdb/duckdb-wasm" target="_blank" rel="nofollow noopener noreferrer">DuckDB-Wasm</a> を利用する事でクライアントリソースが利用できるようになった</li>
<li data-line="17" class="code-line">
<a href="https://parquet.apache.org/" target="_blank" rel="nofollow noopener noreferrer">Parquet</a> ファイルを <a href="https://developer.mozilla.org/en-US/docs/Web/API/File_System_API/Origin_private_file_system" target="_blank" rel="nofollow noopener noreferrer">OPFS</a> に保存できるようになり、オフラインで利用できるようになった</li>
<li data-line="18" class="code-line">自分が求めるレベルでの可視化は全て DuckDB/DuckDB-Wasm で十分だとわかった</li>
</ul>
<h2 id="%E3%83%80%E3%83%83%E3%82%B7%E3%83%A5%E3%83%9C%E3%83%BC%E3%83%89%E3%81%AE%E5%AE%9F%E8%A3%85" data-line="20" class="code-line">
<a class="header-anchor-link" href="#%E3%83%80%E3%83%83%E3%82%B7%E3%83%A5%E3%83%9C%E3%83%BC%E3%83%89%E3%81%AE%E5%AE%9F%E8%A3%85" aria-hidden="true"></a> ダッシュボードの実装</h2>
<p data-line="22" class="code-line">自社が提供している <a href="https://sora-labo.shiguredo.app/" target="_blank" rel="nofollow noopener noreferrer">自社パッケージ製品を検証できるサービス</a> の管理者用ダッシュボード(以降ダッシュボード)で DuckDB-Wasm を利用してログ解析をブラウザ上で実現しています。</p>
<h3 id="fluent-bit-%E3%81%8B%E3%82%89%E3%82%AA%E3%83%96%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E3%82%B9%E3%83%88%E3%83%AC%E3%83%BC%E3%82%B8%E3%81%B8" data-line="24" class="code-line">
<a class="header-anchor-link" href="#fluent-bit-%E3%81%8B%E3%82%89%E3%82%AA%E3%83%96%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E3%82%B9%E3%83%88%E3%83%AC%E3%83%BC%E3%82%B8%E3%81%B8" aria-hidden="true"></a> Fluent Bit からオブジェクトストレージへ</h3>
<p data-line="26" class="code-line">ログはパッケージ製品が出力する <a href="https://jsonlines.org/" target="_blank" rel="nofollow noopener noreferrer">JSON Lines</a> 形式のログで、それを <a href="https://fluentbit.io/" target="_blank" rel="nofollow noopener noreferrer">Fluent Bit</a> を利用して S3 互換オブジェクトストレージ(以降オブジェクトストレージ)へ保存しています。</p>
<h3 id="%E3%83%AA%E3%82%AF%E3%82%A8%E3%82%B9%E3%83%88%E3%83%99%E3%83%BC%E3%82%B9%E3%81%A7%E3%81%AE%E3%83%AD%E3%82%B0%E3%81%8B%E3%82%89%E3%81%AE-parquet-%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E7%94%9F%E6%88%90" data-line="28" class="code-line">
<a class="header-anchor-link" href="#%E3%83%AA%E3%82%AF%E3%82%A8%E3%82%B9%E3%83%88%E3%83%99%E3%83%BC%E3%82%B9%E3%81%A7%E3%81%AE%E3%83%AD%E3%82%B0%E3%81%8B%E3%82%89%E3%81%AE-parquet-%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E7%94%9F%E6%88%90" aria-hidden="true"></a> リクエストベースでのログからの Parquet ファイル生成</h3>
<p data-line="30" class="code-line">ダッシュボードではリクエストベースでログを解析できるようになっています。</p>
<p data-line="32" class="code-line">解析したいログを一覧を選び、そのログをオブジェクトストレージからダウンロードし、 <a href="https://duckdb.org/" target="_blank" rel="nofollow noopener noreferrer">DuckDB</a> で Parquet ファイルを生成、オブジェクトストレージへ保存しています。</p>
<p data-line="34" class="code-line"><a href="https://gyazo.com/55e1066e2cdf3d1a4518c89784fc0a2e" target="_blank" rel="nofollow noopener noreferrer"><img src="https://i.gyazo.com/55e1066e2cdf3d1a4518c89784fc0a2e.gif" alt="Image from Gyazo" loading="lazy" class="md-img"></a></p>
<h3 id="presigned-url-%E3%82%92%E5%88%A9%E7%94%A8%E3%81%97%E3%81%A6%E3%83%80%E3%82%A6%E3%83%B3%E3%83%AD%E3%83%BC%E3%83%89" data-line="36" class="code-line">
<a class="header-anchor-link" href="#presigned-url-%E3%82%92%E5%88%A9%E7%94%A8%E3%81%97%E3%81%A6%E3%83%80%E3%82%A6%E3%83%B3%E3%83%AD%E3%83%BC%E3%83%89" aria-hidden="true"></a> Presigned URL を利用してダウンロード</h3>
<p data-line="38" class="code-line">Parquet ファイルを生成し S3 互換オブジェクトストレージの Go 向け SDK である <a href="https://github.com/minio/minio-go" target="_blank" rel="nofollow noopener noreferrer">minio-go</a> を利用してオブジェクトストレージの Presigned URL を発行してダウンロードしています。</p>
<p data-line="40" class="code-line">リクエストを受け取ってバックエンドで Parquet ファイルの生成には <a href="https://github.com/marcboeker/go-duckdb" target="_blank" rel="nofollow noopener noreferrer">go-duckdb</a> を利用しています。これはバックエンドが Go で書かれているというのもありますが、同時に CPU バウンドなリクエストを処理するため Go が最適と判断したためです。</p>
<h3 id="%E3%83%80%E3%82%A6%E3%83%B3%E3%83%AD%E3%83%BC%E3%83%89%E3%81%97%E3%81%9F-parquet-%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%82%92-opfs-%E3%81%AB%E4%BF%9D%E5%AD%98" data-line="42" class="code-line">
<a class="header-anchor-link" href="#%E3%83%80%E3%82%A6%E3%83%B3%E3%83%AD%E3%83%BC%E3%83%89%E3%81%97%E3%81%9F-parquet-%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%82%92-opfs-%E3%81%AB%E4%BF%9D%E5%AD%98" aria-hidden="true"></a> ダウンロードした Parquet ファイルを OPFS に保存</h3>
<p data-line="44" class="code-line">Parquet ファイルを Presigned URL から Fetch API を利用してダウンロードしたら、そのまま OPFS に保存します。 OPFS に保存してあるため、ブラウザを更新すると Parquet ファイルのダウンロードは行いません。</p>
<p data-line="46" class="code-line"><a href="https://gyazo.com/0352d6ce31000e8e22ebc01c3e7ec43f" target="_blank" rel="nofollow noopener noreferrer"><img src="https://i.gyazo.com/0352d6ce31000e8e22ebc01c3e7ec43f.gif" alt="Image from Gyazo" loading="lazy" class="md-img"></a></p>
<h3 id="%E5%A5%BD%E3%81%8D%E6%94%BE%E9%A1%8C%E3%82%AA%E3%83%95%E3%83%A9%E3%82%A4%E3%83%B3%E3%81%A7%E3%83%AD%E3%82%B0%E8%A7%A3%E6%9E%90" data-line="48" class="code-line">
<a class="header-anchor-link" href="#%E5%A5%BD%E3%81%8D%E6%94%BE%E9%A1%8C%E3%82%AA%E3%83%95%E3%83%A9%E3%82%A4%E3%83%B3%E3%81%A7%E3%83%AD%E3%82%B0%E8%A7%A3%E6%9E%90" aria-hidden="true"></a> 好き放題オフラインでログ解析</h3>
<p data-line="50" class="code-line">これで準備完了です。あとは SQL エディターで好き放題 SQL を試します。SQL インジェクションもありません。完全にローカルで動いています。</p>
<h3 id="parquet-%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%81%AE%E3%83%80%E3%82%A6%E3%83%B3%E3%83%AD%E3%83%BC%E3%83%89" data-line="52" class="code-line">
<a class="header-anchor-link" href="#parquet-%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%81%AE%E3%83%80%E3%82%A6%E3%83%B3%E3%83%AD%E3%83%BC%E3%83%89" aria-hidden="true"></a> Parquet ファイルのダウンロード</h3>
<p data-line="54" class="code-line">解析したいログをダウンロードする方法をずっと考えていたのですが、この仕組みで DuckDB で Parquet ファイルを生成して、 OPFS 似保存したものをダウンロードして貰うというのが最も手軽だとわかりました。</p>
<h2 id="sql-%E3%82%A8%E3%83%87%E3%82%A3%E3%82%BF%E3%83%BC" data-line="56" class="code-line">
<a class="header-anchor-link" href="#sql-%E3%82%A8%E3%83%87%E3%82%A3%E3%82%BF%E3%83%BC" aria-hidden="true"></a> SQL エディター</h2>
<p data-line="58" class="code-line">DuckDB-Wasm を利用するにあたり、ブラウザで動作する SQL エディターはとても重要だと考えています。実際ブラウザ上で SQL をこねくり回すときエディタが優秀だと嫌にならないってのは大事だと思っています。</p>
<h3 id="codemirror-%E3%81%AE%E6%8E%A1%E7%94%A8" data-line="60" class="code-line">
<a class="header-anchor-link" href="#codemirror-%E3%81%AE%E6%8E%A1%E7%94%A8" aria-hidden="true"></a> CodeMirror の採用</h3>
<p data-line="62" class="code-line">SQL エディターには <a href="https://codemirror.net/" target="_blank" rel="nofollow noopener noreferrer">CodeMirror</a> を採用しました。<br>
採用理由は <a href="https://github.com/replit/codemirror-vim" target="_blank" rel="nofollow noopener noreferrer">Vim キーバインドのプラグイン</a>が継続的なメンテナンスされているからです。また <a href="https://github.com/codemirror/lang-sql" target="_blank" rel="nofollow noopener noreferrer">SQL ハイライト</a> もよくできています。</p>
<p data-line="65" class="code-line"><a href="https://gyazo.com/2b57474e6a247acc3adc4b59bbc70518" target="_blank" rel="nofollow noopener noreferrer"><img src="https://i.gyazo.com/2b57474e6a247acc3adc4b59bbc70518.png" alt="Image from Gyazo" loading="lazy" class="md-img"></a></p>
<p data-line="67" class="code-line">ちなみに CodeMirror は v6 で 1 から書き直されているので、v5 までしか使ったことがない人はちょっと戸惑うかもしれません。</p>
<h2 id="typescript-%2B-react-%2B-vite" data-line="69" class="code-line">
<a class="header-anchor-link" href="#typescript-%2B-react-%2B-vite" aria-hidden="true"></a> TypeScript + React + Vite</h2>
<p data-line="71" class="code-line">フロントエンドは TypeScript + React + Vite を採用しています。静的ファイルと Go の API サーバーは閉じた世界にあるため、外部からは叩けないようになっています。</p>
<h2 id="%E9%9B%91%E6%84%9F" data-line="73" class="code-line">
<a class="header-anchor-link" href="#%E9%9B%91%E6%84%9F" aria-hidden="true"></a> 雑感</h2>
<p data-line="75" class="code-line">DuckDB-Wasm はブラウザ上で Parquet ファイルを SQL で解析するという革命的なツールです。オブジェクトストレージや OPFS を利用する事で安価でスケールさせることが可能になります。実際、利用しているとログがブラウザ上で解析できるのとても便利です。</p>
<p data-line="77" class="code-line">この機能を実現するのに追加でかかった費用は <a href="https://techdocs.akamai.com/cloud-computing/docs/object-storage" target="_blank" rel="nofollow noopener noreferrer">オブジェクトストレージ 250 GB で月 5 ドル</a> だけです。小規模なサービスなので 1 TB になっても 月 20 ドルです。そもそも JSON Lines 形式のログは gz で圧縮して保存してますし、 Parquet は <a href="https://github.com/facebook/zstd" target="_blank" rel="nofollow noopener noreferrer">Zstandard</a> で圧縮しているので、1 TB のログとなるとよほどのことになります。</p>
<p data-line="79" class="code-line">今後は自社の商用サービスのダッシュボードにもこの機能を展開していく予定です。</p>


DuckDB-Wasm を利用したブラウザでのログ解析機能

Fluent Bit からオブジェクトストレージへ

リクエストベースでのログからの Parquet ファイル生成

Presigned URL を利用してダウンロード

ダウンロードした Parquet ファイルを OPFS に保存

好き放題オフラインでログ解析

Parquet ファイルのダウンロード

Discussion