Zelfstudie: Communicatie tussen microservices in Azure Container Apps

Azure Container Apps maakt elke container-app beschikbaar via een domeinnaam als inkomend verkeer is ingeschakeld. Eindpunten voor inkomend verkeer voor container-apps in een externe omgeving kunnen openbaar toegankelijk zijn of alleen beschikbaar zijn voor andere container-apps in dezelfde omgeving.

Zodra u de volledig gekwalificeerde domeinnaam voor een bepaalde container-app kent, kunt u directe aanroepen naar de service uitvoeren vanuit andere container-apps in de gedeelde omgeving.

In deze zelfstudie implementeert u een tweede container-app die een directe service-aanroep naar de API maakt die is geïmplementeerd in de quickstart Uw code implementeren in Azure Container Apps .

In de volgende schermopname ziet u de microservice van de gebruikersinterface die aan het einde van dit artikel wordt geïmplementeerd in container-apps.

In deze zelfstudie leert u het volgende:

• Een front-endtoepassing implementeren in Azure Container Apps
• De front-end-app koppelen aan het API-eindpunt dat in de vorige quickstart is geïmplementeerd
• Controleer of de front-end-app kan communiceren met de back-end-API

Vereisten

In de quickstart voor code naar de cloud wordt een back-endweb-API geïmplementeerd om een lijst met muziekalbums te retourneren. Als u de microservice van de album-API niet hebt geïmplementeerd, gaat u terug naar Quickstart: Uw code implementeren in Azure Container Apps om door te gaan.

Instellingen

Als u momenteel bent geverifieerd bij Azure en de omgevingsvariabelen hebt die zijn gedefinieerd in de quickstart, slaat u de volgende stappen over en gaat u rechtstreeks naar de GitHub-opslagplaats voorbereiden.

Bash

Definieer de volgende variabelen in uw 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>"

Voordat u deze opdracht uitvoert, moet u deze vervangen door <YOUR_GITHUB_USERNAME> uw GitHub-gebruikersnaam.

Definieer vervolgens een containerregisternaam die uniek voor u is.

ACR_NAME="acaalbums"$GITHUB_USERNAME

Azure PowerShell

Definieer de volgende variabelen in uw PowerShell-console.

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

Voordat u deze opdracht uitvoert, moet u deze vervangen door <YOUR_GITHUB_USERNAME> uw GitHub-gebruikersnaam.

Definieer vervolgens een containerregisternaam die uniek voor u is.

$ACRName = "acaalbums"+$GITHUB_USERNAME

Meld u aan bij de Azure CLI.

Bash

az login

Azure PowerShell

Connect-AzAccount

Bash

az acr login --name $ACR_NAME

Azure PowerShell

az acr login --name $ACRName

De GitHub-opslagplaats voorbereiden

1. Ga in een nieuw browsertabblad naar de opslagplaats voor de gebruikersinterfacetoepassing en selecteer de knop Fork boven aan de pagina om de opslagplaats naar uw account te splitsen.

   Volg de aanwijzingen van GitHub om de opslagplaats te splitsen en keer hier terug zodra de bewerking is voltooid.

2. Navigeer naar het bovenliggende item van de map code-to-cloud . Als u zich nog steeds in de map code-to-cloud/src bevindt, kunt u de onderstaande opdracht gebruiken om terug te keren naar de bovenliggende map.

   cd ../..
   

3. Gebruik de volgende Git-opdracht om uw vervalste opslagplaats te klonen in de map code-to-cloud-ui :

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

   Notitie

   Als de clone opdracht mislukt, controleert u of u de opslagplaats hebt gesplitst.

4. Wijzig vervolgens de map in de src-map van de gekloonde opslagplaats.

   cd code-to-cloud-ui/src
   

De front-endtoepassing bouwen

Bash

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

Azure PowerShell

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

De uitvoer van de az acr build opdracht toont de voortgang van de upload van de broncode naar Azure en de details van de docker build bewerking.

