SignalR Service と GitHub 認証を使用した Web アプリを作成する

このサンプル スクリプトでは、リアルタイムのコンテンツ更新をクライアントにプッシュするために使用される、新しい Azure SignalR Service リソースを作成します。 また、SignalR サービスを使用した ASP.NET Core Web アプリをホストするための、新しい Web アプリと App Service プランも追加します。 この Web アプリは、新しい SignalR サービス リソースに接続し、GitHub 認証による認証を行うためのアプリ設定を使用して構成されます。 また、この Web アプリはローカル Git リポジトリのデプロイ ソースを使うように構成されます。

Azure サブスクリプションをお持ちでない場合は、開始する前に Azure 無料アカウントを作成してください。

Azure Cloud Shell

Azure では、ブラウザーを介して使用できる対話型のシェル環境、Azure Cloud Shell がホストされています。 Cloud Shell で Bash または PowerShell を使用して、Azure サービスを操作できます。 ローカル環境に何もインストールしなくても、Cloud Shell にプレインストールされているコマンドを使用して、この記事のコードを実行できます。

Azure Cloud Shell を開始するには、以下のようにします。

オプション	例とリンク
コードまたはコマンド ブロックの右上隅にある [使ってみる] を選択します。 [使ってみる] を選択しても、コードまたはコマンドは Cloud Shell に自動的にはコピーされません。
https://shell.azure.com に移動するか、[Cloud Shell を起動する] ボタンを選択して、ブラウザーで 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 を使って実行することができます。 一般的な 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 サービスを作成する

# 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"

Web アプリの 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	Web アプリをホストするための Azure App Service プランを作成します。
az webapp create	App Service ホスティング プランを使用して Azure Web アプリを作成します。
az webapp config appsettings set	Web アプリ用の新しいアプリ設定を追加します。 これらのアプリ設定は、SignalR の接続文字列と GitHub OAuth のアプリ シークレットを格納するために使われます。
az webapp deployment user set	デプロイ資格情報を更新します。
az webapp deployment source config-local-git	Web アプリのデプロイ用にクローンしてプッシュするための、git リポジトリ エンドポイントの URL を取得します。

次のステップ

Azure CLI の詳細については、Azure CLI のドキュメントのページをご覧ください。

Azure SignalR Service のその他の CLI サンプル スクリプトについては、Azure SignalR サービスのドキュメントをご覧ください。