연습 - Azure 정적 웹앱 만들기

  • 5분

이 연습에서는 애플리케이션을 자동으로 빌드 및 게시하는 GitHub 작업을 포함한 Azure Static Web Apps 인스턴스를 만듭니다.

정적 웹앱 만들기

이제 GitHub 리포지토리를 만들었으므로 Azure Portal에서 Static Web Apps 인스턴스를 만들 수 있습니다.

이 모듈에서는 Azure 샌드박스를 사용하여 연습을 완료하는 데 사용할 수 있는 체험용 임시 Azure 구독을 제공합니다. 계속하기 전에 이 페이지 상단에 있는 샌드박스를 활성화했는지 확인합니다.

  1. Azure Portal에 로그인하여 샌드박스를 활성화하는 데 사용한 것과 동일한 계정을 사용하는지 확인합니다.

  2. Azure 홈페이지의 Azure 서비스에서 리소스 만들기를 선택합니다. 리소스 만들기 창이 나타납니다.

  3. 마켓플레이스 검색 상자에서 정적 웹앱을 검색하여 선택합니다. 정적 웹앱 창이 표시됩니다.

  4. 만들기를 선택합니다. 정적 웹앱 만들기 창이 나타납니다. 새 앱을 구성하고 GitHub 리포지토리에 연결합니다.

  5. 기본 탭에서 각 설정에 다음 값을 입력합니다.

    설정 값
    프로젝트 세부 정보
    구독 컨시어지 구독
    리소스 그룹 [샌드박스 리소스 그룹 이름]
    정적 웹앱 세부 정보
    이름 앱 이름을 지정합니다. 유효한 문자는 a-z(대/소문자 구분 안 함), 0-9 및 -입니다.
    호스팅 계획
    애플리케이션에 대한 가격 책정 계층 무료를 선택합니다.
    Azure Functions 및 준비 정보
    Azure Functions API 및 스테이징 환경을 위한 영역 가장 가까운 지역을 선택합니다.
    배포 세부 정보
    원본 GitHub를 선택합니다.
    GitHub 계정 GitHub를 사용하여 로그인을 선택합니다. Azure Static Web Apps 인증 창이 표시됩니다. Azure-App-Service-Static-Web-Apps 인증을 선택합니다. 암호를 입력합니다.
    조직 리포지토리를 만든 조직을 선택합니다.
    리포지토리 my-static-blazor-app
    Branch main
    빌드 정보
    빌드 기본 설정 Blazor
    앱 위치 클라이언트
    API 위치 API
    출력 위치 wwwroot

  6. 검토 + 만들기>만들기를 차례로 선택합니다.

  7. 배포가 완료되면 리소스로 이동을 선택합니다. 정적 웹앱 창이 표시됩니다.

GitHub 작업 검토

이 단계에서 Static Web Apps 인스턴스는 Azure에서 만들어지지만 앱은 아직 배포되지 않았습니다. Azure가 리포지토리에 만드는 GitHub 작업은 자동으로 실행되어 앱의 첫 번째 빌드 및 배포를 트리거하지만 완료하는 데 몇 분 정도 걸립니다.

다음 링크를 선택하여 GitHub 리포지토리의 작업 페이지로 이동한 후 빌드 및 배포 작업의 상태를 확인할 수 있습니다.

GitHub Actions 워크플로의 진행률 확인을 위해 찾아보는 방법을 보여주는 스크린샷

그런 후에 다음을 수행합니다.

  1. Azure Static Web Apps CI/CD를 선택합니다.

  2. ci: Azure Static Web Apps 워크플로 파일 추가라는 커밋을 선택합니다.

  3. 빌드 및 배포 작업 링크를 선택합니다.

여기에서 빌드할 때 앱의 진행률을 관찰할 수 있습니다.

웹 사이트 보기

GitHub 작업에서 웹앱 빌드 및 게시를 완료하면 실행 중인 앱을 찾아서 확인할 수 있습니다.

Azure Portal에서 URL 링크를 선택하여 브라우저에서 앱을 방문합니다.

이제 앱을 전 세계적으로 사용할 수 있지만 아직 데이터나 API가 없기 때문에 여전히 데이터 로드 중 메시지가 표시됩니다. 다음 섹션에서 웹앱의 API를 추가합니다.

축하합니다! Azure Static Web Apps에 첫 번째 앱을 배포했습니다!

참고 항목

앱이 아직 빌드 및 배포되지 않았다는 내용이 웹 페이지가 표시되는 경우 걱정하지 마세요. 잠시 후 브라우저를 새로 고쳐 보세요. GitHub 작업은 Azure Static Web Apps가 만들어질 때 자동으로 실행됩니다. 따라서 시작 페이지가 표시되면 앱이 아직 배포되고 있는 것입니다.

다음 단계

앱에 해당 쇼핑 목록의 API가 없습니다. 다음으로 정적 자산과 함께 Azure에 게시하는 앱에 Azure Functions API를 추가하는 방법을 살펴봅니다.