チュートリアル 7: 携帯電話で開発サーバーを表示する

エージェントは Web UI を構築しました。 ccmux と同じtailnetを使用して、展開せずに電話機で開きます。

Tailscale Serve で共有する

両方のデバイスをtailnetに接続します。 1 つの tmux ペインで開発サーバーを起動し、出力されるポートをメモします。この Vite の例ではポート 5173 を使用します。 Astro は通常 4321 を使用します。

npm run dev

2 番目のペインで、そのポートを共有します。

tailscale serve 5173

HTTPS セットアップ プロンプトに従って、印刷された HTTPS URL を携帯電話で開きます。すべてのネットワーク インターフェイスでリッスンする必要なく、ローカル サーバーにプロキシを提供します。アクセスはtailnet ポリシーに従います。

このペインを実行したままにしてください。プレス Ctrl-C 共有を停止する場合は、[配信] ペインでこれにより、無関係な Serve 構成をリセットせずに、フォアグラウンドの Serve セッションが停止されます。

を参照してください。 Tailscale Serve のドキュメント 現在のセットアップ要件とコマンドについては。

フレームワークがホスト名を拒否した場合

一部の開発サーバーは Host ヘッダーを検証します。 Tailscale によって出力される正確なホスト名のみをフレームワークの許可ホスト リストに追加します。 Vite については、以下を参照してください。 server.allowedHosts。ホストチェックをグローバルに無効にすることは避けてください。

プロキシの背後でライブ リロードが失敗する場合は、ページを手動で更新するか、フレームワークの WebSocket オリジンを設定してください。マシンの Tailscale IP に直接バインドすることもできます。ヴィテの場合:

npm run dev -- --host "$(tailscale ip -4)"

印刷された Tailscale IP と電話機のポートを HTTP 経由で開きます。これは Tailscale の暗号化されたトンネル内で伝送されますが、HTTPS オリジンを必要とするブラウザ機能は利用できない場合があります。 HTTPS が必要な場合は Serve を使用します。

バインド先 0.0.0.0 は、ローカル ネットワークを含む他のインターフェイスでもサーバーを公開します。 Tailscale IP にバインドすると、この例のスコープはそのインターフェイスに限定されます。tailnet アクセス ポリシーとホスト ファイアウォールは引き続き適用されます。

電話のフィードバック ループ

1. エージェントを 1 つのペインに配置し、開発サーバーを別のペインに配置し、3 番目のペインにサービスを配置します。
2. 携帯電話で HTTPS URL を開き、変更するたびに更新します。
3. tmux からの切り離し Ctrl-b d 離れると。

ホストが起動し、Tailscale に接続され、両方のプロセスが実行されている間、リンクは機能します。 tmux を切り離すとプロセスが保持されます。スリープ中のマシンに到達できるかどうかは保証されません。

エラーまたは古いものを見つけましたか? GitHub でこのページを編集します.