연습 - 웹앱을 로컬로 실행

  • 2분

이 연습에서 다음을 수행합니다.

  • 웹앱을 로컬에서 실행하고 브라우저에서 확인합니다.
  • 웹앱이 어떻게 제공되는지 검토합니다.

웹앱을 실행하고 브라우저에서 확인

Visual Studio Code에서 웹앱을 실행하고 브라우저에서 확인합니다.

  1. Visual Studio Code에서 F5 키를 눌러 앱을 실행합니다.

    Visual Studio Code:

    • 애플리케이션을 빌드하고 실행하는 .NET CLI 명령 dotnet run을 트리거합니다.
    • 실행 중인 애플리케이션에 디버거를 연결합니다.

    Visual Studio Code에서 프로젝트를 처음 실행하면 디버거 선택 프롬프트가 표시됩니다.

  2. Visual Studio Code UI 상단의 명령 팔레트에서 디버거 선택 프롬프트에서 C#을 선택합니다. 다음 프롬프트에서 기본 시작 구성(C#: MyWebApp [Default Configuration])을 선택합니다.

    명령 팔레트에서 디버거 선택 선택 스크린샷

    기본 브라우저는 http://localhost:{PORT}에서 시작되며 앱의 응답을 표시합니다. {PORT} 자리 표시자는 앱 프로젝트가 만들어질 때 앱에 할당되는 임의의 포트입니다. 로컬 포트 ​​충돌로 인해 포트를 변경해야 하는 경우 프로젝트의 Properties/launchSettings.json 파일에서 포트를 변경합니다.

    브라우저에 표시된 응답:

    텍스트 출력을 표시하는 브라우저의 스크린샷.

  3. 브라우저 창을 닫습니다.

  4. Visual Studio에서 다음 중 하나를 수행합니다.

    • 실행 메뉴에서 디버깅 중지를 선택합니다.
    • 키보드에서 Shift+F5를 누릅니다.

.NET CLI를 사용하여 웹앱을 실행합니다.

  1. 터미널이나 명령줄에서 MyWebApp.csproj 파일이 있는 MyWebApp 프로젝트 디렉터리로 이동합니다.

  2. 다음 명령으로 앱을 빌드하고 실행합니다.

    dotnet run

    프로젝트가 빌드되고 실행되며 명령줄에 다음과 같은 출력이 표시됩니다.

    C:\MyWebApp> dotnet run
Building...
info: Microsoft.Hosting.Lifetime[14]
        Now listening on: http://localhost:5267
info: Microsoft.Hosting.Lifetime[0]
        Application started. Press Ctrl+C to shut down.

    제공된 URL의 포트 번호는 프로젝트를 만들 때 구성에서 임의로 설정되므로 엔드포인트에 다른 포트 번호가 있을 수 있습니다.

  3. 사용자의 명령줄 출력에서 ​​생성된 URL로 브라우저를 열면 앱의 응답 Hello World!가 표시됩니다.

    텍스트 출력을 표시하는 브라우저의 스크린샷.

  4. 앱을 종료하려면 명령줄에서 Ctrl+C를 누릅니다.

웹앱이 제공되는 방식

앱을 빌드하고 실행하면 다음 단계가 진행됩니다.

빌드 및 구성:

  • MSBuild는 종속성을 복원하고 프로젝트를 컴파일하기 위해 호출됩니다. MSBuild는 MyWebApp.csproj 프로젝트 파일을 처리하고 소스 코드를 어셈블리로 컴파일합니다.
  • 앱은 기본 시작 프로필(나열된 첫 번째 프로필)에 대해 launchSettings.json 지정된 설정을 포함하여 구성 설정을 읽습니다.

호스트 설정:

  • WebApplication.CreateBuilder의 메서드는 웹 호스트를 설정합니다. 기본적으로 이 메서드는 Kestrel을 웹 서버로 구성합니다. Kestrel은 고성능을 위해 설계된 ASP.NET Core용 플랫폼 간 웹 서버입니다.
  • Kestrel은 HTTPS가 지정된 경우를 포함하여 구성된 URL에서 수신 HTTP 요청을 수신 대기하기 시작합니다.

요청 처리:

  • 요청이 수신되면 Kestrel은 이를 ASP.NET Core 미들웨어 파이프라인으로 전달합니다.
  • 미들웨어 파이프라인은 인증, 로깅, 라우팅 등의 작업을 처리할 수 있는 일련의 미들웨어 구성 요소를 통해 요청을 처리합니다.
  • 요청이 정의된 경로와 일치하면 해당 엔드포인트가 실행됩니다. 이 경우 app.MapGet("/", () => "Hello World!") 엔드포인트는 루트 URL에 대한 요청을 처리하고 문자열 Hello World!를 반환합니다.

응답:

  • 이 경우 응답은 문자열 "Hello World!"이고, 미들웨어 파이프라인을 통해 Kestrel로 다시 전송되고, Kestrel은 이를 다시 클라이언트로 전송합니다.