Lernprogramm: Kommunikation zwischen Microservices in der Vorschau zu Azure Container Apps

In Azure Container Apps wird jede Container-App über einen Domänennamen verfügbar gemacht, wenn Datenverkehr in eingehender Richtung aktiviert ist. Eingehende Endpunkte für Container Apps innerhalb einer externen Umgebung können entweder öffentlich zugänglich oder nur für andere Container Apps in derselben Umgebung verfügbar sein.

Sobald Sie den vollqualifizierten Domänennamen für eine bestimmte Container App kennen, können Sie direkte Aufrufe an den Dienst von anderen Container Apps innerhalb der freigegebenen Umgebung vornehmen.

In diesem Lernprogramm stellen Sie eine zweite Container App bereit, die einen direkten Dienstaufruf an die API bereitstellt, die im Schnellstart ihres Codes für Azure Container Apps bereitgestellt wird.

Im folgenden Screenshot wird der Benutzeroberflächen-Microservice am Ende dieses Artikels für Container Apps bereitgestellt.

In diesem Tutorial lernen Sie Folgendes:

• Bereitstellen einer Front-End-Anwendung in Azure Container Apps
• Bereitstellung der Front-End-App mit dem API-Endpunkt, der im vorherigen Schnellstart bereitgestellt wird
• Überprüfen, ob die Front-End-App mit der Back-End-API kommunizieren kann

Voraussetzungen

Im Code für den Cloud-Schnellstart wird eine Back-End-Web-API bereitgestellt, um eine Liste der Musikalben zurückzugeben. Wenn Sie den Album-API-Microservice nicht bereitgestellt haben, kehren Sie zurück zu Schnellstart: Stellen Sie Ihren Code in Azure Container Apps bereit, um fortzufahren.

Setup

Wenn Sie derzeit bei Azure authentifiziert sind und die Umgebungsvariablen haben, die im Schnellstart definiert wurden, überspringen Sie die folgenden Schritte und gehen Sie direkt zu GitHub Repository vorbereiten.

Bash

Definieren Sie die folgenden Variablen in Ihrer Bash-Shell.

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

Bevor Sie diesen Befehl ausführen, müssen Sie <YOUR_GITHUB_USERNAME> durch Ihren GitHub-Benutzernamen ersetzen.

Definieren Sie als Nächstes einen für Sie eindeutigen Containerregistrierungsnamen.

ACR_NAME="acaalbums"$GITHUB_USERNAME

Azure PowerShell

Legen Sie die folgenden Variablen in Ihrer PowerShell-Konsole fest.

$ResourceGroup = "album-containerapps"
$Location = "canadacentral"
$Environment = "env-album-containerapps"
$APIName="album-api"
$FrontendName="album-ui"
$GITHUB_USERNAME = "<YOUR_GITHUB_USERNAME>"

Bevor Sie diesen Befehl ausführen, müssen Sie <YOUR_GITHUB_USERNAME> durch Ihren GitHub-Benutzernamen ersetzen.

Definieren Sie als Nächstes einen für Sie eindeutigen Containerregistrierungsnamen.

$ACRName = "acaalbums"+$GITHUB_USERNAME

Melden Sie sich bei der Azure CLI an.

Bash

az login

Azure PowerShell

Connect-AzAccount

Bash

az acr login --name $ACR_NAME

Azure PowerShell

az acr login --name $ACRName

Klonen Sie das GitHub-Repository

1. Navigieren Sie in einer neuen Browserregisterkarte zu dem Repository für die Ui-Anwendung und wählen Sie oben auf der Seite die Schaltfläche Fork aus, um das Repository für Ihr Konto freizugeben.

   Folgen Sie den Eingabeaufforderungen von GitHub, um das Repository zu forken und hier zurückzugeben, sobald der Vorgang abgeschlossen ist.

2. Navigieren Sie zum übergeordneten OrdnerCode-zu-Cloud. Wenn Sie sich noch im Code-zu-Cloud/src-Verzeichnis befinden, können Sie den folgenden Befehl verwenden, um zum übergeordneten Ordner zurückzukehren.

   cd ../..
   

3. Verwenden Sie den folgenden Git-Befehl, um Ihr geforktes Repository in den Code-zu-Cloud-UI-Ordner zu klonen:

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

   Hinweis

   Wenn der clone-Befehl fehlschlägt, überprüfen Sie, ob Sie das Repository erfolgreich verzweigt haben.

4. Ändern Sie als Nächstes das Verzeichnis im src-Ordner des geklonten Repositorys.

   cd code-to-cloud-ui/src
   

Erstellen der Front-End-Anwendung

Bash

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

Azure PowerShell

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

Die Ausgabe aus dem az acr build-Befehl zeigt den Upload-Fortschritt des Quellcodes in Azure und die Details des docker build-Vorgangs.

1. Mit dem folgenden Befehl wird ein Containerimage für die grafische Album-Benutzeroberfläche erstellt und mit dem vollqualifizierten Namen des ACR-Anmeldeservers markiert. Das . am Ende des Befehls stellt den Docker-Build-Kontext dar, was bedeutet, dass dieser Befehl innerhalb des src-Ordners ausgeführt werden sollte, in dem sich die Dockerfile befindet.

   Bash

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

   Azure PowerShell

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

Übertragen des Images zu Ihrer ACR-Registrierung

1. Melden Sie sich zuerst bei Ihrer Azure-Containerregistrierung an.

   Bash

   az acr login --name $ACR_NAME
   

   Azure PowerShell

   az acr login --name $ACRName
   

2. Übertragen Sie jetzt das Image mithilfe von Push an Ihre Registrierung.

   Bash

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

   Azure PowerShell

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

Kommunizieren zwischen Container Apps

