Code Remote

ポートとプレビュー

コンピューターの開発サーバーを iPhone で開き、しばらく共有し、それに届くリクエストを確認できます。

これにはすべて、コンピューターに coderemote 0.2.0 以降が必要です。古いものだとアプリがそう表示します。coderemote update(または npm install -g coderemote@latest)を実行し、coderemote up を再起動してください。

Ports タブ

ユーザーが待ち受けている TCP ポートを一覧表示し、数秒ごとに更新します:

  • Started in Code Remote: アプリのターミナルから起動したサーバー。そのターミナルへのショートカット付き。
  • Other: プロジェクトのフォルダで動いているそれ以外すべて。たとえばコンピューター上で自分で起動したサーバーなど。
  • Background: アプリとシステムサービス。求めるまで非表示です。

ポートをスワイプすると、その裏のプロセスを停止します(Ctrl+C と同じ SIGTERM を受け取ります)。長押しすると Force Stop(SIGKILL)になります。停止できるのは、いま待ち受けているプロセスだけで、他のユーザーのものは停止できません。別の coderemote エージェントを停止するときは、それとペアリングしたすべてのデバイスがフォルダを失うため、先に確認します。

プレビュー

ポートをタップしてアプリで開きます。初回は、コンピューターがトンネルで公開する間、数秒かかります。その後は、すでにあなたとしてサインインした状態で、通常のページのように読み込まれます。

  • localhost、127.0.0.1、::1 のサーバーはどれも使えます。開発サーバーをすべてのインターフェースで待ち受けさせる必要はありません。
  • リクエストは localhost:<port> 宛てとしてサーバーに届くので、ホスト名を確認するサーバー(Vite など)もそのまま受け付けます。
  • Copy Link と Open in Safari で、プレビューのアドレスが分かります。これはプライベートなので、Safari はまず同じアカウントでのサインインを求めます。
  • Stop Preview はポートをトンネルから外します。サーバーは動き続けます。
  • サーバーが停止すると(Ports タブで停止した、ターミナルを閉じた、Ctrl+C を押した、クラッシュしたなど)、そのポートで 30 秒間何も待ち受けなくなった時点で、公開リンクも含めてプレビューは自動的に終了します。その間に再起動したサーバーはプレビューを維持します。Ports タブから停止したものは、すぐに終了します。coderemote 0.3.8 以降が必要です。

プレビュー中のポートは、Ports タブに印が付きます。

公開リンクを共有する

アカウントのない人に作業を見せるには、プレビューのメニューを開いて Share Publicly を選びます。1 時間、8 時間、1 日から選べます。それまでの間、リンクを持つ人は誰でも、サインインなしでそのポートを開けます。

  • 共有されるのはそのポートだけです。エージェント、そのファイル、ターミナルは、別のトンネル上でプライベートのままです。
  • リンクがいつまで公開されるかがバナーに表示され、Make Private でいますぐ終了できます。Ports タブでは、そのポートに地球のアイコンが付きます。
  • プレビューまたはエージェントを停止すると、リンクも使えなくなります。

これは開発サーバーであることを忘れないでください。画面を見せてもいい相手とだけ共有し、終わったらプライベートに戻してください。

リクエスト

プレビュー内のリストアイコンは、そのポートに届いたリクエストを新しい順にライブで表示します: メソッド、パス、ステータス、時刻、サイズが、ステータスごとに色分けされます。タップすると、ヘッダーと本文が表示されます。JSON は整形され、圧縮された本文は展開されます。

  • プレビューのリンクを通って来るものなら何でも対象です: ページ自体、その API 呼び出し、共有リンクに向けた webhook など。
  • ポートごとに直近 200 件のリクエストが、64 KB までの本文とともに保持されます。WebSocket(ホットリロード)はそのまま通過し、ハンドシェイクだけが一覧に載ります。
  • それらはコンピューター上のメモリにだけあります。Clear で消え、coderemote up を止めても消えます。

リストの下のバーで絞り込めます。フィルターボタンで種類(All、Fetch/XHR、CSS、Image、JS。レスポンスの種類とファイル拡張子から判定)を選び、検索欄はメソッドとパスに一致します。

同じログは、コンピューターのターミナルで coderemote requests を使って読むこともでき、Claude Code のようなコーディングエージェントがデバッグに使えます。そこではトークンと Cookie は、求めない限りマスクされます。

仕組み

プレビューはエージェント自身のトンネルを通りません。ポートを初めてプレビューすると、エージェントは 2 つ目のプライベートトンネル(ラベルは coderemote-preview)を作り、そこにポートを転送します。ポートを追加または削除すると、そのトンネルの接続が再起動されるため、開いている他のプレビューは一瞬ちらつきますが、ターミナル、ファイル、git には影響しません。

プレビューされるポートはそれぞれ、エージェント内の小さなプロキシを通ります。リクエストを記録しているのはこのプロキシです。そのため、プレビューのアドレスにはサーバーのポートではなくプロキシのポート番号が入ります(5173 のサーバーなら …-49213.usw2.devtunnels.ms)。アプリには常にサーバー自身のポートが表示されます。

エージェントは停止するときにプレビュー用トンネルを削除します。削除できなかった場合(たとえばコンピューターがオフラインになった)は、次の coderemote up が削除します。共有リンクが、それを作ったエージェントより長く残ることはなく、古いプレビューがアカウントの 10 個のトンネルを消費することもありません。それでもアカウントがいっぱいの場合、新しいプレビューは、どのエージェントも使っていないプレビュー用トンネルを先に削除します。それでも足りなければアプリがお知らせし、コンピューターで coderemote tunnels を実行すると削除すべきものが分かります。