Azure 정적 웹앱 계획

5분

궁극적인 목표는 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에 로그인하고 앱 코드가 포함된 리포지토리를 지정합니다.

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

위치	위치 예	설명	필수
앱 위치	/	웹앱의 소스 코드 위치	예
앱 빌드 출력 위치	dist	앱 위치에 상대적인 앱 빌드 출력의 위치	아니요
API 위치	api	API의 소스 코드 위치	아니요

앱 빌드 출력은 애플리케이션의 빌드 출력 디렉터리에 대한 상대 경로입니다. 예를 들어 빌드된 자산을 my-app/dist 폴더에 출력하는 my-app에 앱이 있다고 가정합니다. 이 경우 이 위치에 대해 dist를 지정합니다.

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

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

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

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

Azure Functions를 사용한 통합 API

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

일반적으로 API 앱은 api 또는 functions라는 폴더에 배치되지만 이름은 원하는 대로 지정할 수 있습니다.

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

대체 경로 처리

브라우저는 /products를 제공하도록 호스팅 서버에 요청을 보내기 때문에 페이지를 새로 고치면 404 오류가 표시됩니다. 서버에는 제공할 products 페이지가 없습니다. 다행히도 대체 경로를 만들면 이 문제가 쉽게 해결됩니다. 대체 경로는 서버에 대한 일치하지 않는 모든 페이지 요청을 일치시키는 경로입니다.

Azure Static Web Apps는 앱의 빌드 출력 폴더에 있는 선택적 staticwebapp.config.json 파일에 정의된 사용자 지정 라우팅 규칙을 지원합니다.

다음 예제와 같이 파일 필터를 통해 경로 와일드 카드를 사용하는 대체 경로를 구현하는 규칙을 사용하도록 앱을 구성할 수 있습니다.

{
  "navigationFallback": {
    "rewrite": "index.html",
    "exclude": ["/images/*.{png,jpg,gif,ico}", "/*.{css,scss,js}"]
  }
}

이 규칙은 exclude 식에 표시된 이미지 및 CSS 파일을 제외하고 리소스에 대한 요청을 찾을 수 없을 때 Azure Static Web Apps가 index.html을 제공하도록 지시합니다.

경로 파일 위치

Azure Static Web Apps는 기본적으로 staticwebapp.config.json 파일이 output_location에 있을 것으로 예상합니다. 빌드 프로세스가 staticwebapp.config.json 파일을 output_location에 복사하는 경우에는 다른 작업이 필요하지 않습니다. 대부분의 프로젝트에서 output_location은 app_location과 관계가 있습니다.

애플리케이션의 staticwebapp.config.json 파일은 angular-app/src/assets 폴더에 있습니다.

staticwebapp.config.json 파일은 react-app 폴더에 있습니다.

staticwebapp.config.json 파일은 svelte-app/public 폴더에 있습니다.

staticwebapp.config.json 파일은 vue-app/public 폴더에 있습니다.

다음 단계

그렇다면 Azure Static Web Apps에 웹앱을 게시할 수 있으려면 어떻게 해야 합니까? GitHub 리포지토리에 앱이 있으면 됩니다.