소개
회사에서 쇼핑 목록 웹앱을 출시하고 있습니다. 고객은 사이트를 통해 목록에서 항목을 추가, 편집, 확인 및 제거할 수 있습니다.
앱을 빌드할 때 먼저 고려해야 하는 것은 앱 및 API가 안전하게 호스트되고, 전역으로 사용 가능하며, 자동으로 게시되는지 여부입니다. 이러한 문제를 처리하기 위해 웹 서버를 설정하고 구성하는 대신 많은 설정이나 구성 없이 쉽게 자산과 API를 제공하는 호스팅 솔루션을 사용하기로 결정했습니다.
Azure Static Web Apps란?
Azure Static Web Apps는 소스 코드에서 전역 가용성까지 모든 어려운 문제를 해결합니다.
사용자가 계속 앱 개발에 집중하는 동안 Azure Static Web Apps가 자동으로 GitHub 또는 Azure DevOps에서 앱을 빌드 및 호스트합니다.
정적 웹앱은 일반적으로 Blazor와 같은 WebAssembly 프레임워크와 JavaScript 프레임워크 및 라이브러리를 사용하여 빌드됩니다. 해당 앱에는 애플리케이션을 구성하는 HTML, CSS, JavaScript 및 이미지 자산이 포함됩니다. 기존 웹 서버 아키텍처에서 해당 파일은 필요한 모든 API 엔드포인트와 함께 단일 서버에서 제공됩니다.
Azure Static Web Apps를 사용하면 정적 자산은 기존 웹 서버에서 분리되며 전 세계에 전역으로 배포된 지점에서 제공됩니다. 이 배포에서는 파일이 물리적으로 최종 사용자에게 더 가까우므로 파일이 훨씬 더 빠르게 제공됩니다. API 엔드포인트는 서버리스 아키텍처를 사용하여 호스트되므로 전체 백 엔드 서버를 함께 사용할 필요가 없습니다.
Azure Static Web Apps의 모델은 필요한 것을 그 이상도 이하도 아니고 정확하게 얻는 것입니다.
Azure Static Web Apps 리소스를 만들 때 Azure는 앱의 소스 코드 리포지토리에서 GitHub Actions 또는 Azure DevOps 워크플로를 설정합니다. 워크플로는 사용자가 선택한 분기를 모니터링합니다. 커밋을 푸시하거나 감시되는 분기에 대한 끌어오기 요청을 만들 때마다 워크플로가 자동으로 앱 및 해당 API를 빌드하고 Azure에 배포합니다.
Azure는 웹앱을 호스트하고 제공하지만 Azure Functions는 백 엔드 API 기능을 작동하여 API에 대한 수요를 기반으로 자동 스케일 아웃 및 스케일 인을 제공합니다.
주요 특징
- 전역으로 배포된 웹 호스팅 - HTML, CSS, JavaScript, 이미지와 같은 정적 콘텐츠를 사용자에게 더 가깝게 배치합니다.
- Azure Functions에서 제공하는 통합 API.
- 각 리포지토리 변경과 함께 빌드 및 배포를 트리거하는 첫 번째 클래스 GitHub 및 Azure DevOps 통합.
- 자동으로 갱신되는 무료 SSL 인증서.
- 고유 미리 보기 URL - 끌어오기 요청을 미리 볼 수 있습니다.
학습 목표
이 모듈에서는 웹앱 및 API를 만들고, 수정하고, Azure Static Web Apps에 배포합니다.
이 모듈에서는 샘플 Blazor 애플리케이션과 C#으로 작성된 API를 제공합니다.
수행할 작업
클라이언트 애플리케이션을 선택한 후 다음을 수행합니다.
- Blazor 애플리케이션 빌드 및 실행합니다.
- Azure Functions를 사용하여 API를 만듭니다.
- API에 대한 HTTP 요청을 만들도록 웹앱을 수정합니다.
- GitHub Actions를 사용하여 자동으로 GitHub 리포지토리에서 웹앱을 빌드하고 Azure에 배포합니다.
- 마지막으로 애플리케이션을 탐색하고 시작합니다.
다음 단계
이제 먼저 Azure 리소스를 만들어야 한다고 생각할 수 있지만 Azure Static Web Apps에는 고려해야 할 일별 워크플로가 있습니다. Azure에서 리소스를 만들기 전에 먼저 GitHub에서 코드로 시작하는 것이 더 자연스러운 접근 방법입니다.