다음을 통해 공유


SignalR Service 및 GitHub 인증을 사용하는 웹앱 만들기

이 샘플 스크립트는 실시간 콘텐츠 업데이트를 클라이언트에 푸시하는 데 사용되는 새 Azure SignalR Service 리소스를 만듭니다. 또한 이 스크립트는 SignalR Service를 사용하는 ASP.NET Core Web App을 호스팅하기 위한 새 Web App 및 App Service 계획을 추가합니다. 이 웹앱은 새 SignalR Service 리소스에 연결하고 GitHub 인증으로 인증을 받기 위한 앱 설정으로 구성됩니다. 웹앱은 로컬 git 리포지토리 배포 원본도 사용하도록 구성됩니다.

Azure를 구독하고 있지 않다면 시작하기 전에 Azure 체험 계정을 만듭니다.

Azure Cloud Shell

Azure는 브라우저를 통해 사용할 수 있는 대화형 셸 환경인 Azure Cloud Shell을 호스트합니다. Cloud Shell에서 Bash 또는 PowerShell을 사용하여 Azure 서비스 작업을 수행할 수 있습니다. 로컬 환경에 아무 것도 설치할 필요 없이 Azure Cloud Shell의 미리 설치된 명령을 사용하여 이 문서의 코드를 실행할 수 있습니다.

Azure Cloud Shell을 시작하려면 다음을 수행합니다.

옵션 예제/링크
코드 또는 명령 블록의 오른쪽 상단에서 시도를 선택합니다. 시도를 선택해도 코드 또는 명령이 Cloud Shell에 자동으로 복사되지 않습니다. Azure Cloud Shell에 대한 사용 예제를 보여 주는 스크린샷
https://shell.azure.com으로 이동하거나 Cloud Shell 시작 단추를 선택하여 브라우저에서 Cloud Shell을 엽니다. Azure Cloud Shell을 시작하는 단추입니다.
Azure Portal의 오른쪽 위에 있는 메뉴 모음에서 Cloud Shell 단추를 선택합니다. Azure Portal의 Cloud Shell 단추를 보여 주는 스크린샷

Azure Cloud Shell을 사용하려면:

  1. Cloud Shell을 시작합니다.

  2. 코드 블록(또는 명령 블록)에서 복사 단추를 선택하여 코드 또는 명령을 복사합니다.

  3. Windows 및 Linux에서 Ctrl+Shift+V를 선택하거나 macOS에서 Cmd+Shift+V를 선택하여 코드 또는 명령을 Cloud Shell 세션에 붙여넣습니다.

  4. Enter를 선택하여 코드 또는 명령을 실행합니다.

샘플 스크립트

Azure Cloud Shell 시작

Azure Cloud Shell은 이 문서의 단계를 실행하는 데 무료로 사용할 수 있는 대화형 셸입니다. 공용 Azure 도구가 사전 설치되어 계정에서 사용하도록 구성되어 있습니다.

Cloud Shell을 열려면 코드 블록의 오른쪽 위 모서리에 있는 사용해 보세요를 선택하기만 하면 됩니다. 또한 https://shell.azure.com 로 이동하여 별도의 브라우저 탭에서 Cloud Shell을 시작할 수 있습니다.

Cloud Shell이 열리면 환경에 대해 Bash가 선택되어 있는지 확인합니다. 후속 세션은 Bash 환경에서 Azure CLI를 사용합니다. 복사를 선택하여 코드 블록을 복사하고 Cloud Shell에 붙여넣고 Enter 키를 눌러 실행합니다.

Azure에 로그인

Cloud Shell은 로그인한 초기 계정에서 자동으로 인증됩니다. 다음 스크립트를 사용하여 다른 구독을 사용하여 로그인하고 subscriptionId를 Azure 구독 ID로 바꿉니다.

Azure를 구독하고 있지 않다면 시작하기 전에 Azure 체험 계정을 만듭니다.

subscription="subscriptionId" # Set Azure subscription ID here

az account set -s $subscription # ...or use 'az login'

자세한 내용은 활성 구독 설정 또는 대화형으로 로그인을 참조하세요.

App Service로 SignalR Service 만들기

# Create a SignalR Service with an App Service

