Azure Static Web Apps에서 호스트 데이터 API 작성기(미리 보기)

방법
09/24/2024

배포 가이드의 시퀀스에서 현재 위치('게시')의 다이어그램입니다.

구성 파일만 사용하여 Azure Static Web Apps에서 데이터 API 작성기를 신속하게 호스트합니다. 이 가이드에는 데이터 API 작성기를 정적 웹앱과 통합하는 단계가 포함되어 있습니다.

이 가이드에서는 DAB 구성 파일을 빌드하고, 애플리케이션의 일부로 파일을 호스트한 다음, Azure Static Web Apps에서 데이터베이스 연결을 사용하는 단계를 안내합니다.

필수 조건

중요하다

데이터베이스 연결을 사용하는 Azure Static Web Apps의 DAB(Data API Builder) 지원은 미리 보기로 제공됩니다. Azure Static Web Apps는 안정적인 최신 버전의 DAB와 다를 수 있는 고정 버전의 DAB 엔진을 사용합니다. 최신 DAB 기능에 액세스하려면 GitHub, Microsoft Container Registry(Docker Hub) 또는 NuGet에서 최신 버전의 엔진을 사용하여 DAB용 대체 호스트를 고려합니다.

활성 구독이 있는 Azure 계정입니다. 무료계정을 만듭니다.

Azure Static Web Apps CLI. SWA(Static Web Apps) CLI설치합니다.

데이터 API 작성기 CLI. DAB(Data API Builder) CLI설치합니다.

Azure에서 주소 지정 가능한 기존 지원 데이터베이스입니다.

Azure Static Web Apps에 배포할 수 있는 GitHub 리포지토리의 기존 웹 애플리케이션입니다. - 웹 애플리케이션이 없는 경우 기본 웹 애플리케이션사용하여 리포지토리를 생성할 있습니다.

정적 웹앱 만들기

시작하려면 Azure Portal을 사용하여 GitHub의 웹 애플리케이션을 사용하여 새 Azure Static Web App을 만듭니다.

