자습서: Azure Web PubSub 서비스 및 Azure Static Web Apps를 사용하여 서버리스 채팅 앱 만들기

아티클
12/12/2024

Azure Web PubSub를 사용하면 WebSocket을 사용하여 실시간 메시징 웹 애플리케이션을 쉽게 빌드할 수 있습니다. Azure Static Web Apps를 사용하면 코드 리포지토리에서 Azure에 전체 스택 웹앱을 자동으로 빌드하고 배포할 수 있습니다. 이 자습서에서는 Web PubSub 및 Static Web Apps를 함께 사용하여 실시간 채팅방 애플리케이션을 빌드하는 방법을 알아봅니다.

보다 구체적으로 다음 방법을 알아봅니다.

서버리스 채팅 앱 빌드
Web PubSub 함수 입력 및 출력 바인딩 작업
Static Web Apps 작업

Important

원시 연결 문자열 데모용으로만 이 문서에 표시됩니다.

연결 문자열에는 애플리케이션이 Azure Web PubSub 서비스에 액세스하는 데 필요한 권한 부여 정보가 포함됩니다. 연결 문자열 내의 액세스 키는 서비스의 루트 암호와 비슷합니다. 프로덕션 환경에서는 항상 액세스 키를 보호합니다. Azure Key Vault를 사용하여 키를 안전하게 관리 및 회전하고 연결을 WebPubSubServiceClient보호합니다.

액세스 키를 다른 사용자에게 배포하거나 하드 코딩하거나 다른 사용자가 액세스할 수 있는 일반 텍스트로 저장하지 않도록 합니다. 키가 손상되었다고 생각되면 키를 교체하세요.

개요

Azure Web PubSub가 Azure Static Web Apps 작동하는 방식을 보여 주는 다이어그램

GitHub 또는 Azure Repos는 Static Web Apps에 대한 소스 제어를 제공합니다. Azure는 선택한 리포지토리 분기를 모니터링하고 원본 리포지토리에 대한 코드가 변경될 때마다 웹앱의 새 빌드가 자동으로 실행되어 Azure에 배포됩니다. 지속적인 업데이트는 GitHub Actions 및 Azure Pipelines에서 제공합니다. Static Web Apps는 새 빌드를 검색하고 엔드포인트 사용자에게 제공합니다.

이 자습서와 함께 제공되는 샘플 대화방 애플리케이션에는 다음과 같은 워크플로가 있습니다.

사용자가 앱에 로그인하면 web PubSub 서비스 클라이언트 연결 URL을 생성하기 위해 Azure Functions login API가 트리거됩니다.
클라이언트가 Web PubSub에 대한 연결 요청을 초기화하면 서비스는 Functions connect API를 트리거하여 사용자를 인증하는 시스템 connect 이벤트를 보냅니다.
클라이언트가 Azure Web PubSub 서비스에 메시지를 보내면 서비스는 사용자 message 이벤트로 응답하고 Functions message API가 트리거되어 연결된 모든 클라이언트에 메시지를 브로드캐스트합니다.
Functions validate API는 Azure Web PubSub의 이벤트가 사전 정의된 매개변수 {event}, 즉 https://$STATIC_WEB_APP/api/{event}로 구성된 경우 CloudEvents Abuse Protection에 대해 주기적으로 트리거됩니다.

참고 항목

Functions API connect 및 message는 Azure Web PubSub 서비스가 이러한 두 이벤트로 구성될 때 트리거됩니다.

필수 조건

GitHub 계정
Azure 계정. Azure를 구독하고 있지 않다면 시작하기 전에 Azure 체험 계정을 만듭니다.
Azure 리소스를 관리하기 위한 Azure CLI(버전 2.29.0 이상) 또는 Azure Cloud Shell.

웹 PubSub 리소스 만들기

다음 명령을 사용하여 Azure CLI에 로그인합니다.
```
az login
```

리소스 그룹을 만듭니다.

az group create \
  --name my-awps-swa-group \
  --location "eastus2"

Web PubSub 리소스를 만듭니다.

az webpubsub create \
  --name my-awps-swa \
  --resource-group my-awps-swa-group \
  --location "eastus2" \
  --sku Free_F1

나중에 사용할 수 있도록 액세스 키를 가져옵니다.

원시 연결 문자열 데모용으로만 이 문서에 표시됩니다. 프로덕션 환경에서는 항상 액세스 키를 보호합니다. Azure Key Vault를 사용하여 키를 안전하게 관리 및 회전하고 연결을 WebPubSubServiceClient보호합니다.
```
az webpubsub key show \
  --name my-awps-swa \
  --resource-group my-awps-swa-group
```
```
AWPS_ACCESS_KEY=<YOUR_AWPS_ACCESS_KEY>
```
자리 표시자 <YOUR_AWPS_ACCESS_KEY>를 이전 단계의 primaryConnectionString 값으로 바꿉니다.

리포지토리 만들기

이 문서에서는 GitHub 템플릿 리포지토리를 사용하여 쉽게 시작할 수 있습니다. 템플릿에는 Azure Static Web Apps에 배포하는 시작 앱이 있습니다.

