다음을 통해 공유

ASP.NET Core 앱으로 Visual Studio 2022에서 개발 터널을 사용하는 방법

  • 아티클

Visual Studio 2022의 개발 터널 기능을 사용하면 서로 직접 연결할 수 없는 컴퓨터 간에 임시 연결을 사용할 수 있습니다. 인터넷에 연결된 모든 디바이스가 localhost에서 실행되는 동안 ASP.NET Core 프로젝트에 연결될 수 있도록 해주는 URL이 만들어집니다.

사용 사례

개발 터널에서 사용할 수 있는 몇 가지 시나리오는 다음과 같습니다.

  • 휴대폰, 태블릿과 같은 다른 디바이스에서 웹앱을 테스트합니다.
  • 외부 서비스를 사용하여 앱을 테스트합니다. 예를 들어 Power Platform 커넥터, Azure Communication Services API 또는 Twilio 웹후크를 테스트하고 디버그합니다.
  • 프레젠테이션에 사용하거나 웹앱 또는 API에서 다른 사람들이 작업을 검토할 수 있도록 인터넷을 통해 앱을 일시적으로 다른 사람들에게 공개합니다.
  • 다른 포트 전달 솔루션 대신 사용할 수 있습니다.

필수 조건

  • ASP.NET 및 웹 개발 워크로드가 설치된 Visual Studio 2022 버전 17.6 이상. 개발 터널을 만들고 사용하려면 Visual Studio에 로그인해야 합니다. 해당 기능은 Mac용 Visual Studio에서 사용할 수 없습니다.
  • 하나 이상의 ASP.NET Core 프로젝트. 이 문서에서는 두 개의 샘플 프로젝트가 있는 솔루션을 사용하여 기능을 보여 줍니다.

터널 만들기

터널을 만들려면 다음을 수행합니다.

Visual Studio 2022에서 ASP.NET Core 웹 프로젝트 또는 하나 이상의 웹 프로젝트가 시작 프로젝트로 설정된 솔루션을 엽니다.

디버그 드롭다운에서 개발 터널>터널 만들기를 선택합니다.

터널 만들기 옵션이 선택된 개발 터널 옵션을 보여 주는 디버그 드롭다운

터널 만들기 대화 상자가 열립니다.

개발 터널 만들기 대화 상자

  • 터널을 만드는 데 사용할 계정을 선택합니다. 터널을 만드는 데 사용할 수 있는 계정 유형에는 Azure, MSA(Microsoft 계정) 및 GitHub가 포함됩니다.
  • 터널의 이름을 입력합니다. 터널의 이름은 Visual Studio UI에서 터널을 식별합니다.
  • 터널 유형, 영구 또는 임시를 선택합니다.
    • 임시 터널은 Visual Studio가 시작될 때마다 새 URL을 가져옵니다.
    • 영구 터널은 Visual Studio가 시작될 때마다 동일한 URL을 가져옵니다. 자세한 내용은 이 문서의 뒷부분에 있는 영구 터널 및 임시 터널을 참조하세요.
  • 터널에 액세스하는 데 필요한 인증을 선택합니다. 다음 옵션을 사용할 수 있습니다.
    • 프라이빗: 터널을 만든 계정에서만 터널에 액세스할 수 있습니다.
    • 조직: 터널을 만든 계정과 동일한 조직의 계정에서 터널에 액세스할 수 있습니다. 개인 MSA(Microsoft 계정)에 대해 이 옵션을 선택한 경우 효과는 프라이빗을 선택하는 것과 동일합니다. Github 계정에 대한 조직 지원은 지원되지 않습니다.
    • 퍼블릭: 인증이 필요하지 않습니다. 인터넷의 모든 사용자가 웹앱 또는 API에 액세스하는 것이 안전한 경우에만 이 옵션을 선택합니다.
  • 확인을 선택합니다.

터널이 생성되었다는 확인 메시지가 Visual Studio에 표시됩니다.

터널 만들기 성공에 대한 알림

터널이 디버그 드롭다운 개발 터널 플라이아웃에 표시됩니다.

새 터널을 보여 주는 디버그 드롭다운 개발 터널 플라이이웃

활성 터널 지정

프로젝트 또는 솔루션에는 여러 터널이 있을 수 있지만 한 번에 하나만 활성화됩니다. 디버그 드롭다운의 개발 터널 플라이아웃은 활성 터널을 지정할 수 있습니다. 활성 터널이 있는 경우 Visual Studio에서 시작되는 모든 ASP.NET Core 프로젝트에 사용됩니다. 터널이 활성으로 선택되면 Visual Studio가 닫히기 전까지 활성 상태로 유지됩니다. 다음 그림에서는 내 임시 터널 이 활성화되어 있습니다.

