>_ DevTrendsja

言語

ホーム

言語

セクション

フロントエンド バックエンド モバイル DevOps AI / ML ゲーム開発 ブロックチェーン 組み込み セキュリティ
TypeScript

WeTTYでターミナルをブラウザに直接転送する方法

このような状況を想像してみてください:タブレット、他人のノートパソコン、セキュリティポリシーが厳格な職場のコンピュータからホームサーバーや作業用仮想マシンに緊急でアクセスする必要があるとします。ポート22が完全にブロックされており、適切なSSHクライアントをインストールすることもできません。ブラウザを開き、アドレスを入力すると、おなじみのシェルでフル機能のコマンドラインが表示されます。

これがまさにWeTTYプロジェクト(Web + TTY)が作られた目的です。

WeTTY

内部構造

AjaxtermやAnytermのような古いソリューションは、通常のHTTPリクエストを行き来させていたため、的痛苦なほど遅かったです。WeTTYは異なるアプローチを取っています。バックエンドはTypeScriptとNode.jsで構築されており、ブラウザとの通信はWebSocket経由で行われ、レンダリングはxterm.jsターミナルエミュレータ(VS Codeの裏側で動作しているものと同じ)によって処理されます。

xterm.jsとWebSocketの組み合わせにより安定したインターネット接続があれば、入力遅延はほとんど気になりません。疑似グラフィックスを使用するユーティリティもブラウザウィンドウで問題なく動作します:htoptmuxmcvimnano。マウスサポート、ヒートキー、ターミナルカラーもすべて期待通りに機能します。

起動方法

このユーティリティはnpmまたはDockerコンテナの2つの方法で素早くデプロイできます。

オプション1. npmでのインストール

マシンにNode.jsバージョン20 이상이既にインストールされており、ビルドツール(make、python、build-essential)も用意されている場合、ユーティリティは1つのコマンドでインストールできます:

npm -g i wetty

インストール後、サービスを起動します:

wetty --port 3000

次にhttp://localhost:3000にアクセスし、希望のユーザーでログインします。WeTTYが一般ユーザーとして実行されている場合、デフォルトでlocalhostへのSSHセッションを確立します。rootとして実行されている場合は代わりに/bin/loginが呼び出されます。

オプション2. Dockerでの実行

個人的な経験として、ホストに不必要なグローバルNode.jsパッケージをインストールしたくないため、このようなユーティリティはコンテナ内に保持するのが最も簡単だと感じています:

docker run --rm -p 3000:3000 wettyoss/wetty --ssh-host=192.168.1.50

SSHで接続したいホストのIPアドレスに192.168.1.50を置き換えてください。

便利な起動パラメータ

このユーティリティはコマンドライフラグを通じて柔軟な設定を提供します:

  • --ssh-host--ssh-portは接続を別のリモートサーバーにリダイレクトします。
  • --ssh-userはデフォルトユーザーを設定するため、毎回ログイン名を入力する必要がありません。
  • --ssl-key--ssl-certは直接トラフィック暗号化を有効にします。
  • --allow-iframeはターミナルを他のサイトのiframeに埋め込むことを許可します(例:ダッシュボードや監視パネル)。

起動時に毎回フラグを指定したくない場合は、パラメータを構成ファイルにパッケージ化し、--conf経由で渡すことができます。

セキュリティと本番環境での使用

WeTTYの保護されていないHTTPポートをインターネットに公開することは絶対に避けるべきです。攻撃者はブルートフォース攻撃でパスワードを試みたり、暗号化されていないトラフィックを傍受する可能性があります。

実際には、WeTTYの前にリバースプロキシ(NGINX、Traefik、またはCaddy)を配置して、複数の責任を果たすのが一般的です:

  1. Let's Encryptからの無料SSL証明書の発行と更新。
  2. WebSocket接続のプロキシ。
  3. Basic AuthまたはAutheliaによる追加の認証レイヤー。
  4. IPアドレスホワイトリストに基づくアクセス制限。

典型的なNGINX設定の例:

location /wetty/ {
    proxy_pass http://127.0.0.1:3000/wetty/;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
    proxy_read_timeout 43200000;

    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header Host $http_host;
    proxy_set_header X-NginX-Proxy true;
}

ルーティングパスが正しく整列するように、WeTTY自体を--base /wetty/フラグで実行することを忘れないでください。

このプロジェクト誰が対象か

WeTTYは特定の実践的なニーズに対応します:

  • スマートフォンやiPadから直接ホームサーバー(Home Lab)やルーターの迅速な管理。
  • SSHクライアントを設定せずにシェルアクセスが必要な学生のためのデモ環境とトレーニング用サンドボックスのセットアップ。
  • 内部のWebベースインフラ管理パネルへのターミナルウィンドウの埋め込み。
  • ポート80と443のみが開いている隔離された企業内ネットワークからのサーバーへのアクセス。

CockpitやProxmoxのような重量級のWebインターフェースなしで、ブラウザでターミナルを起動する軽量な方法が必要な場合、WeTTYは数分でこれを実現します。リバースプロキシの背後でコンテナを起動し、認証を追加するだけです。

関連プロジェクト