Azure 정적 웹앱 계획

3분

궁극적인 목표는 Azure에서 앱을 호스트하는 것입니다. Azure Static Web Apps는 필요한 모든 Azure 리소스를 프로비저닝하는 기능을 관리합니다.

그러나 앱을 호스트하려면 먼저 변경함에 따라 앱을 빌드하는 기능이 필요합니다. 해당 변경은 리포지토리에 대한 커밋 또는 끌어오기 요청을 통해 이루어집니다. Azure Static Web Apps의 주요 기능은 애플리케이션을 빌드 및 게시하도록 GitHub Actions 워크플로를 설정하는 것입니다.

Azure Static Web Apps 리소스를 만들 때 GitHub Actions 워크플로를 만듭니다. 워크플로는 즉시 트리거되고 앱 빌드 및 게시를 관리합니다. 또한 리포지토리에서 감시되는 분기를 변경할 때마다 워크플로가 트리거됩니다.

Azure Static Web Apps

웹앱 배포에는 두 가지 자동화된 측면이 있습니다. 첫 번째는 앱을 구성하는 기본 Azure 리소스를 프로비저닝하는 것입니다. 두 번째는 애플리케이션을 빌드 및 게시하는 GitHub Actions 워크플로입니다.

Azure Static Web Apps를 사용하여 웹에 앱을 게시하는 경우 웹앱 및 확장성 있는 API를 빠르게 호스트할 수 있습니다. 또한 GitHub Actions에서 제공하는 통합 빌드 및 배포 워크플로를 가져옵니다.

GitHub에 Static Web Apps 인스턴스 연결

Azure Static Web Apps는 소스 코드가 GitHub에 있는 애플리케이션을 호스트하도록 디자인되었습니다. Static Web Apps 인스턴스를 만들 경우 GitHub에 로그인하고 앱 코드가 포함된 리포지토리를 지정합니다.

또한 앱을 자동으로 빌드하고 배포할 수 있도록 리포지토리 내에 세 개의 폴더 경로를 지정해야 합니다.

위치	위치 예	설명	필수
앱 위치	클라이언트	웹앱의 소스 코드 위치	예
출력 위치	wwwroot	앱 빌드 아티팩트의 위치	아니요
API 위치	API	API의 소스 코드 위치	아니요

출력 위치는 애플리케이션의 게시 디렉터리에 대한 상대 경로입니다. 예를 들어 빌드된 자산을 bin/<build profile>/<framework>/publish/wwwroot 폴더에 출력하는 Client에 앱이 있다고 가정합니다. 이 경우 게시 시스템이 접두사의 나머지 부분을 처리하므로 이 위치에 대한 wwwroot을(를) 지정하기만 하면 됩니다.

GitHub Actions를 사용하여 소스 코드에서 정적 자산으로

GitHub 리포지토리는 정적 자산이 아닌 소스 코드를 포함하므로 앱을 게시하기 전에 빌드해야 합니다.

Static Web Apps 인스턴스를 만들면 Azure는 리포지토리에서 GitHub Actions 워크플로를 만듭니다. 릴리스한 분기에 대해 변경 내용을 푸시하거나 끌어오기 요청을 만들 때마다 워크플로에서 앱을 빌드합니다. 이 프로세스는 소스 코드를 Azure에서 제공하는 정적 자산으로 바꿉니다. 빌드가 완료되면 작업이 자산을 배포합니다.

GitHub 작업은 .github/workflows 폴더의 리포지토리에 추가됩니다. 필요에 따라 이 파일을 검토하거나 수정할 수 있습니다. 리소스를 만들 때 입력하는 설정은 GitHub 작업의 파일에 저장됩니다.

Azure Functions를 사용한 통합 API

앱에 API가 필요한 경우 리포지토리에서 API를 Azure Functions 프로젝트로 구현할 수 있으며, Static Web Apps 인스턴스에서 이 API를 자동으로 배포 및 호스트합니다. 앱을 빌드하고 배포하는 GitHub Actions 워크플로는 API 위치 경로에 지정한 폴더의 이름을 사용하여 리포지토리 내에서 API를 찾습니다.

API가 없으면 어떻게 됩니까? 걱정하지 마세요. Azure Static Web Apps가 지정한 폴더에서 API를 찾을 수 없는 경우 API를 게시하지는 않지만 앱은 게시합니다.

다음 단계