개발 터널 플라이아웃의 활성 터널을 보여 주는 디버그 드롭다운.

플라이아웃에서 없음을 선택하여 터널을 사용하지 않습니다. Visual Studio가 다시 시작되면 기본값은 없음으로 다시 설정됩니다.

터널 사용

터널이 활성 상태이고 Visual Studio에서 웹앱을 실행하면 웹 브라우저가 localhost URL이 아닌 터널 URL에서 열립니다. 터널 URL은 다음 예시와 같습니다.

https://0pbvlk3m-7032.usw2.devtunnels.ms

이제 인증된 모든 사용자는 인터넷에 연결된 다른 디바이스에서 동일한 URL을 열 수 있습니다. 프로젝트가 로컬로 계속 실행되는 한 인터넷에 연결된 모든 디바이스는 개발 컴퓨터에서 실행 중인 웹 애플리케이션에 액세스할 수 있습니다.

브라우저가 지원되는 웹 프로젝트의 경우 각 디바이스에서 터널 URL로 전송된 첫 번째 요청에 경고 페이지가 표시됩니다.

개발 터널 알림 페이지

계속을 선택하면 요청이 로컬 웹앱으로 라우팅됩니다. 이 알림 페이지는 개발 터널을 사용하는 API 요청에 대해 표시되지 않습니다.

터널을 사용하여 휴대폰 또는 태블릿에서 테스트

휴대폰 또는 태블릿과 같은 외부 디바이스에서 웹앱을 테스트하려면 터널 URL로 이동합니다. 외부 디바이스에서 URL을 보다 쉽게 재현하려면 다음을 수행합니다.

  • 로컬 컴퓨터의 Edge 브라우저에서 터널 URL로 이동합니다.
  • 로컬 컴퓨터의 Edge 브라우저에서 URL에 대한 QR 코드를 생성합니다.
    • URL 표시줄을 선택하면 QR 코드 단추가 표시됩니다.
    • QR 코드 단추를 선택하여 QR 코드를 생성하고 봅니다. QR 코드 만들기 단추가 강조 표시된 QR 코드
  • 휴대폰 또는 태블릿으로 이 QR 코드를 스캔하여 URL로 이동합니다.

개발 터널 출력 창

실행 중인 프로젝트의 터널 URL을 표시하려면 출력 보기 선택 드롭다운에서 개발 터널을 선택합니다.

개발 터널 출력 창

이 창은 기본적으로 브라우저를 열지 않는 프로젝트에 특히 유용합니다. 예를 들어 Azure 함수를 사용하는 경우 개발 터널에서 사용 중인 공용 URL을 검색하는 가장 쉬운 방법이 될 수 있습니다.

개발 터널 도구 창

개발 터널 도구 창에서 개발 터널을 보고 관리합니다.

개발 터널 도구 창

개발 터널 창을 열려면 디버그 드롭다운에서 개발 터널 창 표시 메뉴 옵션을 선택합니다. 또는 보기>다른 창>개발 터널을 선택합니다.

개발 터널 창에서 녹색 + 단추를 선택하여 새 터널을 만듭니다.

터널 오른쪽에 있는 빨간색 x 단추를 사용하여 터널을 삭제합니다.

터널의 상황에 맞는 메뉴는 다음과 같은 옵션을 제공합니다.

  • 활성 터널 지우기: 터널이 활성으로 구성된 경우(왼쪽의 확인 표시로 표시됨) 솔루션이 터널을 사용하지 않도록 다시 설정됩니다.
  • 활성 터널 만들기: 활성으로 구성되지 않은 터널에 대해 표시됩니다.
  • 터널 액세스 토큰 복사: 프라이빗 또는 조직 액세스를 사용하여 터널을 만들고 앱이 웹 API인 시나리오에 대해 제공됩니다. 터널에 대해 인증하려면 터널 액세스 토큰을 복사하여 요청에서 양식 X-Tunnel-Authorization tunnel <TOKEN> 의 헤더로 붙여넣습니다. 이 헤더를 지정하지 않으면 인증 검사가 실패하여 요청이 차단됩니다.
  • 제거

터널 URL 환경 변수