https://github.com/Azure/awps-swa-sample/generate로 이동하여 이 자습서에 대한 새 리포지토리를 만듭니다.
자신을 소유자로 선택하고 리포지토리 이름을 my-awps-swa-app로 지정합니다.
원하는 대로 퍼블릭 또는 프라이빗 리포지토리를 만들 수 있습니다. 둘 다 자습서를 위해 작동합니다.
템플릿에서 리포지토리 만들기를 선택합니다.

정적 웹앱 만들기

이제 리포지토리가 생성되었으므로 Azure CLI에서 정적 웹앱을 만들 수 있습니다.

GitHub 사용자 이름을 저장할 변수를 만듭니다.
```
GITHUB_USER_NAME=<YOUR_GITHUB_USER_NAME>
```
자리 표시자 <YOUR_GITHUB_USER_NAME>을 GitHub 사용자 이름으로 바꿉니다.
리포지토리에서 새 정적 웹앱을 만듭니다. 이 명령을 실행하면 CLI을 통해 GitHub 대화형 로그인이 시작됩니다. 메시지에 따라 권한 부여를 완료합니다.
```
az staticwebapp create \
    --name my-awps-swa-app \
    --resource-group my-awps-swa-group \
    --source https://github.com/$GITHUB_USER_NAME/my-awps-swa-app \
    --location "eastus2" \
    --branch main \
    --app-location "src" \
    --api-location "api" \
    --login-with-github
```
Important

--source 매개 변수에 전달된 URL에는 .git 접미사가 포함되어서는 안 됩니다.
[https://editor.swagger.io](https://github.com/login/device) 로 이동합니다.
콘솔의 메시지에 표시된 대로 사용자 코드를 입력합니다.
계속을 선택합니다.
AzureAppServiceCLI 권한 부여를 선택합니다.

정적 웹앱 설정을 구성합니다.

az staticwebapp appsettings set \
  -n my-awps-swa-app \
  --setting-names WebPubSubConnectionString=$AWPS_ACCESS_KEY WebPubSubHub=sample_swa

웹 사이트 보기

정적 앱을 배포하는 두 가지 양상: 첫 번째로 앱을 구성하는 기본 Azure 리소스를 만듭니다. 두 번째는 애플리케이션을 빌드하고 게시하는 GitHub Actions 워크플로입니다.

새 정적 사이트로 이동하려면 먼저 배포 빌드가 실행을 완료해야 합니다.

콘솔 창으로 돌아가서 다음 명령을 실행하여 앱과 연결된 URL을 나열합니다.
```
az staticwebapp show \
  --name  my-awps-swa-app \
  --query "repositoryUrl"
```
이 명령의 출력은 GitHub 리포지토리에 대한 URL을 반환합니다.
리포지토리 URL을 복사하여 브라우저에 붙여넣습니다.
작업 탭을 선택합니다.

이 시점에서 Azure는 정적 웹앱을 지원하기 위한 리소스를 만듭니다. 실행 중인 워크플로 옆의 아이콘이 녹색 배경✅의 확인 표시로 바뀔 때까지 기다립니다. 이 작업이 완료될 때까지 몇 분 정도 걸릴 수 있습니다.

성공 아이콘이 표시되면 워크플로가 완료되고 콘솔 창으로 돌아갈 수 있습니다.
다음 명령을 실행하여 웹 사이트의 URL을 쿼리합니다.
```
az staticwebapp show \
  --name my-awps-swa-app \
  --query "defaultHostname"
```
Web PubSub 이벤트 처리기에서 설정할 URL을 유지합니다.
```
STATIC_WEB_APP=<YOUR_STATIC_WEB_APP>
```

Web PubSub 이벤트 처리기 구성

완료에 매우 가까이 왔습니다. 마지막 단계는 클라이언트 요청이 함수 API로 전송되도록 Web PubSub를 구성하는 것입니다.

다음 명령을 실행하여 Web PubSub 서비스 이벤트를 구성합니다. 리포지토리의 api 폴더 아래에 있는 함수를 Web PubSub 이벤트 처리기에 매핑합니다.

az webpubsub hub create \
  -n "my-awps-swa" \
  -g "my-awps-swa-group" \
  --hub-name "sample_swa" \
  --event-handler url-template=https://$STATIC_WEB_APP/api/{event} user-event-pattern="*" system-event="connect"

이제 웹 사이트 <YOUR_STATIC_WEB_APP>를 사용할 준비가 되었습니다. 브라우저에 복사하고 계속을 선택하여 친구들과 채팅을 시작합니다.

리소스 정리

이 애플리케이션을 계속 사용하지 않으려면 다음 명령을 실행하여 리소스 그룹과 정적 웹앱을 삭제할 수 있습니다.

az group delete --name my-awps-swa-group

다음 단계

이 빠른 시작에서는 서버리스 채팅 애플리케이션을 개발하고 배포하는 방법을 알아보았습니다. 이제 고유한 애플리케이션 빌드를 시작할 수 있습니다.

플레이 가능한 데모 즐기기

Azure Functions에 대한 Azure Web PubSub 바인딩

다음을 통해 공유