Azure Portal(https://portal.azure.com)에 로그인합니다.
새 리소스 그룹을 만듭니다. 이 가이드의 모든 새 리소스에 대해 이 리소스 그룹을 사용합니다.

팁

msdocs-dab-swa리소스 그룹의 이름을 지정하는 것이 좋습니다. 이 가이드의 모든 스크린샷은 이 이름을 사용합니다.

Azure Static Web App을 만듭니다. 이러한 설정을 사용하여 정적 웹앱을 구성합니다.

설정	값
리소스 그룹	이전에 만든 리소스 그룹을 선택합니다.
이름	전역적으로 고유한 이름 입력
계획 유형	워크로드에 가장 적합한 옵션 선택
원본	GitHub 선택합니다.
GitHub 계정	웹 애플리케이션 리포지토리에 대한 액세스 권한이 있는 GitHub 계정 구성
조직	리포지토리에 대한 부모 조직 또는 사용자 선택
리포지토리	리포지토리 이름 선택
분기	기본 분기 선택

Azure Portal의 '정적 웹앱 만들기' 페이지의 '기본 사항' 탭 스크린샷

정적 웹 애플리케이션 배포가 완료되기를 기다립니다. GitHub Actions 워크플로는 주 분기로 푸시할 때마다 Azure Static Web Apps에 애플리케이션을 배포하는 리포지토리에 자동으로 추가됩니다.

메모

이 초기 배포에는 몇 분 정도 걸릴 수 있습니다. 항상 Azure Portal 또는 리포지토리의 GitHub Actions 탭에서 배포 상태를 확인할 수 있습니다.
Azure Portal에서 새 정적 웹앱으로 이동합니다.
Essentials 섹션에서 URL 하이퍼링크를 사용하여 실행 중인 웹 애플리케이션으로 이동합니다. 애플리케이션이 예상대로 실행되고 있는지 확인합니다.

DAB 구성 파일 추가

이제 DAB 및 SWA 명령줄 인터페이스를 사용하여 새 DAB 구성 파일을 만들고 웹 애플리케이션 리포지토리에 추가합니다.

선택한 IDE(통합 개발자 환경)에서 웹 애플리케이션에 대한 GitHub 리포지토리를 엽니다.

팁

원하는 IDE를 사용할 수 있습니다. 애플리케이션에서 로컬로 작업하려는 경우 리포지토리를 로컬 컴퓨터에 복제할 수 있습니다. 브라우저에서 작업하려는 경우 GitHub Codespaces사용할 수 있습니다. SWA 및 DAB CLIS가 개발 환경에 설치되어 있는지 확인합니다.
리포지토리의 루트에서 터미널을 엽니다.
SWA CLI의 swa db 명령을 사용하여 지정된 데이터베이스 형식을 사용하여 새 DAB 구성 파일을 초기화합니다. 이 명령은 swa-db-connections 폴더에 staticwebapp.database.config.json 새 파일을 만듭니다.
```
swa db init --database-type "<database-type>"
```
중요하다

일부 데이터베이스 유형은 초기화 시 추가 구성 설정이 필요합니다.
dab add 명령을 사용하여 구성에 하나 이상의 데이터베이스 엔터티를 추가합니다. 익명 사용자에 대한 모든 권한을 허용하도록 각 엔터티를 구성합니다. 엔터티에 대해 원하는 횟수만큼 dab add 반복합니다.
```
dab add "<entity-name>" --source "<schema>.<table>" --permissions "anonymous:*" --config "swa-db-connections/staticwebapp.database.config.json"
```
swa-db-connections/staticwebapp.database.config.json 파일의 내용을 열고 검토합니다.
리포지토리에 변경 내용을 커밋하고 기본 분기로 푸시합니다. 그러면 웹 애플리케이션의 새 배포가 자동으로 트리거됩니다. 이 가이드를 계속 진행하기 전에 이 최신 배포가 완료되기를 기다립니다.

데이터베이스 연결 구성

다음으로, 정적 웹앱이 데이터베이스에 액세스할 수 있도록 Azure Portal에서 데이터베이스 연결을 구성합니다.

Azure Portal에서 정적 웹앱으로 다시 이동합니다.
리소스 메뉴의 설정 섹션에서 데이터베이스 연결 옵션을 선택합니다. 그런 다음, 프로덕션 환경에 대한 기존 데이터베이스 연결을 선택합니다.

링크 데이터베이스 대화 상자에서 이러한 설정을 사용하여 데이터베이스 연결을 구성합니다.

설정	값
데이터베이스 유형	DAB 구성 파일을 만들 때 사용한 것과 동일한 데이터베이스 형식 선택
리소스 그룹	이 가이드의 앞부분에서 만든 리소스 그룹을 선택합니다.
리소스 이름	정적 웹앱에 연결하려는 데이터베이스 리소스 선택
데이터베이스 이름	데이터베이스의 이름을 입력합니다.
인증 유형	사용하려는 인증 유형 선택

Azure Portal의 Azure Static Web Apps 페이지에서 데이터베이스 연결에 대한 '데이터베이스 연결' 대화 상자의 스크린샷

팁

권한 부여 키를 포함하지 않는 연결 문자열을 사용하는 것이 좋습니다. 대신 관리 ID 및 역할 기반 액세스 제어를 사용하여 데이터베이스와 호스트 간의 액세스를 관리합니다. 자세한 내용은 관리 ID사용하는 Azure 서비스를 참조하세요.

데이터 API 엔드포인트 테스트

마지막으로 정적 웹앱에서 데이터 API 엔드포인트를 사용할 수 있는지 확인합니다.

Azure Portal에서 정적 웹앱으로 다시 이동합니다.
Essentials 섹션의 URL 필드를 사용하여 정적 웹앱의 웹 사이트를 다시 찾습니다.
현재 실행 중인 애플리케이션의 /data-api 경로로 이동합니다. 응답이 여전히 DAB 컨테이너가 정상것을 나타냅니다.
```
{ Healthy }
```
현재 실행 중인 애플리케이션의 https://<your-static-web-app-url>/data-api/<your-rest-path>/<your-entity-name> 경로로 이동합니다. 이렇게 하면 해당 엔터티 집합에 대한 HTTP GET 요청이 발생합니다. JSON 응답을 관찰합니다.

리소스 정리

샘플 애플리케이션 또는 리소스가 더 이상 필요하지 않은 경우 해당 배포 및 모든 리소스를 제거합니다.

Azure Portal을 사용하여 리소스 그룹 이동합니다.
명령 모음삭제를 선택합니다.

다음을 통해 공유