Esercitazione: Comunicazione tra microservizi in App Azure Container

App Contenitore di Azure espone ogni app contenitore tramite un nome di dominio se l'ingresso è abilitato. Gli endpoint di ingresso per le app contenitore all'interno di un ambiente esterno possono essere accessibili pubblicamente o disponibili solo per altre app contenitore nello stesso ambiente.

Dopo aver appreso il nome di dominio completo per una determinata app contenitore, è possibile effettuare chiamate dirette al servizio da altre app contenitore all'interno dell'ambiente condiviso.

In questa esercitazione si distribuisce una seconda app contenitore che effettua una chiamata diretta al servizio all'API distribuita nell'argomento di avvio rapido Distribuire il codice in App Azure Container.

Lo screenshot seguente mostra la distribuzione del microservizio dell'interfaccia utente nelle app contenitore alla fine di questo articolo.

Questa esercitazione apprendi come:

• Distribuire un'applicazione front-end in App Azure Container
• Collegare l'app front-end all'endpoint API distribuito nella guida introduttiva precedente
• Verificare che l'app front-end possa comunicare con l'API back-end

Prerequisiti

Nella guida introduttiva al codice nel cloud viene distribuita un'API Web back-end per restituire un elenco di album musicali. Se il microservizio api dell'album non è stato distribuito, tornare a Avvio rapido: Distribuire il codice in App Contenitore di Azure per continuare.

Attrezzaggio

Se si è attualmente autenticati in Azure e si hanno le variabili di ambiente definite dall'avvio rapido, ignorare i passaggi seguenti e passare direttamente a Preparare il repository GitHub.

Bash

Definire le variabili seguenti nella shell bash.

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

Prima di eseguire questo comando, assicurarsi di sostituire <YOUR_GITHUB_USERNAME> con il nome utente di GitHub.

Definire quindi un nome di registro contenitori univoco.

ACR_NAME="acaalbums"$GITHUB_USERNAME

Azure PowerShell

Definire le variabili seguenti nella console di PowerShell.

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

Prima di eseguire questo comando, assicurarsi di sostituire <YOUR_GITHUB_USERNAME> con il nome utente di GitHub.

Definire quindi un nome di registro contenitori univoco.

$ACRName = "acaalbums"+$GITHUB_USERNAME

Accedere all'interfaccia della riga di comando di Azure.

Bash

az login

Azure PowerShell

Connect-AzAccount

Bash

az acr login --name $ACR_NAME

Azure PowerShell

az acr login --name $ACRName

Preparare il repository GitHub

1. In una nuova scheda del browser passare al repository per l'applicazione dell'interfaccia utente e selezionare il pulsante Fork nella parte superiore della pagina per creare una copia tramite fork del repository nell'account.

   Seguire le istruzioni da GitHub per creare una copia tramite fork del repository e tornare qui al termine dell'operazione.

2. Passare all'elemento padre della cartella code-to-cloud . Se si è ancora nella directory code-to-cloud/src , è possibile usare il comando seguente per tornare alla cartella padre.

   cd ../..
   

3. Usare il comando Git seguente per clonare il repository con fork nella cartella code-to-cloud-ui :

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

   Nota

   Se il clone comando non riesce, verificare di aver eseguito correttamente il fork del repository.

4. Modificare quindi la directory nella cartella src del repository clonato.

   cd code-to-cloud-ui/src
   

Compilare l'applicazione front-end

Bash

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

Azure PowerShell

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

L'output del az acr build comando mostra lo stato di caricamento del codice sorgente in Azure e i dettagli dell'operazione docker build .

1. Il comando seguente compila un'immagine del contenitore per l'interfaccia utente dell'album e lo contrassegna con il nome completo del server di accesso del Registro Azure Container. L'oggetto . alla fine del comando rappresenta il contesto di compilazione docker, ovvero questo comando deve essere eseguito all'interno della cartella src in cui si trova il Dockerfile.

   Bash

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

   Azure PowerShell

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

Eseguire il push dell'immagine nel Registro Azure Container

1. Prima di tutto, accedere al Registro Azure Container.

   Bash

   az acr login --name $ACR_NAME
   

   Azure PowerShell

   az acr login --name $ACRName
   

2. Eseguire ora il push dell'immagine nel registro.

   Bash

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

   Azure PowerShell

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

Comunicare tra app contenitore

Nell'argomento di avvio rapido precedente l'API dell'album è stata distribuita creando un'app contenitore e abilitando l'ingresso esterno. Impostando l'ingresso dell'app contenitore su esterno , l'URL dell'endpoint HTTP è disponibile pubblicamente.

A questo punto è possibile configurare l'applicazione front-end per chiamare l'endpoint API seguendo questa procedura:

• Eseguire una query sull'applicazione API per il nome di dominio completo (FQDN).
• Passare il nome di dominio completo dell'API a az containerapp create come variabile di ambiente in modo che l'app dell'interfaccia utente possa impostare l'URL di base per la chiamata API album all'interno del codice.

L'applicazione dell'interfaccia utente usa l'endpoint fornito per richiamare l'API dell'album. Il codice seguente è un estratto del codice usato nelle route > index.js file.

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

Si noti come la proprietà ottiene il baseURL relativo valore dalla API_BASE_URL variabile di ambiente.

Eseguire il comando seguente per eseguire una query per l'indirizzo dell'endpoint API.

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

Dopo aver impostato la API_BASE_URL variabile con il nome di dominio completo dell'API dell'album, è possibile specificarla come variabile di ambiente per l'app contenitore front-end.

Distribuire un'applicazione front-end

Creare e distribuire l'app contenitore con il comando seguente.

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

Aggiungendo l'argomento --env-vars "API_BASE_URL=https://$API_ENDPOINT" a az containerapp create, si definisce una variabile di ambiente per l'applicazione front-end. Con questa sintassi, la variabile di ambiente denominata API_BASE_URL è impostata sul nome FQDN dell'API.

L'output del az containerapp create comando mostra l'URL dell'applicazione front-end.

Azure PowerShell

Per creare l'app contenitore, creare oggetti modello passati come argomenti al New-AzContainerApp comando.

Creare un oggetto modello per definire i parametri dell'immagine del contenitore. La variabile di ambiente denominata API_BASE_URL è impostata sul nome di dominio completo dell'API.

$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

Eseguire il comando seguente per ottenere le credenziali del Registro di sistema.

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

Creare un oggetto credenziale del Registro di sistema per definire le informazioni del Registro di sistema e un oggetto segreto per definire la password del Registro di sistema. L'oggetto PasswordSecretRef in $RegistryObj fa riferimento a 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

Ottenere l'ID dell'ambiente.

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

Creare l'app contenitore.

$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

Visualizzazione del sito Web

Usare il nome di dominio completo dell'app contenitore per visualizzare il sito Web. La pagina è simile allo screenshot seguente.

Pulire le risorse

Se non si intende continuare a usare questa applicazione, eseguire il comando seguente per eliminare il gruppo di risorse insieme a tutte le risorse create in questa guida introduttiva.

Attenzione

Questo comando elimina il gruppo di risorse specificato e tutte le risorse contenute al suo interno. Se nel gruppo di risorse specificato sono presenti anche risorse diverse da quelle usate in questa esercitazione, verranno eliminate.

Bash

az group delete --name $RESOURCE_GROUP

Azure PowerShell

Remove-AzResourceGroup -Name $ResourceGroup -Force

Suggerimento

Problemi? Segnalare il problema in GitHub aprendo un problema nel repository di App contenitore di Azure.

Passaggi successivi

Ambienti nelle app Azure Container