Tutorial: Komunikasi antara layanan mikro di Azure Container Apps

Azure Container Apps mengekspos setiap aplikasi kontainer melalui nama domain jika ingress diaktifkan. Titik akhir Ingress untuk aplikasi kontainer dalam lingkungan eksternal dapat diakses secara publik atau hanya tersedia untuk aplikasi kontainer lain di lingkungan yang sama.

Setelah Mengetahui nama domain yang sepenuhnya memenuhi syarat untuk aplikasi kontainer tertentu, Anda dapat melakukan panggilan langsung ke layanan dari aplikasi kontainer lain dalam lingkungan bersama.

Dalam tutorial ini, Anda menyebarkan aplikasi kontainer kedua yang melakukan panggilan layanan langsung ke API yang disebarkan dalam mulai cepat Sebarkan kode Anda ke Azure Container Apps .

Cuplikan layar berikut menunjukkan layanan mikro UI yang disebarkan ke aplikasi kontainer di akhir artikel ini.

Cuplikan layar layanan mikro antarmuka pengguna daftar album.

Dalam tutorial ini, Anda mempelajari caranya:

Menyebarkan aplikasi front end ke Azure Container Apps
Menautkan aplikasi ujung depan ke titik akhir API yang disebarkan di mulai cepat sebelumnya
Verifikasi bahwa aplikasi frontend dapat berkomunikasi dengan API back end

Prasyarat

Dalam mulai cepat kode ke cloud, API web back end disebarkan untuk mengembalikan daftar album musik. Jika Anda tidak menyebarkan layanan mikro API album, kembali ke Mulai Cepat: Sebarkan kode Anda ke Azure Container Apps untuk melanjutkan.

Tentukan variabel berikut dalam shell bash Anda.

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

Sebelum Anda menjalankan perintah ini, pastikan untuk mengganti <YOUR_GITHUB_USERNAME> dengan nama pengguna GitHub Anda.

Selanjutnya, tentukan nama registri kontainer yang unik untuk Anda.

ACR_NAME="acaalbums"$GITHUB_USERNAME

Tentukan variabel berikut di konsol PowerShell Anda.

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

Sebelum Anda menjalankan perintah ini, pastikan untuk mengganti <YOUR_GITHUB_USERNAME> dengan nama pengguna GitHub Anda.

Selanjutnya, tentukan nama registri kontainer yang unik untuk Anda.

$ACRName = "acaalbums"+$GITHUB_USERNAME

Masuk ke Azure CLI.

Bash
PowerShell

az login

az login

Bash
PowerShell

az acr login --name $ACR_NAME

az acr login --name $ACRName

Menyiapkan repositori GitHub

Di tab browser baru, navigasikan ke repositori untuk aplikasi UI dan pilih tombol Fork di bagian atas halaman untuk membuat fork repositori ke akun Anda.

Ikuti perintah dari GitHub untuk membuat fork repositori dan kembali ke sini setelah operasi selesai.
Navigasikan ke induk folder code-to-cloud . Jika Anda masih berada di direktori code-to-cloud/src , Anda dapat menggunakan perintah di bawah ini untuk kembali ke folder induk.
```
cd ../..
```
Gunakan perintah git berikut untuk mengkloning repositori fork Anda ke folder code-to-cloud-ui :
```
git clone https://github.com/$GITHUB_USERNAME/containerapps-albumui.git code-to-cloud-ui
```
Catatan

clone Jika perintah gagal, periksa apakah Anda telah berhasil mencabut repositori.
Selanjutnya, ubah direktori menjadi folder src repositori kloning.
```
cd code-to-cloud-ui/src
```

Membangun aplikasi front end

Bash
PowerShell

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

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

Output dari az acr build perintah menunjukkan kemajuan pengunggahan kode sumber ke Azure dan detail docker build operasi.

Perintah berikut membangun gambar kontainer untuk UI album dan menandainya dengan nama server login ACR yang sepenuhnya memenuhi syarat. . Di akhir perintah mewakili konteks build docker, yang berarti perintah ini harus dijalankan dalam folder src tempat Dockerfile berada.
- Bash
- PowerShell
```
docker build --tag "$ACR_NAME.azurecr.io/albumapp-ui" . 
```
```
docker build --tag "$ACRName.azurecr.io/albumapp-ui" . 
```