개발 터널 기능은 런타임에 프로그래밍 방식으로 프로젝트의 터널 URL을 가져오는 방법을 제공합니다. 터널을 사용하는 앱이 시작되면 Visual Studio에서는 환경 변수 VS_TUNNEL_URL을 만듭니다. VS_TUNNEL_URL 값은 현재 프로젝트에 사용되는 터널의 URL입니다. VS_TUNNEL_URL은 터널 URL을 외부 서비스에 전달해야 하는 경우 외부 서비스와 앱을 통합할 때 유용할 수 있습니다.

여러 ASP.NET Core 프로젝트가 Visual Studio에서 시작되도록 구성된 경우 시작 중인 앱은 이전에 시작된 모든 프로젝트에 대한 환경 변수를 가져옵니다. 이 변수 이름의 패턴은 VS_TUNNEL_URL_{ProjectName}이며. 여기서 {ProjectName}은 다른 프로젝트의 이름입니다. 예를 들어 시작하도록 설정된 두 개의 프로젝트를 보여 주는 이 예제를 생각해 보겠습니다.

MyWebApi과 MyWebApp이 모두 순서대로 시작하는 것을 보여 주는 시작 프로젝트 선택 페이지

MyWebApi는 MyWebApp보다 위에 있기 때문에 MyWebApp 프로젝트보다 먼저 시작됩니다. MyWebApi 프로젝트가 시작되면 VS_TUNNEL_URL 환경 변수에 있는 해당 터널 URL을 받습니다. MyWebApp 프로젝트가 시작되면 VS_TUNNEL_URL에 있는 자체 터널 URL을 수신하고 다른 프로젝트의 터널 URL은 VS_TUNNEL_URL_MyWebApi 환경 변수에 제공됩니다.

설명을 위해 다음 강조 표시된 코드 줄이 MyWebApp의 Program.cs 파일에 추가되었습니다.

public class Program
{
    public static void Main(string[] args)
    {
        Console.WriteLine($"Tunnel URL: {Environment.
            GetEnvironmentVariable("VS_TUNNEL_URL")}");
        Console.WriteLine($"API project tunnel URL: {Environment.
            GetEnvironmentVariable("VS_TUNNEL_URL_MyWebApi")}");

웹앱을 시작할 때 콘솔 출력은 다음 예시와 같습니다.

Tunnel URL: https://lxm0ltdt-7175.usw2.devtunnels.ms/
API project tunnel URL: https://lxm0ltdt-7042.usw2.devtunnels.ms/
info: Microsoft.Hosting.Lifetime[14]
      Now listening on: https://localhost:7175
info: Microsoft.Hosting.Lifetime[14]
      Now listening on: http://localhost:5228
info: Microsoft.Hosting.Lifetime[0]
      Application started. Press Ctrl+C to shut down.
info: Microsoft.Hosting.Lifetime[0]
      Hosting environment: Development
info: Microsoft.Hosting.Lifetime[0]
      Content root path: C:\DevTunnelsDemo\MyWebApp

여러 시작 프로젝트를 설정하는 방법에 대한 자세한 내용은 방법: 여러 시작 프로젝트 설정을 참조하세요.

영구 터널과 임시 터널의 비교

영구 터널은 Visual Studio를 종료하고 다시 시작한 후 동일한 URL을 사용하는 터널입니다. 변경되지 않는 URL은 웹앱을 외부 서비스와 통합할 때 유용할 수 있습니다. 예를 들어 GitHub 웹후크를 구현하거나 Power Platform 앱과 통합할 API를 개발합니다. 이러한 경우 외부 서비스에 대한 콜백 URL을 지정해야 할 수 있습니다. 영구 터널을 사용하면 외부 서비스 URL을 한 번만 구성하면 됩니다. 임시 터널을 사용하면 Visual Studio가 다시 시작할 때마다 터널 URL을 구성해야 합니다.

영구적 이면 Visual Studio가 열려 있지 않을 때 터널이 작동한다는 의미는 아닙니다. 터널 URL은 터널 URL이 연결되는 ASP.NET Core 프로젝트가 Visual Studio에서 실행되는 경우에만 로컬 컴퓨터에 연결됩니다.

개발 터널 URL이 짧은 시간 동안 작동해야 하는 경우라면 임시 터널도 괜찮습니다. 예를 들어 웹앱에서 진행 중인 작업을 다른 사용자와 공유하거나 외부 디바이스에서 앱을 테스트할 수 있습니다. 경우에 따라 Visual Studio가 시작될 때마다 새 URL을 가져오는 것이 가장 좋습니다.

참고 항목

다음 리소스에서는 개발 터널 기능의 초기 미리 보기 버전을 사용합니다. 따라서 일부는 최신이 아닙니다.