Partager via

Tutoriel : Communication entre les microservices dans Azure Container Apps

  • Article

Les applications Azure Container exposent chaque application conteneur par le biais d’un nom de domaine si l'entrée est activée. Les points de terminaison d’entrée pour les applications conteneur au sein d’un environnement externe peuvent être accessibles publiquement ou uniquement disponibles pour d’autres applications de conteneur dans le même environnement.

Une fois que vous connaissez le nom de domaine complet d’une application de conteneur donnée, vous pouvez effectuer des appels directs au service à partir d’autres applications de conteneur dans l’environnement partagé.

Dans ce tutoriel, vous déployez une deuxième application de conteneur qui effectue un appel de service direct à l’API déployée dans le guide de démarrage rapide Déployer votre code sur Azure Container Apps.

La capture d’écran suivante montre le microservice d’interface utilisateur déployé sur des applications de conteneur à la fin de cet article.

Capture d’écran du microservice d’interface utilisateur de liste d’albums.

Ce didacticiel vous apprend à effectuer les opérations suivantes :

  • Déployer une application frontale sur Azure Container Apps
  • Lier l’application frontale au point de terminaison d’API déployé dans le guide de démarrage rapide précédent
  • Vérifier que l’application frontale peut communiquer avec l’API back-end

Prérequis

Dans le code de démarrage rapide vers le cloud, une API web back-end est déployée pour renvoyer une liste d’albums de musique. Si vous n’avez pas déployé le microservice de l’API d’album, revenez à Démarrage rapide : Déployer votre code sur Azure Container Apps pour continuer.

Programme d’installation

Si vous êtes actuellement authentifié sur Azure et que vous disposez des variables d’environnement définies dans le démarrage rapide, sautez les étapes suivantes et passez directement à la préparation du référentiel GitHub.

Définissez les variables suivantes dans votre interpréteur de commandes Bash.

RESOURCE_GROUP="album-containerapps"
LOCATION="canadacentral"
ENVIRONMENT="env-album-containerapps"
API_NAME="album-api"
FRONTEND_NAME="album-ui"
GITHUB_USERNAME="<YOUR_GITHUB_USERNAME>"

Avant d’exécuter cette commande, veillez à remplacer <YOUR_GITHUB_USERNAME> par votre nom d’utilisateur GitHub.

Définissez ensuite un nom de registre de conteneurs qui vous est propre.

ACR_NAME="acaalbums"$GITHUB_USERNAME

Se connecter à Azure CLI.

az login

az acr login --name $ACR_NAME

Préparer le référentiel GitHub

  1. Dans un nouvel onglet de navigateur, accédez au référentiel de l’application d’interface utilisateur et sélectionnez le bouton Fork en haut de la page pour activer le référentiel dans votre compte.

    Suivez les invites de GitHub pour dupliquer le référentiel et revenir ici une fois l’opération terminée.

  2. Accédez au parent du dossier code-to-cloud. Si vous êtes toujours dans le répertoire code-to-cloud/src, vous pouvez utiliser la commande ci-dessous pour revenir au dossier parent.

    cd ../..

  3. Utilisez la commande git suivante pour cloner votre référentiel dupliqué dans le dossier code-to-cloud-ui :

    git clone https://github.com/$GITHUB_USERNAME/containerapps-albumui.git code-to-cloud-ui

    Notes

    Si la commande clone échoue, vérifiez que vous avez correctement dupliqué le référentiel.

  4. Ensuite, remplacez le répertoire dans le dossier src du référentiel cloné.

    cd code-to-cloud-ui/src

Générer l’application frontale

az acr build --registry $ACR_NAME --image albumapp-ui .

La sortie de la commande az acr build affiche la progression du chargement du code source dans Azure et les détails de l’opération docker build.

  1. La commande suivante génère une image conteneur pour l’UI album et l’étiquette avec le nom complet du serveur de connexion ACR. Le . la fin de la commande représente le contexte de build Docker, ce qui signifie que cette commande doit être exécutée dans le dossier src où se trouve le fichier Dockerfile.

    docker build --tag "$ACR_NAME.azurecr.io/albumapp-ui" .

