방법: Web PubSub for Socket.IO를 사용하여 실시간 협업 화이트보드를 빌드하고 Azure App Service에 배포

  • 아티클

새로운 애플리케이션 클래스는 최신 작업은 어떤 모습일지 다시 상상하고 있습니다. Microsoft Word가 편집자를 한데 모으는 동안 Figma는 똑같은 창의적인 노력에서 디자이너를 한데 모읍니다. 이 애플리케이션 클래스는 원격 협업자와 연결된 느낌을 주는 사용자 환경을 기준으로 합니다. 기술적인 관점에서 사용자의 활동은 짧은 대기 시간으로 사용자의 화면에서 동기화되어야 합니다.

개요

이 방법 가이드에서는 클라우드 네이티브 접근 방식에 따라 Azure 서비스를 사용하여 실시간 협업 화이트보드를 빌드하고 Azure App Service에 웹앱으로 프로젝트를 배포합니다. 화이트보드 앱은 브라우저에서 액세스할 수 있으며 누구나 동일한 캔버스에 그릴 수 있습니다.

Animation of the overview of the finished project.

필수 조건

단계별 가이드를 따르려면 다음이 필요합니다.

Azure CLI를 사용하여 Azure 리소스 만들기

로그인

  1. 다음 명령을 실행하여 Azure CLI에 로그인합니다.

    az login

  2. Azure에서 리소스 그룹을 만듭니다.

    az group create \
  --location "westus" \  
  --name "<resource-group-name>"

웹앱 리소스 만들기

  1. 무료 앱 서비스 플랜을 만듭니다.

    az appservice plan create \ 
  --resource-group "<resource-group-name>" \ 
  --name "<app-service-plan-name>" \ 
  --sku FREE
  --is-linux

  2. 웹앱 리소스 만들기

    az webapp create \
  --resource-group "<resource-group-name>" \
  --name "<webapp-name>" \ 
  --plan "<app-service-plan-name>" \
  --runtime "NODE:16-lts"

Web PubSub for Socket.IO 만들기

  1. Web PubSub 리소스를 만듭니다.

    az webpubsub create \
  --name "<socketio-name>" \
  --resource-group "<resource-group-name>" \
  --kind SocketIO
  --sku Premium_P1

  2. 나중에 사용할 수 있도록 primaryConnectionString 값을 표시하고 저장합니다.

    az webpubsub key show \
  --name "<socketio-name>" \
  --resource-group "<resource-group-name>"

애플리케이션 코드 가져오기

다음 명령을 실행하여 애플리케이션 코드의 복사본을 가져옵니다.

git clone https://github.com/Azure-Samples/socket.io-webapp-integration

App Service에 애플리케이션 배포

  1. App Service는 많은 배포 워크플로를 지원합니다. 이 가이드에서는 ZIP 패키지를 배포합니다. 다음 명령을 실행하여 프로젝트를 설치하고 빌드합니다.

    npm install
npm run build

# bash
zip -r app.zip *

# Poweshell

  2. zip으로 압축

    bash 사용

    zip -r app.zip *

    PowerShell 사용

    Compress-Archive -Path * -DestinationPath app.zip

  3. 애플리케이션 설정에서 Azure Web PubSub 연결 문자열을 설정합니다. 이전 단계에서 저장한 primaryConnectionString 값을 사용합니다.

    az webapp config appsettings set \
--resource-group "<resource-group-name>" \
--name "<webapp-name>" \
--setting Web_PubSub_ConnectionString="<primaryConnectionString>"

  4. 다음 명령을 사용하여 Azure App Service에 배포합니다.

    az webapp deployment source config-zip \
--resource-group "<resource-group-name>" \
--name "<webapp-name>" \
--src app.zip

브라우저에서 화이트보드 앱 보기

이제 브라우저로 이동하여 배포된 웹앱을 방문합니다. URL은 일반적으로 https://<webapp-name>.azurewebsites.net입니다. 앱의 실시간 협업 측면을 경험할 수 있도록 여러 브라우저 탭을 열어 두는 것이 좋습니다. 이왕이면 동료 또는 친구와 링크를 공유하는 것이 더 좋습니다.

다음 단계

더 많은 Socket.IO 샘플 확인