In der vorherigen Schnellstartanleitung wurde die Album-API bereitgestellt, indem eine Container App erstellt und ein externer Eingang aktiviert wird. Wenn der Eingang der Container App auf externe Weise ausgeführt wird, wird die HTTP-Endpunkt-URL öffentlich verfügbar gemacht.

Jetzt können Sie die Front-End-Anwendung so konfigurieren, dass der API-Endpunkt aufgerufen wird, indem Sie die folgenden Schritte ausführen:

• Abfragen der API-Anwendung für den vollqualifizierten Domänennamen (FQDN).
• Übergeben Sie die API-FQDN an az containerapp create als Umgebungsvariable, sodass die UI-App die Basis-URL für den Album-API-Aufruf innerhalb des Codes festlegen kann.

Die UI-Anwendung verwendet den Endpunkt, der zum Aufrufen der Album-API bereitgestellt wird. Der folgende Code ist ein Auszug aus dem Code, der in den Routen der>index.js-Datei verwendet wird.

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

Beachten Sie, wie die baseURL-Eigenschaft seinen Wert aus der API_BASE_URL-Umgebungsvariable abruft.

Führen Sie den folgenden Befehl aus, um die API-Endpunktadresse abzufragen.

Bash

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

Azure PowerShell

$APIBaseURL = (Get-AzContainerApp -Name $APIName -ResourceGroupName $ResourceGroup).IngressFqdn

Nachdem Sie die Variable API_BASE_URL mit der FQDN der Album-API festgelegt haben, können Sie sie als Umgebungsvariable für die Front-End-Container-App bereitstellen.

Front-End-App bereitstellen

Erstellen und Bereitstellen Ihrer Container App mit dem folgenden Befehl.

Bash

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

Indem Sie das Argument --env-vars "API_BASE_URL=https://$API_ENDPOINT" zu az containerapp create hinzufügen, definieren Sie eine Umgebungsvariable für Ihre Front-End-Anwendung. Mit dieser Syntax wird die Umgebungsvariable mit dem Namen API_BASE_URL auf den FQDN der API festgelegt.

Die Ausgabe des Befehls az containerapp create zeigt die URL der Front-End-Anwendung.

Azure PowerShell

Zum Erstellen der Container-App erstellen Sie Vorlagenobjekte, die Sie als Argumente an den Befehl New-AzContainerApp übergeben.

Erstellen Sie ein Vorlagenobjekt, um Ihre Containerimageparameter zu definieren. Die Umgebungsvariable mit dem Namen API_BASE_URL wird auf den FQDN der API festgelegt.

$EnvVars = New-AzContainerAppEnvironmentVarObject -Name API_BASE_URL -Value https://$APIBaseURL

$ContainerArgs = @{
  Name = $FrontendName
  Image = $ACRName + '.azurecr.io/albumapp-ui'
  Env = $EnvVars
}
$ContainerObj = New-AzContainerAppTemplateObject @ContainerArgs

Führen Sie den folgenden Befehl aus, um Ihre Registrierungsanmeldeinformationen abzurufen.

$RegistryCredentials = Get-AzContainerRegistryCredential -Name $ACRName -ResourceGroupName $ResourceGroup

Erstellen Sie ein Registrierungsanmeldeinformationen-Objekt, um Ihre Registrierungsinformationen zu definieren, sowie ein Geheimnisobjekt, um Ihr Registrierungskennwort festzulegen. PasswordSecretRef in $RegistryObj bezieht sich auf Name in $SecretObj.

$RegistryArgs = @{
    Server = $ACRName + '.azurecr.io'
    PasswordSecretRef = 'registrysecret'
    Username = $RegistryCredentials.Username
}
$RegistryObj = New-AzContainerAppRegistryCredentialObject @RegistryArgs

$SecretObj = New-AzContainerAppSecretObject -Name 'registrysecret' -Value $RegistryCredentials.Password

Rufen Sie Ihre Umgebungs-ID ab.

$EnvId = (Get-AzContainerAppManagedEnv -EnvName $Environment -ResourceGroup $ResourceGroup).Id

Erstellen Sie die Container-App.

$AppArgs = @{
    Name = $FrontendName
    Location = $Location
    ResourceGroupName = $ResourceGroup
    ManagedEnvironmentId = $EnvId
    TemplateContainer = $ContainerObj
    ConfigurationRegistry = $RegistryObj
    ConfigurationSecret = $SecretObj
    IngressTargetPort = 3000
    IngressExternal = $true
}
$FrontEndApp = New-AzContainerApp @AppArgs

# show the app's FQDN

$FrontEndApp.IngressFqdn

Anzeigen der Website

Verwenden Sie den FQDN der Container-App, um die Website anzuzeigen. Die Seite ähnelt dem folgenden Screenshot.

Bereinigen von Ressourcen

Wenn Sie diese Anwendung nicht weiter verwenden möchten, führen Sie den folgenden Befehl aus, um die Ressourcengruppe zusammen mit allen in dieser Schnellstartanleitung erstellten Ressourcen zu löschen.

Achtung

Mit diesem Befehl werden die angegebene Ressourcengruppe und alle darin enthaltenen Ressourcen gelöscht. Falls in der angegebenen Ressourcengruppe Ressourcen enthalten sind, die nicht zum Umfang dieses Tutorials gehören, werden sie ebenfalls gelöscht.

Bash

az group delete --name $RESOURCE_GROUP

Azure PowerShell

Remove-AzResourceGroup -Name $ResourceGroup -Force

Tipp

Treten Probleme auf? Informieren Sie uns über GitHub, indem Sie ein Problem im Azure Container Apps-Repository öffnen.

Nächste Schritte

Umgebungen in Azure Container Apps