Pousser (push) l’image dans votre registre ACR

  1. Commencez par vous connecter à votre registre de conteneurs Azure Container Registry.

    az acr login --name $ACR_NAME

  2. Envoyez (push) à présent l’image dans votre registre.

    
 docker push "$ACR_NAME.azurecr.io/albumapp-ui"

Communiquer entre les applications de conteneur

Dans le guide de démarrage rapide précédent, l’API d’album a été déployée en créant une application conteneur et en activant l’entrée externe. Définir l’entrée de l’application de conteneur sur externe a rendu son URL de point de terminaison HTTP publiquement disponible.

Vous pouvez maintenant configurer l’application frontale pour appeler le point de terminaison de l’API en procédant comme suit :

  • Interrogez l’application d’API pour obtenir son nom de domaine complet (FQDN).
  • Modifiez le nom de domaine complet de l’API pour az containerapp create en tant que variable d’environnement afin que l’application d’interface utilisateur puisse définir l’URL de base de l’appel de l’API d’album dans le code.

L’application d’interface utilisateur utilise le point de terminaison fourni pour appeler l’API d’album. Le code suivant est un extrait du code utilisé dans le fichier des itinéraires > index.js.

const api = axios.create({
  baseURL: process.env.API_BASE_URL,
  params: {},
  timeout: process.env.TIMEOUT || 5000,
});

Notez comment la propriété baseURL obtient sa valeur à partir de la variable d’environnement API_BASE_URL.

Exécutez la commande suivante pour interroger l’adresse du point de terminaison d’API.

API_BASE_URL=$(az containerapp show --resource-group $RESOURCE_GROUP --name $API_NAME --query properties.configuration.ingress.fqdn -o tsv)

Maintenant que vous avez défini la variable API_BASE_URL avec le nom de domaine complet de l’API album, vous pouvez la fournir en tant que variable d’environnement à l’application de conteneur frontend.

Déployez une application frontale

Créez et déployez votre application de conteneur à l’aide de la commande suivante.

az containerapp create \
  --name $FRONTEND_NAME \
  --resource-group $RESOURCE_GROUP \
  --environment $ENVIRONMENT \
  --image $ACR_NAME.azurecr.io/albumapp-ui  \
  --target-port 3000 \
  --env-vars API_BASE_URL=https://$API_BASE_URL \
  --ingress external \
  --registry-server $ACR_NAME.azurecr.io \
  --query properties.configuration.ingress.fqdn

En ajoutant l’argument --env-vars "API_BASE_URL=https://$API_ENDPOINT" à az containerapp create, vous définissez une variable d’environnement pour votre application frontale. Avec cette syntaxe, la variable d’environnement nommée API_BASE_URL est définie sur le nom de domaine complet de l’API.

La sortie de la commande az containerapp create affiche l’URL de l’application frontale.

Afficher le site web

Utilisez le nom de domaine complet de l’application conteneur pour afficher le site web. La page ressemble à la capture d’écran suivante.

Capture d’écran du microservice d’interface utilisateur de liste d’albums.

Nettoyer les ressources

Si vous ne souhaitez pas continuer à utiliser cette application, exécutez la commande suivante pour supprimer le groupe de ressources ainsi que toutes les ressources créées pendant ce démarrage rapide.

Attention

Cette commande supprime le groupe de ressources spécifié et toutes les ressources qu’il contient. Si des ressources en dehors du cadre de ce tutoriel existent dans le groupe de ressources spécifié, elles seront également supprimées.

az group delete --name $RESOURCE_GROUP

Conseil

Vous rencontrez des problèmes ? Faites-le nous savoir sur GitHub en ouvrant un problème dans le dépôt Azure Container Apps.

Étapes suivantes

Environnements dans Azure Container Apps