데이터 API에서 Azure Static Web Apps 사용

7분

정적 웹앱은 인기 있는 웹 사이트 디자인의 개념입니다. 이는 서버에서 코드를 실행할 필요 없이 사용자의 브라우저로 직접 전송되는 콘텐츠로 구성됩니다. 정적 웹앱은 HTML과 CSS로 구성됩니다. 또한 클라이언트 쪽이 아닌 서버에서 실행되는 JavaScript 코드가 포함되는 경우가 많습니다. 웹 개발자는 정적 웹앱이 다음과 같다는 것을 알게 됩니다.

부트스트랩, Jekyll, AngularJS와 같은 프레임워크를 사용하면 신속하게 개발할 수 있습니다.
서버의 상태가 변경되지 않으므로 크기 조정이 쉽습니다.
사용자 인터페이스 코드와 백 엔드 기능을 분리하도록 권장합니다.

Azure Static Web Apps는 Azure에서 프로덕션을 위해 정적 웹앱을 코딩하고 배포하는 것을 더 쉽게 만들기 위해 설계된 Azure 서비스입니다. Azure Static Web Apps는 GitHub 또는 Azure DevOps의 코드 리포지토리를 모니터링하여 지속적인 배포를 지원합니다. 웹 사이트 코드를 변경하고 해당 변경 내용을 리포지토리에 푸시하면 Azure Static Web Apps가 해당 변경 내용을 감지하고 자동으로 새 사이트를 빌드하여 Azure에 배포합니다. 변경 내용은 즉시 사용자에게 제공됩니다.

참고 항목

이전에 Azure Static Web Apps DAB(Data API Builder)를 직접 호스트하도록 허용한 데이터베이스 연결 기능은 2025년 11월 30일에 사용 중지되었습니다. 현재 패턴은 DAB를 Azure Container Apps 또는 Azure App Service 독립 실행형 서비스로 호스트하고(다음 단원 참조), 정적 웹앱 프런트 엔드가 HTTPS를 통해 해당 엔드포인트를 호출하도록 하는 것입니다. 자세한 내용은 데이터베이스 연결 사용 중지를 참조하세요.

정적 웹앱 만들기

먼저 Azure Portal로 이동하여 리소스 만들기를 선택합니다. 검색 창에 정적 웹앱을 입력합니다. 정적 웹앱 카드가 나타나면 해당 카드를 선택한 다음 만들기를 선택합니다.

다음으로, 구독을 선택하고 기존 리소스 그룹을 선택하거나 새 리소스 그룹을 만듭니다. 이름 텍스트 상자에 앱을 설명하는 이름을 입력합니다. 플랜 유형을 선택해야 합니다. 개인 프로젝트의 경우 무료 계획을 사용할 수 있으며, 프로덕션 앱의 경우 표준 계획을 권장합니다.

배포 세부 정보에서 앱이 포함된 리포지토리 형식을 지정합니다. GitHub에 로그인하거나 Azure DevOps에서 리포지토리와 분기를 선택해야 합니다. 마지막으로 검토 + 만들기를 선택하여 설정을 검토한 다음, 만들기를 선택하여 프로세스를 완료합니다.

데이터 API를 별도로 배포

DAB는 더 이상 Azure Static Web Apps 내에서 호스트되지 않으므로 자체 서비스로 배포합니다. 지원되는 두 가지 옵션은 다음과 같습니다.

Azure Container Apps - 대부분의 워크로드에 권장됩니다. 공식 mcr.microsoft.com/azure-databases/data-api-builder 컨테이너 이미지를 사용하고 관리 ID, Key Vault 및 수정 버전과 통합됩니다.
Azure App Service - App Service에서 다른 웹 워크로드를 이미 실행하고 표준화하려는 경우에 유용합니다.

다음 단원에서는 Azure Container Apps 배포를 단계별로 안내합니다. 배포가 완료되면 DAB 엔드포인트의 공용 FQDN을 기록해 둡니다. 예를 들면 다음과 같습니다 https://<container-app-name>.<region>.azurecontainerapps.io. 정적 웹앱에서 이 URL을 참조합니다.

DAB 엔드포인트를 호출하도록 프런트 엔드 구성

DAB 서비스가 배포되면 정적 웹앱에서 실행되는 JavaScript에서 해당 REST 또는 GraphQL 엔드포인트를 호출할 수 있습니다.

DAB에서 CORS를 사용하도록 설정합니다. DAB 구성 파일에서 정적 웹앱 원본을 runtime.host.cors.origins 추가하여 브라우저에서 프런트 엔드가 API를 호출할 수 있도록 합니다.
```
"runtime": {
  "host": {
    "cors": {
      "origins": [ "https://<your-static-web-app>.azurestaticapps.net" ],
      "allow-credentials": false
    }
  }
}
```
프런트 엔드 코드에서 DAB 엔드포인트를 참조합니다. 기본 URL을 구성 파일 또는 빌드 시간 변수에 저장한 다음 REST 또는 GraphQL 엔드포인트를 호출합니다 fetch. 예를 들어 엔터티를 읽으려면 다음을 수행 Address 합니다.
```
const DAB_ENDPOINT = "https://<container-app-name>.<region>.azurecontainerapps.io";
const response = await fetch(`${DAB_ENDPOINT}/api/Address`);
const data = await response.json();
```

참고 항목

공용 인터넷에서 익명 호출자에게 DAB 엔드포인트를 노출하지 않도록 하려면 정적 웹앱의 아웃바운드 IP로 인바운드 트래픽을 제한하거나 Microsoft Entra ID 인증으로 엔드포인트를 보호하고 DAB에서 호출자의 토큰의 유효성을 검사합니다.

API에 대한 액세스 유효성 검사

두 서비스가 함께 작동하는지 확인하려면 Azure 포털Essentials 섹션에서 정적 웹앱 URL을 찾습니다. 페이지가 로드되고 브라우저 네트워크 로그에 DAB 엔드포인트에 대한 성공적인 요청(엔터티 JSON이 포함된 HTTP 200 응답)이 표시되는지 확인합니다.

브라우저에서 열 https://<container-app-name>.<region>.azurecontainerapps.io/api/Address 거나 curl 테이블에서 행을 나열하는 JSON 응답을 수신하여 DAB 엔드포인트를 직접 테스트할 수도 있습니다 Address .

피드백

이 페이지가 도움이 되었나요?