Dorong gambar ke registri ACR Anda

Pertama, masuk ke Azure Container Registry Anda.
- Bash
- PowerShell
```
az acr login --name $ACR_NAME
```
```
az acr login --name $ACRName
```

Sekarang, dorong gambar ke registri Anda.

Bash
PowerShell

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

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

Berkomunikasi antar aplikasi kontainer

Pada mulai cepat sebelumnya, API album disebarkan dengan membuat aplikasi kontainer dan mengaktifkan ingress eksternal. Mengatur ingress aplikasi kontainer ke eksternal membuat URL titik akhir HTTP-nya tersedia untuk umum.

Sekarang Anda dapat mengonfigurasi aplikasi front end untuk memanggil titik akhir API dengan melalui langkah-langkah berikut:

Kueri aplikasi API untuk nama domain yang sepenuhnya memenuhi syarat (FQDN).
Teruskan API FQDN ke az containerapp create sebagai variabel lingkungan sehingga aplikasi UI dapat mengatur URL dasar untuk panggilan API album dalam kode.

Aplikasi UI menggunakan titik akhir yang disediakan untuk memanggil API album. Kode berikut adalah kutipan dari kode yang digunakan dalam rute > index.js file.

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

Perhatikan bagaimana baseURL properti mendapatkan nilainya dari API_BASE_URL variabel lingkungan.

Jalankan perintah berikut untuk mengkueri alamat titik akhir API.

Bash
PowerShell

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

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

Sekarang setelah API_BASE_URL Anda mengatur variabel dengan FQDN dari API album, Anda dapat menyediakannya sebagai variabel lingkungan ke aplikasi kontainer frontend.

Menyebarkan aplikasi front end

Buat dan sebarkan aplikasi kontainer Anda dengan perintah berikut.

Bash
PowerShell

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

Dengan menambahkan argumen --env-vars "API_BASE_URL=https://$API_ENDPOINT" ke az containerapp create, Anda menentukan variabel lingkungan untuk aplikasi ujung depan Anda. Dengan sintaks ini, variabel lingkungan bernama API_BASE_URL diatur ke FQDN API.

Output dari az containerapp create perintah menunjukkan URL aplikasi front end.

Untuk membuat aplikasi kontainer, buat objek templat yang Anda teruskan sebagai argumen ke New-AzContainerApp perintah .

Buat objek templat untuk menentukan parameter gambar kontainer Anda. Variabel lingkungan bernama API_BASE_URL diatur ke FQDN 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

Jalankan perintah berikut untuk mendapatkan kredensial registri Anda.

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

Buat objek kredensial registri untuk menentukan informasi registri Anda, dan objek rahasia untuk menentukan kata sandi registri Anda. in PasswordSecretRef$RegistryObj mengacu pada Name di $SecretObj.

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

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

Dapatkan ID lingkungan Anda.

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

Buat aplikasi kontainer.

$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

Melihat situs web

Gunakan FQDN aplikasi kontainer untuk melihat situs web. Halaman ini menyerupan cuplikan layar berikut.

Cuplikan layar layanan mikro antarmuka pengguna daftar album.

Membersihkan sumber daya

Jika Anda tidak akan terus menggunakan aplikasi ini, jalankan perintah berikut untuk menghapus grup sumber daya bersama dengan semua sumber daya yang dibuat dalam mulai cepat ini.

Perhatian

Perintah ini menghapus grup sumber daya yang ditentukan dan semua sumber daya yang terkandung di dalamnya. Jika sumber daya di luar lingkup artikel ini ada di grup sumber daya yang ditentukan, sumber daya tersebut juga akan dihapus.

Bash
PowerShell

az group delete --name $RESOURCE_GROUP

az group delete --name $RESOURCE_GROUP

Tip

Mengalami masalah? Beri tahu kami di GitHub dengan membuka masalah di repositori Azure Container Apps.

Langkah berikutnya

Lingkungan di Aplikasi Kontainer Azure

Saran dan Komentar

Apakah halaman ini membantu?

Last updated on 2025-02-25