소개

4분

시나리오

회사에서 쇼핑 목록 웹앱을 출시하고 있습니다. 고객은 사이트를 통해 목록에서 식품 및 생활 용품과 같은 항목을 추가, 편집, 확인 및 제거할 수 있습니다.

사용자의 개인 정보를 보호하기 위해 사이트와 API는 안전해야 합니다. 사용자가 전 세계에 분산되어 있으며 모두에게 훌륭한 성능을 제공하고자 합니다. 기능 및 사용자 환경에 집중할 수 있도록 빌드 및 게시를 비롯한 인프라 작업을 최대한 많이 제거하는 솔루션을 선호합니다.

클라우드 저장소에 웹 자산을 배포하고 사용자 고유의 SSL 인증서를 만들고 할당하거나 클라우드 서버에서 API를 만들 수 있으며, 앱이 API를 호출할 수 있도록 하는 역방향 프록시를 설정하고 앱을 전역적으로 배포하며 사용자 고유의 CI/CD 프로세스를 설정할 수 있습니다.

Azure Static Web Apps를 사용하면 이 모든 것이 기본으로 제공됩니다.

Azure Static Web Apps란?

Azure Static Web Apps는 소스 코드에서 전역 가용성까지 모든 어려운 문제를 해결합니다.

사용자가 계속 앱 개발에 집중하는 동안 Azure Static Web Apps가 자동으로 GitHub 또는 Azure DevOps에서 앱을 빌드 및 호스트합니다.

정적 웹앱은 일반적으로 Angular, React, Svelte 또는 Vue 같은 라이브러리 및 프레임워크를 사용하여 빌드됩니다. 해당 앱에는 애플리케이션을 구성하는 HTML, CSS, JavaScript 및 이미지 자산이 포함됩니다. 기존 웹 서버 아키텍처를 사용하는 경우 이러한 파일은 필요한 모든 API 엔드포인트와 함께 단일 서버에서 제공됩니다.

Azure Static Web Apps를 사용하면 정적 자산은 기존 웹 서버에서 분리되며 전 세계에 전역으로 배포된 지점에서 제공됩니다. 이 배포에서는 파일이 물리적으로 사용자에게 더 가까우므로 파일이 훨씬 더 빠르게 제공됩니다. 선택 사항인 API 엔드포인트는 서버리스 아키텍처를 사용하여 호스트되므로 전체 백 엔드 서버를 함께 사용할 필요가 없습니다.

Azure Static Web Apps의 모델은 필요한 것을 그 이상도 이하도 아니고 정확하게 얻는 것입니다.

Static Apps 개요를 보여 주는 스크린샷.

Azure Static Web Apps 리소스를 만들 때 Azure는 앱의 소스 코드 리포지토리에서 GitHub Actions 또는 Azure DevOps 워크플로를 설정합니다. 워크플로는 사용자가 선택한 분기를 모니터링합니다. 커밋을 푸시하거나 감시되는 분기에 대한 끌어오기 요청을 만들 때마다 워크플로가 자동으로 앱 및 해당 API를 빌드하고 Azure에 배포합니다.

Azure는 웹앱을 호스트하고 제공합니다. Azure Functions는 백 엔드 API 기능을 작동하여 수요에 따라 자동 스케일 아웃 및 스케일 인을 제공합니다.

선택적 API

Azure Static Web Apps는 순수한 정적 콘텐츠를 제공하는 데 이상적이지만, 그 뒤에 API가 필요한 정적 웹앱에도 뛰어난 지원을 제공합니다. 따라서 API를 사용하거나 사용하지 않고 정적 웹앱을 호스트할 수 있습니다.

이 모듈의 연습에서는 선호하는 웹 프레임워크를 사용하여 앱을 배포합니다.

참고

이 모듈에서는 API를 사용하지 않고 앱을 배포합니다. 다음 모듈에 대한 자세한 내용은 최종 단원의 다음 단계 섹션을 참조하세요. 이 섹션에서는 앱과 함께 API를 배포합니다.

주요 특징

전역으로 배포된 웹 호스팅 - HTML, CSS, JavaScript 및 이미지 같은 정적 콘텐츠를 사용자에게 더 가깝게 배치합니다.
통합 API 지원 - Azure Functions에서 제공됩니다.
리포지토리 변경 시 빌드 및 배포가 트리거되는 최상급 GitHub 및 Azure DevOps 통합
무료 SSL 인증서 - 자동으로 갱신됩니다.
고유 미리 보기 URL - 끌어오기 요청을 미리 볼 수 있습니다.

학습 목표

이 모듈에서는 웹앱을 만들고, 수정하고, Azure Static Web Apps에 배포합니다.

고유한 경로 선택

이 모듈에서는 선택할 수 있는 샘플 애플리케이션의 네 가지 변형인 Angular, React, Svelte 및 Vue를 제공합니다. Azure Static Web Apps를 기반으로 해당 변형이 모두 “작동”할 수 있습니다.

시작 코드에는 여러분이 사용할 네 가지 앱이 포함되어 있습니다.

├ angular-app  👈 The Angular client app
├ react-app    👈 The React client app
├ svelte-app   👈 The Svelte client app
└ vue-app      👈 The Vue client app