Teilen über

Erstellen einer Web-App mit dem SignalR-Dienst und GitHub-Authentifizierung

  • Artikel

In diesem Beispielskript wird eine neue Azure SignalR Service-Ressource erstellt, mit der Echtzeitinhaltsupdates mithilfe von Push an Clients übertragen werden. Dieses Skript fügt auch eine neue Web-App und einen neuen App Service-Plan zum Hosten Ihrer ASP.NET Core-Web-App hinzu, die den SignalR-Dienst verwendet. Die Web-App ist mit App-Einstellungen konfiguriert, um eine Verbindung mit der neuen SignalR-Dienstressource herzustellen und mit GitHub-Authentifizierung zu authentifizieren. Die Web-App ist auch für die Verwendung eines lokalen Git-Repositorys als Bereitstellungsquelle konfiguriert.

Sollten Sie über kein Azure-Abonnement verfügen, können Sie zunächst ein kostenloses Azure-Konto erstellen.

Azure Cloud Shell

Azure hostet Azure Cloud Shell, eine interaktive Shell-Umgebung, die Sie über Ihren Browser nutzen können. Sie können entweder Bash oder PowerShell mit Cloud Shell verwenden, um mit Azure-Diensten zu arbeiten. Sie können die vorinstallierten Befehle von Cloud Shell verwenden, um den Code in diesem Artikel auszuführen, ohne etwas in Ihrer lokalen Umgebung installieren zu müssen.

Starten von Azure Cloud Shell:

Option Beispiel/Link
Wählen Sie rechts oben in einem Code- oder Befehlsblock die Option Ausprobieren aus. Durch die Auswahl von Ausprobieren wird der Code oder Befehl nicht automatisch in Cloud Shell kopiert. Screenshot: Beispiel von „Jetzt testen“ für Azure Cloud Shell.
Rufen Sie https://shell.azure.com auf, oder klicken Sie auf die Schaltfläche Cloud Shell starten, um Cloud Shell im Browser zu öffnen. Schaltfläche zum Starten von Azure Cloud Shell.
Wählen Sie im Azure-Portal rechts oben im Menü die Schaltfläche Cloud Shell aus. Screenshot: Schaltfläche „Cloud Shell“ im Azure-Portal

So verwenden Sie Azure Cloud Shell:

  1. Starten Sie Cloud Shell.

  2. Wählen Sie die Schaltfläche Kopieren für einen Codeblock (oder Befehlsblock) aus, um den Code oder Befehl zu kopieren.

  3. Fügen Sie den Code oder Befehl mit STRG+UMSCHALT+V unter Windows und Linux oder CMD+UMSCHALT+V unter macOS in die Cloud Shell-Sitzung ein.

  4. Drücken Sie die EINGABETASTE, um den Code oder Befehl auszuführen.

Beispielskripts

Starten von Azure Cloud Shell

Azure Cloud Shell ist eine kostenlose interaktive Shell, mit der Sie die Schritte in diesem Artikel durchführen können. Sie verfügt über allgemeine vorinstallierte Tools und ist für die Verwendung mit Ihrem Konto konfiguriert.

Wählen Sie zum Öffnen von Cloud Shell oben rechts in einem Codeblock einfach die Option Ausprobieren. Sie können Cloud Shell auch auf einem separaten Browsertab starten, indem Sie zu https://shell.azure.com navigieren.

Überprüfen Sie nach dem Öffnen von Cloud Shell, ob Bash für Ihre Umgebung ausgewählt ist. In den folgenden Sitzungen wird die Azure CLI in einer Bash-Umgebung verwendet. Wählen Sie Kopieren aus, um die Codeblöcke zu kopieren. Fügen Sie sie in Cloud Shell ein, und drücken Sie die EINGABETASTE, um sie auszuführen.

Anmelden bei Azure

Cloud Shell wird automatisch unter dem Konto authentifiziert, mit dem die Anmeldung anfänglich erfolgt ist. Verwenden Sie das folgende Skript, um sich mit einem anderen Abonnement anzumelden, und ersetzen Sie <Subscription ID> durch Ihre Azure-Abonnement-ID. Wenn Sie kein Azure-Abonnement haben, erstellen Sie ein kostenloses Azure-Konto, bevor Sie beginnen.

subscription="<subscriptionId>" # add subscription here

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

Weitere Informationen finden Sie unter Festlegen des aktiven Abonnements oder unter Interaktives Anmelden.

Erstellen einer SignalR Service-Instanz mit App 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"

Aktivieren der GitHub-Authentifizierung und der Git-Bereitstellung für eine Web-App

  1. Aktualisieren der Werte im folgenden Skript mit dem Benutzernamen und Kennwort für die gewünschte Bereitstellung

    deploymentUser=<Replace with your desired username>
deploymentUserPassword=<Replace with your desired password>

  2. Aktualisieren Sie die Werte im folgenden Skript basierend auf Ihrer OAuth-App-Registrierung in GitHub.

    GitHubClientId=<Replace with your GitHub OAuth app Client ID>
GitHubClientSecret=<Replace with your GitHub OAuth app Client Secret>

  3. Hinzufügen von App-Einstellungen für die Verwendung mit der GitHub-Authentifizierung

    az webapp config appsettings set --name $webApp --resource-group $resourceGroup --settings "GitHubClientSecret=$GitHubClientSecret"

  4. Aktualisieren der Web-App mit dem Benutzernamen und dem Kennwort für die gewünschte Bereitstellung

    az webapp deployment user set --user-name $deploymentUser --password $deploymentUserPassword

  5. Konfigurieren Sie die Git-Bereitstellung, und geben Sie die Bereitstellungs-URL zurück.

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

Bereinigen von Ressourcen

Verwenden Sie den folgenden Befehl, um die Ressourcengruppe und alle zugehörigen Ressourcen mit dem Befehl az group delete zu entfernen, es sei denn, Sie benötigen diese Ressourcen weiterhin. Bei einigen dieser Ressourcen kann das Erstellen wie auch das Löschen eine Weile dauern.

az group delete --name $resourceGroup

Beispielreferenz

Jeder Befehl in der Tabelle ist mit der zugehörigen Dokumentation verknüpft. Das Skript verwendet die folgenden Befehle:

Get-Help Notizen
az group create Erstellt eine Ressourcengruppe, in der alle Ressourcen gespeichert sind.
az signalr create Erstellt eine Azure SignalR Service-Ressource.
az signalr key list Listet die Schlüssel auf, die von Ihrer Anwendung bei der Übertragung von Echtzeitinhaltsupdates mit SignalR mithilfe von Push verwendet werden.
az appservice plan create Erstellt einen Azure App Service-Plan zum Hosten von Web-Apps.
az webapp create Erstellt eine Azure-Web-App mithilfe des App Service-Hostingplans.
az webapp config appsettings set Fügt neue App-Einstellungen für die Web-App hinzu. Diese App-Einstellungen werden verwendet, um die SignalR-Verbindungszeichenfolge und die GitHub OAuth-App-Geheimnisse zu speichern.
az webapp deployment user set Aktualisiert die Anmeldeinformationen für die Bereitstellung.
az webapp deployment source config-local-git Ruft eine URL für einen Endpunkt eines Git-Repositorys auf, um dieses zu klonen und mithilfe von Push für die Web-App-Bereitstellung zu übertragen.

Nächste Schritte

Weitere Informationen zur Azure CLI finden Sie in der Azure CLI-Dokumentation.

Weitere CLI-Skriptbeispiele zum Azure SignalR Service finden Sie in der Dokumentation zum Azure SignalR Service.