Azure Static Web Apps에 Blazor 앱 배포
Azure Static Web Apps 서버리스 백 엔드에서 지원하는 GitHub 리포지토리에서 앱을 빌드하여 프로덕션 환경에 웹 사이트를 게시합니다. 다음 자습서에서는 서버리스 API에서 반환되는 날씨 데이터를 표시하는 C# Blazor WebAssembly 애플리케이션을 배포하는 방법을 보여 줍니다.
필수 조건
1. 리포지토리 만들기
이 문서에서는 GitHub 템플릿 리포지토리를 사용하여 쉽게 시작할 수 있습니다. 이 템플릿에는 Azure Static Web Apps에 배포할 시작 앱이 있습니다.
- GitHub에 로그인했는지 확인하고 다음 위치로 이동하여 새 리포지토리를 만듭니다. https://github.com/staticwebdev/blazor-starter/generate
- 리포지토리 이름을 my-first-static-blazor-app으로 지정합니다.
2. 정적 웹앱 만들기
이제 리포지토리가 생성되었으므로 Azure Portal에서 정적 웹앱을 만듭니다.
Azure Portal로 이동합니다.
리소스 만들기를 선택합니다.
Static Web Apps를 검색합니다.
Static Web App을 선택합니다.
만들기를 실행합니다.
기본 탭에서 다음 값을 입력합니다.
속성 값 구독 Azure 구독 이름. 리소스 그룹 my-blazor-group 이름 my-first-static-blazor-app 플랜 유형 무료 Azure Functions API 및 스테이징 환경을 위한 영역 가장 가까운 지역을 선택합니다. Source GitHub GitHub로 로그인을 선택하고 메시지가 표시되면 GitHub로 인증합니다.
다음 GitHub 값을 입력합니다.
속성 값 조직 원하는 GitHub 조직을 선택합니다. 리포지토리 my-first-static-blazor-app을 선택합니다. Branch 기본을 선택합니다. 참고 항목
리포지토리가 표시되지 않는 경우 GitHub에서 Azure Static Web Apps에 권한을 부여해야 할 수 있습니다. 그런 다음 GitHub 리포지토리로 이동하여 설정 > 애플리케이션 > 권한 부여된 OAuth 앱으로 이동하고 Azure Static Web Apps를 선택한 다음, 권한 부여를 선택합니다. 조직 리포지토리의 경우 사용 권한을 부여하려면 조직의 소유자여야 합니다.
빌드 세부 정보 섹션의 빌드 사전 설정 드롭다운에서 Blazor를 선택합니다. 그러면 다음 값이 채워져 있습니다.
속성 값 설명 앱 위치 클라이언트 Blazor WebAssembly 앱이 포함된 폴더 API 위치 Api Azure Functions 앱이 포함된 폴더 출력 위치 wwwroot 게시된 Blazor WebAssembly 애플리케이션이 포함된 빌드 출력의 폴더 검토 + 만들기를 선택하여 세부 정보가 모두 올바른지 확인합니다.
만들기를 선택하여 정적 웹앱 만들기를 시작하고 배포를 위한 GitHub Actions를 프로비전합니다.
배포가 완료되면 리소스로 이동을 선택합니다.
리소스로 이동을 선택합니다.
3. 웹 사이트 보기
정적 앱을 배포하는 데는 두 가지 측면이 있습니다. 첫 번째는 앱을 구성하는 기본 Azure 리소스를 프로비저닝하는 것입니다. 두 번째는 애플리케이션을 빌드 및 게시하는 GitHub Actions 워크플로입니다.
새 정적 웹앱으로 이동하려면 먼저 배포 빌드가 실행을 완료해야 합니다.
Static Web Apps 개요 창에는 웹앱과 상호 작용하는 데 도움이 되는 일련의 링크가 표시됩니다.
GitHub Actions 실행 상태를 확인하려면 여기를 선택하세요.라는 배너를 클릭하면 리포지토리에 대해 실행 중인 GitHub Actions로 이동됩니다. 배포 작업이 완료되었는지 확인되면 생성된 URL을 통해 웹 사이트로 이동할 수 있습니다.
GitHub Actions 워크플로가 완료되면 URL 링크를 선택하여 새 탭에서 웹 사이트를 열 수 있습니다.
4. 애플리케이션 개요 이해
이러한 프로젝트는 모두 Azure Functions API 백엔드에서 지원하는 브라우저에서 실행되는 Blazor WebAssembly 애플리케이션을 만드는 데 필요한 파트를 구성합니다.
| Visual Studio 프로젝트 | 설명 |
|---|---|
| API | 날씨 정보를 Blazor WebAssembly 앱에 제공하는 API 엔드포인트를 구현하는 C# Azure Functions 애플리케이션입니다. WeatherForecastFunction은 WeatherForecast 개체의 배열을 반환합니다. |
| 클라이언트 | 프런트 엔드 Blazor WebAssembly 프로젝트입니다. 클라이언트 쪽 라우팅이 작동하는지 확인하기 위해 대체(fallback) 경로가 구현됩니다. |
| 공유됨 | API 엔드포인트에서 프런트 엔드 웹앱으로 데이터가 흐를 수 있도록 API 프로젝트와 클라이언트 프로젝트에서 모두 참조하는 공통 클래스를 보관합니다. WeatherForecast 클래스는 두 앱 간에 공유됩니다. |
Blazor 정적 웹앱
대체(fallback) 경로
이 앱은 앱의 특정 경로에 매핑되는 /counter 및 /fetchdata 같은 URL을 공개합니다. 이 앱은 단일 페이지로 구현되기 때문에 각 경로에 index.html 파일이 제공됩니다. 경로에 대한 요청에서 index.html을 반환하도록 하기 위해 대체 경로가 클라이언트 프로젝트의 루트 폴더에 있는 staticwebapp.config.json 파일에 구현됩니다.
{
"navigationFallback": {
"rewrite": "/index.html"
}
}
JSON 구성은 앱의 모든 경로 요청에서 index.html 페이지를 반환합니다.
리소스 정리
이 애플리케이션을 계속 사용하지 않을 경우 다음 단계를 통해 Azure Static Web App 인스턴스를 삭제할 수 있습니다.
- Azure Portal을 엽니다.
- 위쪽 검색 창에서 my-blazor-group을 검색합니다.
- 그룹 이름을 선택합니다.
- 삭제를 선택합니다.
- 예를 선택하여 삭제 작업을 확인합니다.