방법: Azure Web PubSub를 사용하여 실시간 협업 화이트보드를 빌드하고 Azure App Service에 배포
새로운 애플리케이션 클래스는 최신 작업은 어떤 모습일지 다시 상상하고 있습니다. Microsoft Word가 편집자를 한데 모으는 동안 Figma는 똑같은 창의적인 노력에서 디자이너를 한데 모읍니다. 이 애플리케이션 클래스는 원격 협업자와 연결된 느낌을 주는 사용자 환경을 기준으로 합니다. 기술적인 관점에서 사용자의 활동은 짧은 대기 시간으로 사용자의 화면에서 동기화되어야 합니다.
Important
원시 연결 문자열 데모용으로만 이 문서에 표시됩니다.
연결 문자열에는 애플리케이션이 Azure Web PubSub 서비스에 액세스하는 데 필요한 권한 부여 정보가 포함됩니다. 연결 문자열 내의 액세스 키는 서비스의 루트 암호와 비슷합니다. 프로덕션 환경에서는 항상 액세스 키를 보호합니다. Azure Key Vault를 사용하여 키를 안전하게 관리 및 회전하고 연결을 WebPubSubServiceClient보호합니다.
액세스 키를 다른 사용자에게 배포하거나 하드 코딩하거나 다른 사용자가 액세스할 수 있는 일반 텍스트로 저장하지 않도록 합니다. 키가 손상되었다고 생각되면 키를 교체하세요.
개요
이 방법 가이드에서는 클라우드 네이티브 접근 방식에 따라 Azure 서비스를 사용하여 실시간 협업 화이트보드를 빌드하고 Azure App Service에 웹앱으로 프로젝트를 배포합니다. 화이트보드 앱은 브라우저에서 액세스할 수 있으며 누구나 동일한 캔버스에 그릴 수 있습니다.
아키텍처
| Azure 서비스 이름 | 목적 | 이점 |
|---|---|---|
| Azure App Service | 백 엔드 애플리케이션에 Express를 사용하여 빌드된 호스팅 환경을 제공합니다. | 코드가 실행되는 인프라를 걱정할 필요가 없는 애플리케이션 백 엔드에 대한 완전 관리형 환경입니다. |
| Azure Web PubSub | 백 엔드 애플리케이션과 클라이언트 간에 대기 시간이 짧은 양방향 데이터 교환 채널을 제공 | 서버가 영구 WebSocket 연결을 관리할 필요가 없고 하나의 리소스로 100K 동시 클라이언트 연결로 확장하여 서버 부하를 크게 줄입니다. |
필수 조건
화이트보드 앱을 빌드 및 배포하는 데 먼저 집중하기 위해 이 방법 가이드의 끝부분에서 데이터 흐름에 대한 자세한 설명을 확인할 수 있습니다.
단계별 가이드를 따르려면 다음이 필요합니다.
- Azure 계정. Azure를 구독하고 있지 않다면 시작하기 전에 Azure 체험 계정을 만듭니다.
- Azure 리소스를 관리하기 위한 Azure CLI(버전 2.29.0 이상) 또는 Azure Cloud Shell.
Azure CLI를 사용하여 Azure 리소스 만들기
1. 로그인
다음 명령을 실행하여 Azure CLI에 로그인합니다.
az loginAzure에서 리소스 그룹을 만듭니다.
az group create \ --location "westus" \ --name "whiteboard-group"
2. 웹앱 리소스 만들기
무료 앱 서비스 플랜을 만듭니다.
az appservice plan create \ --resource-group "whiteboard-group" \ --name "demo" \ --sku FREE --is-linux웹앱 리소스 만들기
az webapp create \ --resource-group "whiteboard-group" \ --name "whiteboard-app" \ --plan "demo" \ --runtime "NODE:18-lts"
3. 웹 PubSub 리소스 만들기
Web PubSub 리소스를 만듭니다.
az webpubsub create \ --name "whiteboard-app" \ --resource-group "whiteboard-group" \ --location "westus" \ --sku Free_F1나중에 사용할 수 있도록
primaryConnectionString값을 표시하고 저장합니다.원시 연결 문자열 데모용으로만 이 문서에 표시됩니다. 프로덕션 환경에서는 항상 액세스 키를 보호합니다. Azure Key Vault를 사용하여 키를 안전하게 관리 및 회전하고 연결을
WebPubSubServiceClient보호합니다.az webpubsub key show \ --name "whiteboard-app" \ --resource-group "whiteboard-group"
애플리케이션 코드 가져오기
다음 명령을 실행하여 애플리케이션 코드의 복사본을 가져옵니다. 이 방법 가이드의 끝부분에서 데이터 흐름에 대한 자세한 설명을 찾을 수 있습니다.
git clone https://github.com/Azure/awps-webapp-sample.git
App Service에 애플리케이션 배포
App Service는 많은 배포 워크플로를 지원합니다. 이 가이드에서는 ZIP 패키지를 배포합니다. 다음 명령을 실행하여 ZIP을 준비합니다.
npm install npm run build zip -r app.zip *다음 명령을 사용하여 Azure App Service에 배포합니다.
az webapp deployment source config-zip \ --resource-group "whiteboard-group" \ --name "whiteboard-app" \ --src app.zip애플리케이션 설정에서 Azure Web PubSub 연결 문자열을 설정합니다. 이전 단계에서 저장한
primaryConnectionString값을 사용합니다.az webapp config appsettings set \ --resource-group "whiteboard-group" \ --name "whiteboard-app" \ --setting Web_PubSub_ConnectionString="<primaryConnectionString>"
Web PubSub에서 오는 이벤트를 처리하도록 업스트림 서버 구성
클라이언트가 Web PubSub 서비스에 메시지를 보낼 때마다 서비스는 사용자가 지정한 엔드포인트에 HTTP 요청을 보냅니다. 이 메커니즘은 백 엔드 서버가 메시지를 추가로 처리하는 데 사용하는 메커니즘입니다(예: 선택한 데이터베이스에 메시지를 유지할 수 있는 경우).
HTTP 요청과 마찬가지로 Web PubSub 서비스는 애플리케이션 서버를 찾을 위치를 알아야 합니다. 이제 백 엔드 애플리케이션이 App Service에 배포되므로 공개적으로 액세스할 수 있는 도메인 이름을 가져옵니다.
name값을 표시하고 어딘가에 저장합니다.az webapp config hostname list \ --resource-group "whiteboard-group" --webapp-name "whiteboard-app"백 엔드 서버에 노출하기로 결정한 엔드포인트는
/eventhandler이고 화이트보드 앱"sample_draw"의 이름은hub입니다.az webpubsub hub create \ --resource-group "whiteboard-group" \ --name "whiteboard-app" \ --hub-name "sample_draw" \ --event-handler url-template="https://<Replace with the hostname of your Web App resource>/eventhandler" user-event-pattern="*" system-event="connected" system-event="disconnected"
Important
url-template은 프로토콜 + 호스트 이름 + 경로의 세 부분으로 구성되어 있으며, 여기서는 https://<The hostname of your Web App resource>/eventhandler입니다.
브라우저에서 화이트보드 앱 보기
이제 브라우저로 이동하여 배포된 웹앱을 방문합니다. 앱의 실시간 협업 측면을 경험할 수 있도록 여러 브라우저 탭을 열어 두는 것이 좋습니다. 이왕이면 동료 또는 친구와 링크를 공유하는 것이 더 좋습니다.
데이터 흐름
개요
데이터 흐름 섹션에서는 화이트보드 앱을 빌드하는 방법을 자세히 설명합니다. 화이트보드 앱에는 두 가지 전송 방법이 있습니다.
- Express 앱으로 작성되고 App Service에서 호스트되는 HTTP 서비스
- Azure Web PubSub에서 관리하는 WebSocket 연결
Azure Web PubSub를 사용하여 WebSocket 연결을 관리하면 웹앱의 부하가 줄어듭니다. 클라이언트 인증 및 이미지 제공 외에 웹앱은 그리기 활동 동기화에 관련되지 않습니다. 클라이언트의 그리기 작업은 Web PubSub로 직접 전송되고 그룹의 모든 클라이언트에 브로드캐스트됩니다.
언제든지 둘 이상의 클라이언트 그리기가 있을 수 있습니다. 웹앱이 자체적으로 WebSocket 연결을 관리한다면 모든 그리기 작업을 다른 모든 클라이언트에 브로드캐스트해야 합니다. 엄청난 트래픽 및 처리는 서버에 큰 부담이 됩니다.
Vue를 사용하여 빌드된 클라이언트는 엔드포인트 /negotiate에 HTTP 요청을 보내 클라이언트 액세스 토큰을 요청합니다. 백 엔드 애플리케이션은 Express 앱이며 Azure App Service를 사용하여 웹앱으로 호스트됩니다.
백 엔드 애플리케이션이 연결 클라이언트에게 클라이언트 액세스 토큰을 성공적으로 반환하면 클라이언트는 이를 사용하여 Azure Web PubSub와 WebSocket 연결을 설정합니다.
Azure Web PubSub와의 핸드셰이크가 성공하면 클라이언트가 draw라는 그룹에 추가되어 이 그룹에 게시된 메시지를 효과적으로 구독합니다. 또한 클라이언트에는 draw 그룹에 메시지를 보낼 수 있는 권한이 부여됩니다.
참고 항목
이 방법 가이드에 집중하기 위해, 모든 연결 클라이언트는 draw라는 동일한 그룹에 추가되고 이 그룹에 메시지를 보낼 수 있는 권한이 부여됩니다. 세분화된 수준에서 클라이언트 연결을 관리하려면 Azure Web PubSub에서 제공하는 API의 전체 참조를 참조하세요.
Azure Web PubSub는 백 엔드 애플리케이션에 클라이언트가 연결되었음을 알 수 있습니다. 백 엔드 애플리케이션은 최신 연결된 클라이언트 수 페이로드로 sendToAll()을 호출하여 onConnected 이벤트를 처리합니다.
참고 항목
draw 그룹에 다수의 온라인 사용자가 있는 경우 백 엔드 애플리케이션에서 단일 네트워크 호출을 사용하면 모든 온라인 사용자에게 새 사용자가 방금 참가했다는 알림이 표시됩니다. 이렇게 하면 백 엔드 애플리케이션의 복잡성과 부하가 크게 줄어듭니다.
클라이언트는 Web PubSub와 영구 연결을 설정하는 즉시 백 엔드 애플리케이션에 HTTP 요청을 보내 /diagram에서 최신 셰이프 및 백그라운드 데이터를 가져옵니다. App Service에서 호스트되는 HTTP 서비스를 Web PubSub와 결합할 수 있습니다. App Service는 HTTP 엔드포인트를 처리하고 Web PubSub는 WebSocket 연결 관리를 처리합니다.
이제 클라이언트와 백 엔드 애플리케이션에 데이터를 교환하는 두 가지 방법이 있습니다. 하나는 기존의 HTTP 요청-응답 주기이고 다른 하나는 Web PubSub를 통한 지속적인 양방향 채널입니다. 한 사용자로부터 시작되어 모든 사용자에게 브로드캐스트되어야 하는 그리기 작업은 Web PubSub를 통해 전달됩니다. 백 엔드 애플리케이션의 개입이 필요하지 않습니다.
리소스 정리
애플리케이션은 두 서비스의 무료 계층만 사용하지만 더 이상 필요하지 않은 경우 리소스를 삭제하는 것이 가장 좋습니다. 다음 명령을 사용하여 리소스 그룹과 함께 리소스를 삭제할 수 있습니다.
az group delete
--name "whiteboard-group"