연습 - 시작하기

  • 3분

Azure Static Web Apps는 GitHub 리포지토리에서 앱을 빌드하여 프로덕션 환경에 웹 사이트를 게시합니다. 이 연습에서는 GitHub 리포지토리에서 Blazor를 사용하여 웹 애플리케이션을 빌드합니다.

리포지토리 만들기

이 모듈을 통해 GitHub 템플릿 리포지토리를 사용하여 새 리포지토리를 쉽게 만들 수 있습니다. Blazor를 사용하여 빌드된 시작 앱이 포함된 템플릿을 사용할 수 있습니다.

  1. 템플릿 리포지토리의 템플릿에서 만들기 페이지로 이동합니다.

    • 404 페이지를 찾을 수 없음 오류가 표시되면 GitHub에 로그인하고 다시 시도합니다.

  2. 소유자를 묻는 메시지가 표시되면 GitHub 계정 중 하나를 선택합니다.

  3. 리포지토리 이름을 my-static-blazor-app으로 지정합니다.

  4. Azure Static Web Apps는 퍼블릭 및 프라이빗 리포지토리를 모두 지원합니다. 이 연습에서는 표시 유형으로 프라이빗을 선택합니다.

  5. 리포지토리 만들기를 선택합니다.

앱을 실행합니다.

GitHub 계정에 my-static-blazor-app이라는 GitHub 리포지토리를 만들었습니다. 다음으로 리포지토리를 복제하고 컴퓨터에서 로컬로 코드를 실행합니다.

  1. GitHub 리포지토리에서 코드를 선택하고 메뉴에서 Visual Studio 열기를 선택합니다. 이 명령은 Visual Studio를 시작하고 리포지토리를 컴퓨터에 복제하라는 메시지를 표시합니다.

    • 여러 버전의 Visual Studio가 설치된 경우 Visual Studio 2022 이상에서 앱이 열려 있는지 확인합니다.

  2. 솔루션 파일 ShoppingList.sln을 엽니다.

    쇼핑 목록 솔루션을 열 위치를 보여 주는 스크린샷.

  3. 마지막으로 클라이언트를 시작 프로젝트로 선택하고 디버거를 시작하여 프런트 엔드 클라이언트 애플리케이션을 실행합니다.

    선택한 클라이언트 프로젝트를 보여 주는 스크린샷.

앱으로 이동

로컬로 실행되는 애플리케이션을 확인해 보겠습니다. Visual Studio는 기본 브라우저에서 웹 사이트를 엽니다.

웹앱의 UI를 보여 주는 스크린샷.

데이터 또는 API가 아직 없기 때문에 앱에는 데이터를 로드하는 중...이 표시됩니다. 이 모듈의 뒷부분에서 웹앱용 API를 추가합니다.

이제 Visual Studio에서 디버깅 세션을 종료하여 실행 중인 앱을 중지합니다.

다음 단계

애플리케이션을 빌드했고, 이제 해당 애플리케이션이 브라우저에서 로컬로 실행되고 있습니다.

다음으로 Azure Static Web Apps에 애플리케이션을 게시합니다.