Tutorial 7: Zeigen Sie Ihren Dev-Server auf Ihrem Telefon an

Der Agent hat eine Web-Benutzeroberfläche erstellt. Verwenden Sie dasselbe Tailnet wie ccmux, um es auf Ihrem Telefon zu öffnen, ohne es bereitzustellen.

Mit Tailscale Serve teilen

Verbinden Sie beide Geräte mit Ihrem Tailnet. Starten Sie den Entwicklungsserver in einem tmux-Bereich und notieren Sie den Port, den er druckt. Dieses Vite-Beispiel verwendet Port 5173; Astro verwendet normalerweise 4321.

npm run dev

Geben Sie in einem zweiten Bereich diesen Port frei:

tailscale serve 5173

Folgen Sie einer beliebigen HTTPS-Einrichtungsaufforderung und öffnen Sie dann die gedruckte HTTPS-URL auf Ihrem Telefon. Stellen Sie Proxys für den lokalen Server bereit, ohne dass dieser jede Netzwerkschnittstelle abhören muss. Der Zugriff folgt Ihrer Tailnet-Richtlinie.

Lassen Sie diesen Bereich aktiv. Drücken Sie Ctrl-C im Bereitstellungsbereich, wenn Sie die Freigabe beenden möchten. Dadurch wird die Vordergrund-Serve-Sitzung gestoppt, ohne dass die nicht verwandte Serve-Konfiguration zurückgesetzt wird.

Siehe die Dokumentation zu Tailscale Serve für aktuelle Setup-Anforderungen und Befehle.

Wenn das Framework den Hostnamen ablehnt

Einige Entwicklungsserver validieren den Host-Header. Fügen Sie der Liste der zulässigen Hosts Ihres Frameworks nur den genauen Hostnamen hinzu, der von Tailscale ausgegeben wird. Für Vite siehe server.allowedHosts. Vermeiden Sie es, Hostprüfungen global zu deaktivieren.

Wenn das Live-Neuladen hinter dem Proxy fehlschlägt, aktualisieren Sie die Seite manuell oder konfigurieren Sie den WebSocket-Ursprung Ihres Frameworks. Sie können auch direkt an die Tailscale-IP der Maschine binden. Für Vite:

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

Öffnen Sie die gedruckte Tailscale-IP und den Port auf Ihrem Telefon über HTTP. Dies wird im verschlüsselten Tunnel von Tailscale übertragen, aber Browserfunktionen, die einen HTTPS-Ursprung erfordern, sind möglicherweise nicht verfügbar. Verwenden Sie Serve, wenn Sie HTTPS benötigen.

Bindung an 0.0.0.0 würde den Server auch auf anderen Schnittstellen verfügbar machen, einschließlich Ihres lokalen Netzwerks. Durch die Bindung an die Tailscale-IP bleibt dieses Beispiel auf diese Schnittstelle beschränkt. Ihre Tailnet-Zugriffsrichtlinie und Ihre Host-Firewall gelten weiterhin.

Die Telefon-Feedback-Schleife

1. Behalten Sie den Agenten in einem Bereich, den Entwicklungsserver in einem anderen und „Serve“ in einem dritten Bereich.
2. Öffnen Sie die HTTPS-URL auf Ihrem Telefon und aktualisieren Sie sie nach jeder Änderung.
3. Von tmux mit lösen Ctrl-b d wenn Sie weggehen.

Die Verbindung funktioniert, während der Host wach ist, mit Tailscale verbunden ist und beide Prozesse ausgeführt werden. Durch das Trennen von tmux bleiben die Prozesse erhalten; Es garantiert nicht, dass eine Schlafmaschine erreichbar bleibt.

Haben Sie einen Fehler entdeckt oder ist etwas veraltet? Bearbeiten Sie diese Seite auf GitHub.