Partager via


Créer une application web utilisant le service SignalR et l’authentification GitHub

Cet exemple de script crée une nouvelle ressource de service Azure SignalR, utilisée pour transmettre les mises à jour en temps réel de contenus aux clients. Ce script ajoute également une application web et un plan App Service pour héberger une application web ASP.NET Core qui utilise le service SignalR. L’application web est configurée avec les paramètres d’application établissant la connexion avec la nouvelle ressource de service SignalR, et l’authentification avec GitHub. L’application web est également configurée pour utiliser une source de déploiement du référentiel git local.

Si vous n’avez pas d’abonnement Azure, créez un compte gratuit Azure avant de commencer.

Azure Cloud Shell

Azure héberge Azure Cloud Shell, un environnement d’interpréteur de commandes interactif que vous pouvez utiliser dans votre navigateur. Vous pouvez utiliser Bash ou PowerShell avec Cloud Shell pour utiliser les services Azure. Vous pouvez utiliser les commandes préinstallées Cloud Shell pour exécuter le code de cet article sans avoir à installer quoi que ce soit dans votre environnement local.

Pour démarrer Azure Cloud Shell :

Option Exemple/Lien
Sélectionnez Essayer dans le coin supérieur droite d’un bloc de codes ou de commandes. La sélection de Essayer ne copie pas automatiquement le code ni la commande dans Cloud Shell. Capture d’écran présentant un exemple d’essai pour Azure Cloud Shell.
Accédez à https://shell.azure.com ou sélectionnez le bouton Lancer Cloud Shell pour ouvrir Cloud Shell dans votre navigateur. Bouton permettant de lancer Azure Cloud Shell.
Sélectionnez le bouton Cloud Shell dans la barre de menus en haut à droite du portail Azure. Capture d’écran présentant le bouton Cloud Shell dans le portail Azure.

Pour utiliser Azure Cloud Shell :

  1. Démarrez Cloud Shell.

  2. Sélectionnez le bouton Copier sur un bloc de codes (ou un bloc de commandes) pour copier le code ou la commande.

  3. Collez le code ou la commande dans la session Cloud Shell en sélectionnant Ctrl+Maj+V sur Windows et Linux ou en sélectionnant Cmd+Maj+V sur macOS.

  4. Sélectionnez Entrée pour exécuter le code ou la commande.

Exemples de scripts

Lancement d’Azure Cloud Shell

Azure Cloud Shell est un interpréteur de commandes interactif et gratuit que vous pouvez utiliser pour exécuter les étapes de cet article. Il contient des outils Azure courants préinstallés et configurés pour être utilisés avec votre compte.

Pour ouvrir Cloud Shell, sélectionnez simplement Essayer en haut à droite d’un bloc de code. Vous pouvez aussi lancer Cloud Shell dans un onglet distinct du navigateur en accédant à https://shell.azure.com.

Quand Cloud Shell s’ouvre, vérifiez que Bash est sélectionné pour votre environnement. Les sessions ultérieures utiliseront Azure CLI dans un environnement Bash. Sélectionnez Copier pour copier les blocs de code, collez-les dans Cloud Shell, puis appuyez sur Entrée pour les exécuter.

Connexion à Azure

Cloud Shell est automatiquement authentifié sous le compte initial utilisé pour la connexion. Utilisez le script suivant pour vous connecter avec un autre abonnement, en remplaçant <Subscription ID> par votre ID d’abonnement Azure. Si vous n’avez pas d’abonnement Azure, créez un compte gratuit Azure avant de commencer.

subscription="<subscriptionId>" # add subscription here

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

Pour plus d’informations, consultez Définir l’abonnement actif ou Se connecter de manière interactive

Créer le service SignalR avec 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"

Activer l’authentification GitHub et le déploiement Git pour l’application web

  1. Mettez à jour les valeurs dans le script suivant pour le nom d’utilisateur de déploiement souhaité et son mot de passe

    deploymentUser=<Replace with your desired username>
    deploymentUserPassword=<Replace with your desired password>
    
  2. Mettez à jour les valeurs du script suivant en fonction de votre inscription d’application OAuth GitHub.

    GitHubClientId=<Replace with your GitHub OAuth app Client ID>
    GitHubClientSecret=<Replace with your GitHub OAuth app Client Secret>
    
  3. Ajouter des paramètres d’application à utiliser avec l’authentification GitHub

    az webapp config appsettings set --name $webApp --resource-group $resourceGroup --settings "GitHubClientSecret=$GitHubClientSecret" 
    
  4. Mettre à jour l’application web avec le nom d’utilisateur et le mot de passe de déploiement souhaités

    az webapp deployment user set --user-name $deploymentUser --password $deploymentUserPassword
    
  5. Configurez le déploiement Git et retournez l’URL de déploiement.

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

Nettoyer les ressources

Utilisez la commande suivante pour supprimer le groupe de ressources et toutes les ressources associées à celui-ci à l’aide de la commande az group delete, sauf si vous avez toujours besoin de ces ressources. La création, ainsi que la suppression, de certaines de ces ressources peut prendre du temps.

az group delete --name $resourceGroup

Informations de référence sur l’exemple

Chaque commande du tableau renvoie à une documentation spécifique. Ce script utilise les commandes suivantes :

Commande Notes
az group create Crée un groupe de ressources dans lequel toutes les ressources sont stockées.
az signalr create Crée une ressource Azure SignalR Service.
az signalr key list Répertorie les clés qui seront utilisées par votre application lors de la transmission des mises à jour en temps réel de contenus avec SignalR.
az appservice plan create Crée un plan Azure App Service pour l’hébergement des applications web.
az webapp create Crée une application web Azure utilisant le plan d’hébergement App Service.
az webapp config appsettings set Ajoute de nouveaux paramètres pour l’application web. Ces paramètres d’application sont utilisés pour stocker la chaîne de connexion SignalR et les secrets d’application GitHub OAuth.
az webapp deployment user set Met à jour les informations d’identification du déploiement.
az webapp deployment source config-local-git Récupère une URL pour un point de terminaison de référentiel Git à cloner et à établir comme instance de réception pour le déploiement d’application web.

Étapes suivantes

Pour plus d’informations sur l’interface Azure CLI, consultez la documentation relative à l’interface Azure CLI.

Des exemples supplémentaires de script de l’interface CLI du service Azure SignalR sont disponibles dans la documentation sur le service Azure SignalR.