# Variable block
let "randomIdentifier=$RANDOM*$RANDOM"
location="East US"
resourceGroup="msdocs-azure-signalr-rg-$randomIdentifier"
tag="create-signal-service-with-app-service"
signalRSvc="msdocs-signalr-svc-$randomIdentifier"
webApp="msdocs-web-app-signalr-$randomIdentifier"
appSvcPlan="msdocs-app-svc-plan-$randomIdentifier"
signalRSku="Standard_S1"
unitCount="1"
serviceMode="Default"
planSku="Free"

# Create a resource group
echo "Creating $resourceGroup in "$location"..."
az group create --name $resourceGroup --location "$location" --tag $tag

# Create the Azure SignalR Service resource
echo "Creating $signalRSvc"
az signalr create \
  --name $signalRSvc \
  --resource-group $resourceGroup \
  --sku $signalRSku \
  --unit-count $unitCount \
  --service-mode $serviceMode

# Create an App Service plan.
echo "Creating $appSvcPlan"
az appservice plan create --name $appSvcPlan --resource-group $resourceGroup --sku $planSku

# Create the Web App
echo "Creating $webApp"
az webapp create --name $webApp --resource-group $resourceGroup --plan $appSvcPlan

# Get the SignalR primary connection string
primaryConnectionString=$(az signalr key list --name $signalRSvc \
  --resource-group $resourceGroup --query primaryConnectionString -o tsv)
echo $primaryConnectionString

# Add an app setting to the web app for the SignalR connection
az webapp config appsettings set --name $webApp --resource-group $resourceGroup \
  --settings "AzureSignalRConnectionString=$primaryConnectionString"

웹앱에 GitHub 인증 및 Git 배포 사용

  1. GitHub OAuth 앱 등록에 따라 다음 스크립트의 값을 업데이트합니다.

    GitHubClientId=<Replace with your GitHub OAuth app Client ID>
    GitHubClientSecret=<Replace with your GitHub OAuth app Client Secret>
    
  2. GitHub 인증에 사용할 앱 설정을 추가합니다.

    az webapp config appsettings set --name $webApp --resource-group $resourceGroup --settings "GitHubClientSecret=$GitHubClientSecret" 
    
  3. Git 배포를 구성하고 배포 URL을 반환합니다.

    az webapp deployment source config-local-git --name $webAppName --resource-group $resourceGroupName --query [url] -o tsv
    

리소스 정리

다음 명령을 사용하여 이러한 리소스가 계속해서 필요한 경우가 아니면 az group delete 명령을 사용하여 리소스 그룹 및 연결된 모든 리소스를 제거합니다. 이러한 리소스 중 일부는 만들고 삭제하는 데 시간이 걸릴 수 있습니다.

az group delete --name $resourceGroup

샘플 참조

테이블에 있는 각 명령은 명령에 해당하는 문서에 연결됩니다. 이 스크립트는 다음 명령을 사용합니다.

명령 주의
az group create 모든 리소스가 저장되는 리소스 그룹을 만듭니다.
az signalr create Azure SignalR Service 리소스를 만듭니다.
az signalr key list SignalR을 통해 실시간 콘텐츠 업데이트를 푸시할 때 애플리케이션에서 사용할 키를 나열합니다.
az appservice plan create 웹앱을 호스팅하기 위한 Azure App Service 계획을 만듭니다.
az webapp create App Service 호스팅 계획을 사용하는 Azure 웹앱을 만듭니다.
az webapp config appsettings set 웹앱에 대한 새 앱 설정을 추가합니다. 이러한 앱 설정은 SignalR 연결 문자열 및 GitHub OAuth 앱 암호를 저장하는 데 사용됩니다.
az webapp deployment user set 배포 자격 증명을 업데이트합니다.
az webapp deployment source config-local-git 웹앱 배포를 위해 복제 및 푸시하기 위한 git 리포지토리 엔드포인트의 URL을 가져옵니다.

다음 단계

Azure CLI에 대한 자세한 내용은 Azure CLI 설명서를 참조하세요.

추가 Azure SignalR Service CLI 스크립트 샘플은 Azure SignalR Service 설명서에서 확인할 수 있습니다.