外出先からClaude Codeを使いたくてWebアプリを作った
TL;DR
Claude CodeやCodex などのAIコーディングCLIを、外出先からスマホ・タブレットで操作できるWebアプリ「CloudForge」を作りました。
コードはCloudForgeに送らず、自分のサーバー/ローカルに残したまま使えます。
⸻
課題：外出中にコードを直したい
最近、Claude Codeで開発することが増えました。
ターミナルで対話しながらコードを書いてもらう、いわゆるAIコーディングです。
ただ、問題が一つ。
Claude Codeはローカルターミナル前提なので、外出中に「あのバグ直したい」と思っても何もできない。
SSHでサーバーに繋げばいい？でも：
• スマホからSSHクライアント経由は操作性が悪い
• ポートフォワーディングの設定が面倒
• ファイル編集はvimゴリゴリ…
もっと手軽にできないかと思って作ったのが CloudForge です。
⸻
CloudForgeとは
ブラウザからリモートサーバーに接続して、AIコーディングCLIを操作できるWebアプリです。
特徴
🔒 BYOS（Bring Your Own Server）
コードは自分のサーバーに残ります。CloudForgeにコードを送る必要はありません。軽量なAgentをインストールするだけ。
🖥️ Webターミナル（xterm.js）
Claude Codeの対話もそのまま動きます。スマホでも意外といけます。
📝 Monaco Editor
VSCodeと同じエディタでファイル編集。小さい画面でも「直すだけ」なら十分実用でした。
🔧 対応ツール
特定のAIツールに依存していません：
• Claude Code（Anthropic）
• Codex CLI（OpenAI）
• Gemini CLI（Google）
• Aider
• その他任意のCLIツール
⸻
使い方
- サインアップ
https://cloud-forge.me でアカウント作成（無料）
- サーバーにAgentをインストール
npx cloudforge-agent --token YOUR_TOKEN
トークンはダッシュボードで発行できます。
- ブラウザから接続
サーバーがオンラインになったら、ブラウザからターミナルを開いてClaude Codeを起動するだけです。
⸻
アーキテクチャ
Agentは WebSocketでアウトバウンド接続するので、基本的にファイアウォール設定やポート開放は不要です。
⸻
接続フロー
⸻
作ってみてハマったポイント / 気づき
- モバイル回線は「WebSocketが切れる前提」で設計した方が良い
Wi-Fi ↔︎ 4G/5G の切替や、画面ロックで WebSocketが普通に落ちます。
なので最近は「tmux必須」にせず、サーバ側でPTY（端末プロセス）を生かしておいて再接続で復帰する方向に寄せています（スクロールバックをリングバッファで保持するイメージ）。
- Azure Container Appsの「最小レプリカ数」で地味に詰まる
最初、Agent/Relayまわりをコンテナで運用していて、最小レプリカ数（＝常時起動） の設定にハマりました。
アイドルで落ちると「繋がるまでが遅い」「セッションが切れる」に直結するので、リモート開発系は体験を左右します…。
- “スニペットだけで検索にヒットして驚いた”
LPを更新していたら、想像以上に「本文の一部（スニペット）」で引っかかることがあってびっくりしました。
メタ情報・OGP・見出し構造など、検索に拾われる前提で整えるのが大事だなと実感しています。
⸻
Agentはオープンソース
Agentのコードは公開しています：
MIT License、TypeScript製です。何をやっているか気になる方はぜひ見てみてください。
⸻
料金
• Free: BYOSサーバー1台まで無料
• Starter ($9/月): 3台まで
• Pro ($19/月): 無制限
まずは無料で試してみてください。
⸻
最後に
AIコーディングを外出先でも続けたい人、コードを外部に出したくない人に向けて作りました。
フィードバックお待ちしています！
Discussion