Tutoriel 7 : Afficher votre serveur de développement sur votre téléphone

L'agent a créé une interface utilisateur Web. Utilisez le même tailnet que ccmux pour l'ouvrir sur votre téléphone, sans le déployer.

Partager avec Tailscale Serve

Connectez les deux appareils à votre tailnet. Démarrez le serveur de développement dans un volet tmux et notez le port qu'il imprime. Cet exemple Vite utilise le port 5173 ; Astro utilise normalement 4321.

npm run dev

Dans un deuxième volet, partagez ce port :

tailscale serve 5173

Suivez n'importe quelle invite de configuration HTTPS, puis ouvrez l'URL HTTPS imprimée sur votre téléphone. Servez des proxys au serveur local sans lui demander d'écouter sur chaque interface réseau. L'accès suit votre politique tailnet.

Gardez ce volet actif. Presse Ctrl-C dans le volet Servir lorsque vous souhaitez arrêter le partage. Cela arrête la session Serve au premier plan sans réinitialiser la configuration Serve sans rapport.

Voir le documentation de Tailscale Serve pour connaître les exigences et les commandes de configuration actuelles.

Si le framework rejette le nom d'hôte

Certains serveurs de développement valident l'en-tête Host. Ajoutez uniquement le nom d'hôte exact imprimé par Tailscale à la liste des hôtes autorisés de votre framework. Pour Vite, voir serveur.allowedHosts. Évitez de désactiver les contrôles d’hôte globalement.

Si le rechargement en direct échoue derrière le proxy, actualisez la page manuellement ou configurez l'origine WebSocket de votre infrastructure. Vous pouvez également vous lier directement à l’adresse IP Tailscale de la machine. Pour Vite :

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

Ouvrez l'adresse IP et le port Tailscale imprimés sur votre téléphone via HTTP. Ceci est transporté dans le tunnel crypté de Tailscale, mais les fonctionnalités du navigateur nécessitant une origine HTTPS peuvent ne pas être disponibles. Utilisez Serve lorsque vous avez besoin de HTTPS.

Liaison à 0.0.0.0 exposerait également le serveur sur d'autres interfaces, y compris votre réseau local. La liaison à l'adresse IP Tailscale conserve cet exemple limité à cette interface. Votre politique d’accès tailnet et votre pare-feu hôte s’appliquent toujours.

La boucle de rétroaction téléphonique

1. Conservez l'agent dans un volet, le serveur de développement dans un autre et Serve dans un troisième.
2. Ouvrez l'URL HTTPS sur votre téléphone et actualisez-la après chaque modification.
3. Détachez-vous de tmux avec Ctrl-bd lorsque vous vous éloignez.

Le lien fonctionne lorsque l'hôte est réveillé, connecté à Tailscale et exécute les deux processus. Le détachement de tmux préserve les processus ; cela ne garantit pas qu'une machine à dormir reste accessible.

Vous avez repéré une erreur ou quelque chose de obsolète ? Modifier cette page sur GitHub.