はじめに
AWS の保守運用をしていると、CloudWatch Logs でのログ調査が避けられません。
担当プロジェクトでも障害や高負荷時の調査、パフォーマンス改善のたびにログを追うのですが、これがとても大変でした。
- マネジメントコンソールの検索は条件が少なく、絞り込みが難しい
- RequestID でログを追いたいのに、バラバラに流れてきて追いにくい
- どのリクエストが遅いのか、異常終了しているのかを一目で把握できない
「専用の分析ツールが欲しい」と思いつつ、一から作るのはハードルが高い……
そこで Claude Codeを活用しながら自分で作れないか 試してみました。
作ったもの
CloudWatch Logs Analytics — ローカルで動くログ分析 Web アプリです。
担当プロジェクトで使用している log4net / Serilog 形式のログを対象に、以下の 4 つの機能を搭載しています。
機能紹介
1. ログ検索
時間範囲・ログレベル・RequestID・フリーテキストで絞り込んでテーブル表示します。
- ログレベルはカラーバッジで色分け（ERROR=赤、WARN=黄、INFO=緑、DEBUG=グレー）
- RequestID 単位でログをグループで追えるため、1 リクエストの流れが把握しやすい
- 結果は CSV 出力可能（Excel で文字化けしない BOM 付き UTF-8）
2. 処理時間分析
RequestID ごとの処理時間を棒グラフで可視化します。
閾値（デフォルト 3,000ms）を超えたものは赤で強調されるので、遅いリクエストが一目でわかります。
各行の「詳細」ボタンを押すと、対象リクエストのログをモーダルで確認できます。
上の例では 7,200ms かかったリクエストを開くと、DB クエリが 5,300ms 遅延していたことがすぐわかります。
3. ENDなし検出
START ログはあるが END ログがない（= 正常終了しなかった）リクエストを自動で検出します。
タイムアウトや例外による中断を洗い出すのに使っています。
「詳細」ボタンで対象リクエストの全ログを確認できます。
4. Errorログ検出
ERROR / FATAL レベルのログを一覧表示します。
エラー発生時刻の前後 5 分のログをモーダルで確認できるので、原因調査がスムーズです。
技術スタック
| 層 | 技術 |
|---|---|
| フロントエンド | Vue 3 + TypeScript + Vite + Chart.js |
| バックエンド | Node.js + Express + TypeScript |
| AWS 連携 | @aws-sdk/client-cloudwatch-logs |
| 認証 | AWS SSO プロファイル |
セットアップ
前提条件
- Node.js 18 以上
- AWS CLI + AWS SSO 設定済み
インストール・起動
# バックエンド
cd backend && npm install && npm run dev
# フロントエンド（別ターミナル）
cd frontend && npm install && npm run dev
ブラウザで http://localhost:5173 を開き、右上の AWS SSO プロファイル名を入力すれば使えます。
AWS なしで試したい場合（モックモード）
cd backend && npm run dev:mock
ダミーデータで全機能を試せます。AWS アカウントがなくても動作確認できます。
作ってみた感想
今回は Claude Code を使いながら開発しました。
「こういう機能が欲しい」と伝えると実装してくれるので、自分はロジックの方針を決めることに集中できました。
フロントエンド（Vue）は普段あまり触らないのですが、AI のサポートがあったおかげで形にできました。
最終的にはコードをちゃんと読みながら進めていたので、「AI に丸投げ」というよりはペアプロに近い感覚 でした。
同じような課題を抱えている方の参考になれば幸いです。
フィードバック・PR もお待ちしています。
リポジトリ