OSS調査
Webブラウザにターミナルを表示する軽量OSS ttyd
ttyd は、ターミナルをWebブラウザ上に表示するためのOSSです。 個人開発の管理画面や検証環境で、ブラウザからシェルを扱いたいときの候補になります。
この記事では、ttydが何をしてくれるのか、Webコンテンツに組み込む場合にどこが便利なのか、そしてローカルホストや閉じたLAN内で扱う場合に何を警戒すべきかを整理します。
ttydとは
ttydは、指定したコマンドをWebブラウザから操作できるようにするコマンドラインツールです。 公式READMEでは、複数のOSに対応するクロスプラットフォームのWebターミナルとして説明されています。
基本形はかなり単純です。たとえば次のように起動すると、指定ポートでローカルのWebターミナルが立ち上がり、ブラウザから bash を操作できます。
ttyd -p 8080 bash
公式Wikiの例では、デフォルトの待受ポートは 7681 で、-p オプションで変更できると説明されています。 また、シェルだけでなく vim のような対話的なプログラムをブラウザに出す使い方も紹介されています。
Webコンテンツに組み込む時の構成
ローカルツールやLAN内のWeb画面から使う場合は、同じマシンまたは閉じたネットワーク内でttydプロセスを起動し、その画面を管理ページの一部として表示する構成が考えられます。 Webアプリ本体は、ttydの起動、停止、状態確認、表示先URLの管理に集中できます。
ttyd --writable --interface 127.0.0.1 --port <空きポート> /bin/bash -l
この構成の良い点は、Webターミナルの表示、WebSocket接続、キーボード入力、端末描画のような複雑な部分を自前実装しなくて済むことです。 既存のWeb画面に「補助的なターミナル」を足したい場合、独自実装よりも現実的な選択肢になります。
便利だと感じた点
- 単体コマンドとして導入でき、Webアプリ側に大きな依存を増やさずに済む。
- bash だけでなく、任意のコマンドをブラウザ上に出せる。
- --interface 127.0.0.1 のように待受インターフェースを絞れる。
- Basic認証、リバースプロキシ前提の認証ヘッダー、SSL、最大接続数、単一接続モードなどの制御オプションがある。
注意すべきところ
ttydは便利ですが、表示しているのは実際のシェルです。 つまり、ブラウザから入力されたコマンドは、そのttydプロセスが動いている環境で実行されます。 Web UIだから安全、という種類のものではありません。
特に注意したいのは --writable です。 公式のオプション説明では、クライアントからTTYへ書き込むためのオプションで、既定では読み取り専用とされています。 対話操作を目的にする場合は --writable を付けることになりますが、その分だけ到達できる範囲を強く制限する必要があります。
- 基本は 127.0.0.1 にバインドし、同じマシンのブラウザからだけ到達できるようにする。
- 閉じたLAN内で使う場合でも、Basic認証やリバースプロキシ側の認証を必ず検討する。
- WebSocketのOrigin制御、最大接続数、単一接続モード、切断時終了などのオプションを用途に合わせて確認する。
- 実験用途でも、広いネットワークに晒さず、Dockerや専用ユーザーなどで影響範囲を狭める。
個人的な使いどころ
Homelabで使うなら、Webアプリケーションのテスト環境に置く小さな管理コンソールとして考えると分かりやすいです。 たとえば、検証用サービスの起動、ログ確認、ビルド補助コマンド、状態確認スクリプトの実行などを、ブラウザ上の管理画面から扱いたい場面があります。
もう一つ相性が良さそうなのは、ターミナル上で動くAIコーディング支援ツールとの対話インターフェースです。 Claude CodeやCodexのように、CLI上で会話しながらコード生成や修正を進めるツールを使う場合、ttydを挟むことで、ブラウザ内に専用の対話画面を用意できます。
画面の一部にターミナルを入れるだけなら、独自のWebSocketサーバーや端末エミュレーターまわりを作り込むより、ttydを別プロセスとして起動して組み込む方が現実的です。 ただし、この用途でも位置づけはあくまでローカルホストまたは閉じたLAN内の検証補助です。 Webアプリのテスト環境やAIコーディング支援ツールの操作画面を、手元の実験環境に閉じて扱うための部品として見るのが良さそうです。
まずは閉じた環境で試す
ttydは、外から到達させる前提のソフトウェアではなく、まずはローカルホストや閉じたLAN内で試すのが向いています。 ttydプロセスは 127.0.0.1 にバインドし、必要な時だけ起動し、不要になったら停止する運用から始めると扱いやすいです。
この使い方なら、ttydの強みである「薄くWebターミナルを足せる」点を活かしつつ、到達範囲を狭く保てます。 Homelabの実験ツールでも、まずはこの程度の閉じた運用から始めるのが妥当だと感じました。