はじめに
Hetzner VPS 上で動く自動売買パイプラインのログを Cloudflare KV 経由で集約し、Astro SSR でリアルタイムに表示するダッシュボードを作りました。Live Demo として公開しています。
この記事で書きたいのは実装手順ではありません。書きたいのは、なぜこれを作ったのか、バックエンドで動いているものをフロントに接続して公開するという判断の背景です。
自動売買システムそのものの設計やロジックについては、また別の記事で書くつもりです。今回はあくまで Live Demo を作った理由と、その構成上の判断をまとめます。
技術的な仕様が気になる方は portfolio-astro (GitHub) から。
背景 ─ 半年かけて作ってきたものの延長として
去年の2025年7月、コードを1行も書いたことがない状態から、GPTとの壁打ちだけで自動売買のシステムを作り始めました。
最初は本当に何もわかっていませんでした。バックテストとは何か、どこまでを自動化すべきか、エントリーまでつなぐには何が必要か。その都度 GPT に聞いて、返ってきたものを読んで、動かして、壊して、また聞く。その繰り返しでした。
半年かけて、バックテストからエントリーまで一貫して回る仕組みを少しずつ形にしていき、1月頃にひとまず完成と言えるところまで持っていきました。いま動いているメインのシステムも、その延長線上にあります。
その過程で強く感じたのは、難しいのは売買ロジックだけではないということでした。どういう環境で動かすか、どう依存関係を揃えるか、どう再現性を保つか、どう安定して回し続けるか。実際にやってみると、そういう部分の重さのほうが、想像していたよりずっと大きかったです。
その頃には、システムの派生や新しい技術の導入も考え始めていましたが、同時に個人で閉じて作るだけではなく、チーム開発にも興味が出てきました。そこで GitHub のリポジトリを公開し、名刺を作り、ポートフォリオサイトも立ち上げました。
Live Demo は、その流れの中でひとつの問いから生まれました。バックで動かしてきたものを、外から見える形にするにはどうすればいいか。
なぜバックエンドのデータをフロントに接続したのか
私のメインの開発はバック側です。日々見ているのはサーバーの中のログや状態で、表からは見えません。
自動売買システムを作ってきた過程で積み上げてきたのは、環境構築、運用の再現性、ログ設計、障害対応といった、動かし続けるための技術です。でもそれは、外から見てもわからない。
だからこそ、普段は見えにくい部分を、そのままではなく、外から見てわかる形に変換して出すことに意味があると考えました。システムが動いている事実を、画面を通じて直接示せるものを作りたかった。
また、Astro SSR の実装として見ても、「データが変わるたびにサーバーで取得して返す」という構成は、静的サイトには出せない動きです。説明するより動いているものを見せるほうが早い。そう思ってこのシステムを作りました。
まず、開いて何かが伝わるものにしたかった
このダッシュボードは、内部で使う監視画面というより、外から見たときに「何かが動いている」と伝わることを目的に設計しています。
数字の意味をきれいに説明することも大切ですが、その前にまず更新されている気配や画面全体の印象が伝わることを重視しました。色や配置、数字の並び方。そうした要素によって、説明を読む前でもシステムの性格がなんとなく伝わるほうがよいと思ったからです。
構成はシンプルに絞った
het (Hetzner VPS · NixOS · systemd timer)
└─ Python → Cloudflare KV → Astro SSR → /live-demoサーバー側で定期的にデータをまとめて、公開用に整えたうえで、SSR で読み出して表示する。それだけです。
今回ほしかったのは、秒単位で張り付くようなリアルタイム性ではなく、数分単位で更新される状態を安定して外に見せられることでした。この用途では、そのくらいの粒度のほうがむしろ扱いやすく、公開ページとしても無理がありませんでした。
もうひとつ意識したのは、普段動いている側のデータをそのまま外へ出すのではなく、一度公開用に整えてから見せられることです。実際に動いている気配は残しつつ、外に出すページとしての見せ方も整理しやすくなりました。機密性のある値は除外し、5分の遅延を挟んで公開しています。
SVG チャートはライブラリなしで document.createElementNS だけで描画しています。依存を増やさずに済む範囲で、必要な表現は自分で書くという判断です。
難しいものを作るだけでなく、つなげて見せるところまでやりたかった
自動売買をシステムとして作る難しさは、構築するロジックだけではありません。最初の頃は Raspberry Pi を複数台使って役割を分けながら回していました。実際にやってみると、戦略のロジック以上に、環境構築や運用の再現性を保つことのほうがずっと難しいと感じる場面が多くありました。
その延長で、再現性を重視して NixOS に寄っていきました。単にプログラムを書くというより、どういう環境で、どういう依存関係で、どう安定して動かし続けるかをちゃんと作るようになっていった感覚です。
だから私が伝えたいのは、単に自動売買をやっているということではありません。難易度の高いバックエンドを作ることに留まらず、環境構築や運用、エッジ側の発想、さらにフロントに見せるところまで含めて、全体をつなげて考えているということです。
Live Demo は、その発想を外から見える形にしたかったから作りました。
おわりに
Live Demo は、バック側で動かしてきたものをウェブ上で見える形に変え、ひとつのショーケースとしてまとめたシステムです。
私が本当にやりたいのは、このシステムそのものを育て続けることではなく、今後クライアントワークの中で、扱うデータや文脈に合わせたものを作り、それを実績として積み上げていくことです。その意味で、今回の制作は、その方向を具体的に示すための最初のデモになりました。