1. Met de volgende opdracht wordt een containerinstallatiekopieën voor de gebruikersinterface van het album gebouwd en gelabeld met de volledig gekwalificeerde naam van de ACR-aanmeldingsserver. De . aan het einde van de opdracht vertegenwoordigt de docker-buildcontext, wat betekent dat deze opdracht moet worden uitgevoerd in de src-map waar het Dockerfile zich bevindt.

   Bash

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

   Azure PowerShell

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

De installatiekopieën naar uw ACR-register pushen

1. Meld u eerst aan bij uw Azure Container Registry.

   Bash

   az acr login --name $ACR_NAME
   

   Azure PowerShell

   az acr login --name $ACRName
   

2. Push nu de installatiekopieën naar het register.

   Bash

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

   Azure PowerShell

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

Communiceren tussen container-apps

In de vorige quickstart is de album-API geïmplementeerd door een container-app te maken en extern inkomend verkeer in te schakelen. Als u het inkomend verkeer van de container-app instelt op extern , is de URL van het HTTP-eindpunt openbaar beschikbaar gemaakt.

U kunt nu de front-endtoepassing configureren om het API-eindpunt aan te roepen door de volgende stappen uit te voeren:

• Voer een query uit voor de API-toepassing voor de FQDN (Fully Qualified Domain Name).
• Geef de API-FQDN door als az containerapp create een omgevingsvariabele, zodat de UI-app de basis-URL voor de album-API-aanroep in de code kan instellen.

De UI-toepassing maakt gebruik van het eindpunt dat is opgegeven om de album-API aan te roepen. De volgende code is een fragment uit de code die wordt gebruikt in de routes > index.js bestand.

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

U ziet hoe de eigenschap de baseURL waarde van de API_BASE_URL omgevingsvariabele ophaalt.

Voer de volgende opdracht uit om een query uit te voeren voor het API-eindpuntadres.

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

Nu u de API_BASE_URL variabele hebt ingesteld met de FQDN-naam van de album-API, kunt u deze opgeven als een omgevingsvariabele voor de front-endcontainer-app.

Front-endtoepassing implementeren

Maak en implementeer uw container-app met de volgende opdracht.

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

Door het argument --env-vars "API_BASE_URL=https://$API_ENDPOINT" toe te az containerapp createvoegen, definieert u een omgevingsvariabele voor uw front-endtoepassing. Met deze syntaxis wordt de benoemde API_BASE_URL omgevingsvariabele ingesteld op de FQDN van de API.

De uitvoer van de az containerapp create opdracht toont de URL van de front-endtoepassing.

Azure PowerShell

Als u de container-app wilt maken, maakt u sjabloonobjecten die u als argumenten doorgeeft aan de New-AzContainerApp opdracht.

Maak een sjabloonobject om de parameters voor de containerinstallatiekopieën te definiëren. De benoemde API_BASE_URL omgevingsvariabele is ingesteld op de FQDN van de 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

Voer de volgende opdracht uit om uw registerreferenties op te halen.

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

Maak een registerreferentieobject om uw registergegevens te definiëren en een geheim object om uw registerwachtwoord te definiëren. De PasswordSecretRef in $RegistryObj verwijst naar de 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

Haal uw omgevings-id op.

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

Maak de 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

Website bekijken

Gebruik de FQDN van de container-app om de website weer te geven. De pagina lijkt op de volgende schermopname.

Resources opschonen

Als u deze toepassing niet wilt blijven gebruiken, voert u de volgende opdracht uit om de resourcegroep te verwijderen, samen met alle resources die in deze quickstart zijn gemaakt.

Let op

Met deze opdracht verwijdert u de opgegeven resourcegroep en alle resources erin. Als resources buiten het bereik van deze zelfstudie in de opgegeven resourcegroep bestaan, worden ze ook verwijderd.

Bash

az group delete --name $RESOURCE_GROUP

Azure PowerShell

Remove-AzResourceGroup -Name $ResourceGroup -Force

Tip

Ondervindt u problemen? Laat het ons weten op GitHub door een probleem te openen in de Azure Container Apps-opslagplaats.

Volgende stappen

Omgevingen in Azure Container Apps