튜토리얼 7: 휴대폰에서 Dev Server 보기

에이전트가 웹 UI를 구축했습니다. 배포하지 않고 전화기에서 열려면 ccmux와 동일한 tailnet을 사용하십시오.

Tailscale Serve로 공유하기

두 장치를 tailnet에 연결합니다. 하나의 tmux 창에서 개발 서버를 시작하고 인쇄되는 포트를 기록해 둡니다. 이 Vite 예제에서는 포트 5173을 사용합니다. Astro는 일반적으로 4321을 사용합니다.

npm run dev

두 번째 창에서 해당 포트를 공유합니다.

tailscale serve 5173

HTTPS 설정 프롬프트를 따른 다음 인쇄된 HTTPS URL을 전화기에서 엽니다. 모든 네트워크 인터페이스를 수신할 필요 없이 로컬 서버에 프록시를 제공합니다. 액세스는 tailnet 정책을 따릅니다.

이 창을 계속 실행하세요. 누르다 Ctrl-C 공유를 중지하려면 검색 창에서 이렇게 하면 관련 없는 서버 구성을 재설정하지 않고 포그라운드 서버 세션이 중지됩니다.

참조 Tailscale Serve 문서 현재 설정 요구 사항 및 명령은 다음과 같습니다.

프레임워크가 호스트 이름을 거부하는 경우

일부 개발 서버에서는 호스트 헤더의 유효성을 검사합니다. Tailscale에서 인쇄한 정확한 호스트 이름만 프레임워크의 허용 호스트 목록에 추가하세요. Vite의 경우 다음을 참조하세요. server.allowedHosts. 전역적으로 호스트 검사를 비활성화하지 마십시오.

프록시 뒤에서 실시간 다시 로드가 실패하는 경우 페이지를 수동으로 새로 고치거나 프레임워크의 WebSocket 원본을 구성하세요. 기기의 Tailscale IP에 직접 바인딩할 수도 있습니다. Vite의 경우:

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

인쇄된 Tailscale IP와 HTTP를 통해 전화기의 포트를 엽니다. 이는 Tailscale의 암호화된 터널 내부로 전달되지만 HTTPS 원본이 필요한 브라우저 기능을 사용하지 못할 수 있습니다. HTTPS가 필요할 때 Serve를 사용하세요.

바인딩 대상 0.0.0.0 은 또한 로컬 네트워크를 포함한 다른 인터페이스에 서버를 노출합니다. Tailscale IP에 바인딩하면 이 예제의 범위가 해당 인터페이스로 유지됩니다. Tailnet 액세스 정책과 호스트 방화벽이 계속 적용됩니다.

전화 피드백 루프

1. 한 창에는 에이전트를, 다른 창에는 개발 서버를, 세 번째 창에는 서비스를 유지합니다.
2. 휴대폰에서 HTTPS URL을 열고 변경할 때마다 새로 고침하세요.
3. 다음을 사용하여 tmux에서 분리합니다. Ctrl-b d 당신이 물러날 때.

링크는 호스트가 깨어 있고 Tailscale에 연결되어 있고 두 프로세스를 모두 실행하는 동안 작동합니다. tmux를 분리하면 프로세스가 보존됩니다. 수면 기계에 계속 접근할 수 있다고 보장하지는 않습니다.

오류나 오래된 내용을 발견하셨나요? GitHub에서 이 페이지를 편집하세요..