Microsoft Dev Tunnels

1. Dev Tunnel이란?

개발자 터널(Dev Tunnel)은 개발자가 인터넷을 통해 로컬 웹 서비스를 안전하게 공유할 수 있게 해주는 Microsoft의 서비스이다.
(이전에 작성한 ngrok, Vscode Local Port Forwarding와 같은 기능을 cli에서 하는 것으로, 이 2개 관련글은 가장 아래에 달아두었습니다.)

1-1. Feature

Secure by default: 기본적으로 만들어지는 개발 터널은 Microsoft, Microsoft Entra ID 또는 GitHub 계정을 사용하여 액세스 할 수 있다.
Persistent URLs : 필요한 한 동일한 개발 터널 URL을 유지할 수 있다.
Support for multiple simultaneous ports: 단일 개발 터널에서 동시에 여러 포트 호스트 가능
Global service availability : 개발 터널 서비스는 전역적으로 사용할 수 있으며, 개발 터널은 사용 가능한 가장 가까운 지역에 자동으로 만들어진다.
Tunnel inspection: 브라우저 DevTools와 같은 친숙한 인터페이스에서 개발 터널 트래픽을 검사할 수 있다.

1-2. Usage

1. 클라우드 서비스와 로컬 애플리케이션 통합: 클라우드 서비스가 로컬에서 실행 중인 애플리케이션과 통신할 때
2. 팀 협업: 로컬 개발 환경에서 실행 중인 웹 애플리케이션을 팀원들과 공유할 때
3. 웹훅(webhook) 테스트: 웹훅을 로컬 환경으로 라우팅하여 디버깅 및 테스트를 진행할 때
4. 모바일 앱 개발 및 테스트: 다양한 디바이스에서 로컬 API를 테스트할 때

1-3. 주요 용어

• 터널: 릴레이 서비스를 통해 한 호스트에 대한 보안 원격 액세스를 제공한다. 개발 터널에는 고유한 DNS 이름, 여러 포트, 액세스 제어 및 기타 연결된 메타데이터가 존재한다.
• 터널 릴레이 서비스: 호스트가 방화벽 뒤에 있고 들어오는 연결을 직접 수락할 수 없는 경우에도 클라우드 서비스를 통해 개발 터널 호스트와 클라이언트 간의 보안 연결을 용이하게 해 준다.
• 터널 호스트: 개발 터널 릴레이 서비스를 통해 개발 터널에 대한 클라이언트 연결을 허용하고 로컬 포트에 해당 연결을 전달한다.
• 터널 포트: 개발 터널을 통해 허용되는 IP 포트 번호(1-65535)입니다. 개발 터널은 추가된 포트에 대한 연결만 허용한다.
• 터널 클라이언트: 호스트에 대한 개발 터널을 통해 원격 연결을 시작

2. Install

아래 명령어로 설치를 진행해 준다.

curl -sL https://aka.ms/TunnelsCliDownload/linux-x64 -o devtunnel
chmod +x devtunnel
./devtunnel -h

3. Login

개발 터널을 사용하기 위해서는 Microsoft Entra ID, Microsoft 또는 GitHub 계정으로 로그인해야 한다.
이때 로그인, 로그아웃에 관련된 다양한 옵션이 존재한다.

devtunnel user login           # Microsoft 또는 GitHub 계정으로 로그인합니다.
devtunnel user logout          # 캐시된 토큰 지우기
devtunnel user show            # 현재 로그인 상태 표시

devtunnel user login -g        # GitHub 계정으로 로그인
devtunnel user login -d        # 로컬 대화형 브라우저 로그인이 불가능한 경우 디바이스 코드 로그인을 사용하여 GitHub 계정으로 로그인
devtunnel user login -g -d     # 로컬 대화형 브라우저 로그인이 불가능한 경우 디바이스 코드 로그인을 사용하여 GitHub 계정으로 로그인

4. Quick start

로그인 후, host 명령을 사용하여 개발 터널을 생성하고 호스팅 할 수 있다.

# 로컬 포트 8080 터널링하기
devtunnel host -p 8080

 

위 명령어를 실행하면 아래와 같이 나오고, 저 at 뒤에 나오는 링크를 통해 접속이 가능하다.

Hosting port 8080 at https://<tunnel_id>.usw2.devtunnels.ms:8080/, https://<tunnel_id>-8080.usw2.devtunnels.ms/ and inspect it at https:/<tunnel_id>-8080-inspect.usw2.devtunnels.ms/
Ready to accept connections for tunnel: <tunnel_id>

 

출력에 포함된 내용:

• tunnel_id: 개발 터널의 고유 ID
• 공용 URL: 개발 터널에 액세스 하는 데 사용할 수 있는 URL
• 검사 URL: 개발 터널을 통해 전송된 트래픽을 검사하는 데 사용할 수 있는 URL

4. Summary

위 설정은 가장 기본적인 사용법이고 더욱 상세한 설정 방법은 다른 글에서 다루었다.

Dev tunnels command-line reference

 

단순 기능과 사용법만 보면 ngrok 하고 완전히 동일하지만 몇 가지 차이점이 있으며, 둘 다 사용해 본 결과 dev tunnel이 더 좋은 것 같다. 차이점은 다음에 간략하게만 정리해서 올리도록 하겠다. 대부분의 사람들이 ngrok만 사용하는 것 같은데 편리해서인가

 

또한 이전에 작성한 vscode local port forwarding이 이 dev tunnel을 이용해서 작동하는 것이며, 

vscode에서 하면 물론 편하지만 vscode를 종료하는 순간 종료되기 때문에 위 명령어들을 screen을 통해 돌려놓음으로써 계속 유지시킬 수 있다. (최대 30일)

 

이전에 올린 두 개의  글도 참고하길 바란다. 

Vscode Local Port Forwarding

 

ngrok 사용법

Reference

아래는 MS의 공식문서이다. 

 

• 개발 터널이란? - Microsoft Learn
• 개발 터널 만들기 및 호스트 - Microsoft Learn