Azure Static Web Apps를 사용하여 데이터 API 개발

  • 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(데이터 API 작성기)는 Azure Static Web Apps와 원활하게 작동하도록 설계되었으므로 이 서비스에서 데이터베이스 API를 호스팅하기 쉽습니다. 구성 파일을 사용하여 DAB에 Azure Static Web Apps 인스턴스에 대한 정보를 알리고 이를 리포지토리에 배포하기만 하면 됩니다. Azure Static Web Apps는 API를 호스팅하고 사용자는 해당 메서드를 호출할 수 있습니다.

정적 웹앱 만들기

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

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

Azure Portal에서 정적 웹앱을 만드는 마법사를 완료하는 방법을 보여 주는 스크린샷.

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

데이터 API 작성기 구성 파일 만들기

Azure Static Web Apps에 데이터베이스 API를 배포하려면 DAB 구성 파일을 올바르게 만들어야 합니다. 다음 두 가지 명령줄 도구를 사용하여 이 작업을 완료할 수 있습니다.

  • swa: 이 CLI를 사용하여 새 DAB 구성 파일을 초기화합니다.
  • dab: 이 CLI를 사용하여 하나 이상의 데이터베이스를 파일에 추가합니다.

시작하기 전에 GitHub 리포지토리를 로컬 컴퓨터에 복제하거나 GitHub Codespaces를 사용하여 GitHub에서 명령 프롬프트를 엽니다.

  1. 리포지토리의 루트 폴더에 있는 DAB 구성 파일을 초기화하려면 다음 명령을 실행합니다.

    swa db init --database-type "<database-type>"

    <database type>을 데이터베이스 서버로 바꿉니다. 예를 들어, 데이터베이스가 Azure SQL Database에 호스트된 경우 mssql을 사용합니다. MySQL에 있는 경우 mysql을 사용합니다.

  2. 구성 파일에 데이터베이스를 추가하려면 다음 명령을 실행합니다.

    dab add "<database-name>" --source "<schema>.<table>" --permissions "anonymous:*" -config "swa-db-connections/staticwebapp.database.config.json"

    <database-name>을 설명적 이름으로 바꾸고 <schema>.<table>을 데이터베이스의 스키마 및 테이블 이름으로 바꿉니다.

이 단계에서는 swa-db-connections/staticwebapp.database.config.json이라는 이름의 리포지토리에 구성 파일을 만듭니다. 리포지토리에 변경 내용을 커밋하기 전에 이 파일을 검토합니다.

데이터베이스에 대한 연결 구성

정적 웹앱에서 데이터베이스에 대한 연결을 구성하려면 먼저 Azure Portal에서 정적 웹앱을 엽니다. 설정 섹션으로 이동하여 데이터베이스 연결을 선택합니다. 프로덕션에서 기존 데이터베이스를 연결하도록 선택합니다. 적절한 데이터베이스 형식, 리소스 그룹 및 데이터베이스 이름을 선택합니다. 마지막으로 원하는 인증 유형을 선택하고 데이터베이스를 연결합니다.

참고 항목

연결 문자열에 권한 부여 키가 포함되어 있지 않으므로 시스템이 할당한 관리 ID 또는 사용자가 할당한 관리 ID를 사용하여 인증하는 것이 좋습니다.

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

API에 대한 액세스의 유효성을 검사하려면 먼저 Azure Portal에서 만든 정적 웹앱을 엽니다. 필수 섹션으로 이동한 후 URL을 선택하여 웹 사이트를 탐색합니다. 브라우저의 주소 표시줄에 URL에 /data-api를 추가하고 Enter 키를 누릅니다.

DAB 컨테이너가 정상임을 나타내는 페이지가 표시됩니다. 데이터베이스에서 엔터티를 찾아보려면 URL에 /data-api/rest/를 추가합니다. 이는 HTTP GET 요청을 보내고 JSON 응답을 표시합니다.