Tutorial 7: Vea su servidor de desarrollo en su teléfono

El agente ha creado una interfaz de usuario web. Utilice la misma tailnet que ccmux para abrirlo en su teléfono, sin implementarlo.

Compartir con Tailscale Serve

Conecte ambos dispositivos a su tailnet. Inicie el servidor de desarrollo en un panel tmux y observe el puerto que imprime. Este ejemplo de Vite utiliza el puerto 5173; Astro normalmente usa 4321.

npm run dev

En un segundo panel, comparta ese puerto:

tailscale serve 5173

Siga cualquier mensaje de configuración de HTTPS, luego abra la URL de HTTPS impresa en su teléfono. Sirve servidores proxy al servidor local sin necesidad de que escuche en cada interfaz de red. El acceso sigue su política de tailnet.

Mantenga este panel en funcionamiento. prensa Ctrl-C en el panel Servir cuando quieras dejar de compartir. Esto detiene la sesión de Serve en primer plano sin restablecer la configuración de Serve no relacionada.

Ver el documentación de Tailscale Serve para conocer los requisitos y comandos de configuración actuales.

Si el marco rechaza el nombre de host

Algunos servidores de desarrollo validan el encabezado del Host. Agregue solo el nombre de host exacto impreso por Tailscale a la lista de hosts permitidos de su marco. Para Vite, consulte servidor.hostspermitidos. Evite deshabilitar las comprobaciones de host a nivel mundial.

Si la recarga en vivo falla detrás del proxy, actualice la página manualmente o configure el origen WebSocket de su marco. También puede vincularse directamente a la IP Tailscale de la máquina. Para Vite:

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

Abra la IP Tailscale impresa y el puerto en su teléfono a través de HTTP. Esto se lleva dentro del túnel cifrado de Tailscale, pero es posible que las funciones del navegador que requieren un origen HTTPS no estén disponibles. Utilice Servir cuando necesite HTTPS.

Vinculación a 0.0.0.0 también expondría el servidor en otras interfaces, incluida su red local. La vinculación a la IP Tailscale mantiene este ejemplo en el ámbito de esa interfaz. Su política de acceso a la tailnet y su firewall de host aún se aplican.

El circuito de retroalimentación del teléfono

1. Mantenga el agente en un panel, el servidor de desarrollo en otro y Servir en un tercero.
2. Abra la URL HTTPS en su teléfono y actualice después de cada cambio.
3. Separe de tmux con Ctrl-bd cuando te alejas.

El enlace funciona mientras el host está activo, conectado a Tailscale y ejecutando ambos procesos. Desconectar tmux preserva los procesos; no garantiza que se pueda acceder a una máquina para dormir.

¿Detectó un error o algo desactualizado? Editar esta página en GitHub.