البرنامج التعليمي: الاتصال بين الخدمات المصغرة في Azure Container Apps

تعرض تطبيقات حاويات Azure كل تطبيق حاوية من خلال اسم مجال إذا تم تمكين الدخول . يمكن أن تكون نقاط نهاية الدخول لتطبيقات الحاوية داخل بيئة خارجية إما متاحة للجمهور أو متاحة فقط لتطبيقات الحاويات الأخرى في نفس البيئة.

بمجرد معرفة اسم المجال المؤهل بالكامل لتطبيق حاوية معين، يمكنك إجراء مكالمات مباشرة إلى الخدمة من تطبيقات الحاويات الأخرى داخل البيئة المشتركة.

في هذا البرنامج التعليمي، يمكنك نشر تطبيق حاوية ثان يقوم بإجراء استدعاء خدمة مباشر إلى واجهة برمجة التطبيقات المنشورة في التشغيل السريع نشر التعليمات البرمجية الخاصة بك إلى Azure Container Apps .

تظهر لقطة الشاشة التالية الخدمة المصغرة لواجهة المستخدم التي يتم نشرها في تطبيقات الحاوية في نهاية هذه المقالة.

ستتعرف في هذا البرنامج التعليمي على:

• نشر تطبيق واجهة أمامية إلى Azure Container Apps
• ربط تطبيق الواجهة الأمامية بنقطة نهاية واجهة برمجة التطبيقات المنشورة في التشغيل السريع السابق
• تحقق من أن تطبيق الواجهة الأمامية يمكنه الاتصال بواجهة برمجة التطبيقات الخلفية

المتطلبات الأساسية

في التشغيل السريع للتعليمات البرمجية إلى السحابة، يتم نشر واجهة برمجة تطبيقات الويب الخلفية لإرجاع قائمة ألبومات الموسيقى. إذا لم تقم بنشر الخدمة المصغرة لواجهة برمجة التطبيقات الألبوم، فارجع إلى التشغيل السريع: نشر التعليمات البرمجية الخاصة بك إلى Azure Container Apps للمتابعة.

الإعداد

Bash

حدد المتغيرات التالية في 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>"

قبل تشغيل هذا الأمر، تأكد من استبدال <YOUR_GITHUB_USERNAME> باسم مستخدم GitHub الخاص بك.

بعد ذلك، حدد اسم سجل حاوية فريدا لك.

ACR_NAME="acaalbums"$GITHUB_USERNAME

بوويرشيل

حدد المتغيرات التالية في وحدة تحكم PowerShell.

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

قبل تشغيل هذا الأمر، تأكد من استبدال <YOUR_GITHUB_USERNAME> باسم مستخدم GitHub الخاص بك.

بعد ذلك، حدد اسم سجل حاوية فريدا لك.

$ACRName = "acaalbums"+$GITHUB_USERNAME

تسجيل الدخول إلى Azure CLI.

Bash

az login

بوويرشيل

az login

Bash

az acr login --name $ACR_NAME

بوويرشيل

az acr login --name $ACRName

إعداد مستودع GitHub

1. في علامة تبويب متصفح جديدة، انتقل إلى مستودع تطبيق واجهة المستخدم وحدد الزر نسخة المستودع في أعلى الصفحة لتشعب المستودع إلى حسابك.

   اتبع المطالبات من GitHub لتشعب المستودع والعودة إلى هنا بمجرد اكتمال العملية.

2. انتقل إلى أصل مجلد التعليمات البرمجية إلى السحابة . إذا كنت لا تزال في الدليل code-to-cloud/src ، يمكنك استخدام الأمر أدناه للعودة إلى المجلد الأصل.

   cd ../..
   

3. استخدم الأمر git التالي لاستنساخ المستودع المتشعب في مجلد code-to-cloud-ui :

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

   إشعار

   clone إذا فشل الأمر، فتحقق من أنك قمت بنسخ المستودع بنجاح.

4. بعد ذلك، قم بتغيير الدليل إلى المجلد src من المستودع المستنسخ.

   cd code-to-cloud-ui/src
   

إنشاء تطبيق الواجهة الأمامية

Bash

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

بوويرشيل

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

يظهر الإخراج من az acr build الأمر تقدم تحميل التعليمات البرمجية المصدر إلى Azure وتفاصيل docker build العملية.

1. ينشئ الأمر التالي صورة حاوية لواجهة مستخدم الألبوم ويوسمها باسم مؤهل بالكامل لخادم تسجيل الدخول إلى ACR. . يمثل في نهاية الأمر سياق بناء docker، مما يعني أنه يجب تشغيل هذا الأمر داخل مجلد src حيث يوجد Dockerfile.

   Bash

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

   بوويرشيل

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

دفع الصورة إلى سجل ACR الخاص بك

1. أولا، سجل الدخول إلى Azure Container Registry.

   Bash

   az acr login --name $ACR_NAME
   

   بوويرشيل

   az acr login --name $ACRName
   

2. الآن، ادفع الصورة إلى السجل الخاص بك.

   Bash

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

   بوويرشيل

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

التواصل بين تطبيقات الحاوية

في التشغيل السريع السابق، تم نشر واجهة برمجة تطبيقات الألبوم عن طريق إنشاء تطبيق حاوية وتمكين الدخول الخارجي. جعل تعيين دخول تطبيق الحاوية إلى خارجي عنوان URL لنقطة نهاية HTTP الخاص به متاحا للجمهور.

يمكنك الآن تكوين تطبيق الواجهة الأمامية لاستدعاء نقطة نهاية واجهة برمجة التطبيقات من خلال المرور بالخطوات التالية:

• الاستعلام عن تطبيق API لاسم المجال المؤهل بالكامل (FQDN).
• مرر API FQDN إلى az containerapp create كمتغير بيئة حتى يتمكن تطبيق واجهة المستخدم من تعيين عنوان URL الأساسي لاستدعاء واجهة برمجة تطبيقات الألبوم داخل التعليمات البرمجية.

يستخدم تطبيق واجهة المستخدم نقطة النهاية المتوفرة لاستدعاء واجهة برمجة تطبيقات الألبوم. التعليمات البرمجية التالية هي مقتطف من التعليمات البرمجية المستخدمة في التوجيهات > index.js الملف.

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

لاحظ كيف تحصل الخاصية baseURL على قيمتها من API_BASE_URL متغير البيئة.

قم بتشغيل الأمر التالي للاستعلام عن عنوان نقطة نهاية API.

Bash

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

الآن بعد أن قمت بتعيين API_BASE_URL المتغير باستخدام FQDN لواجهة برمجة تطبيقات الألبوم، يمكنك توفيره كمتغير بيئة لتطبيق الحاوية الأمامية.

نشر تطبيق الواجهة الأمامية

إنشاء تطبيق الحاوية ونشره باستخدام الأمر التالي.

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

بإضافة الوسيطة --env-vars "API_BASE_URL=https://$API_ENDPOINT" إلى az containerapp create، يمكنك تعريف متغير بيئة لتطبيق الواجهة الأمامية. باستخدام بناء الجملة هذا، يتم تعيين متغير البيئة المسمى API_BASE_URL إلى FQDN لواجهة برمجة التطبيقات.

يظهر الإخراج من az containerapp create الأمر عنوان URL لتطبيق الواجهة الأمامية.

بوويرشيل

لإنشاء تطبيق الحاوية، قم بإنشاء كائنات القالب التي تمررها كوسيطات إلى New-AzContainerApp الأمر .

إنشاء كائن قالب لتعريف معلمات صورة الحاوية. يتم تعيين متغير البيئة المسمى API_BASE_URL إلى FQDN لواجهة برمجة التطبيقات.

$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

قم بتشغيل الأمر التالي للحصول على بيانات اعتماد السجل.

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

قم بإنشاء كائن بيانات اعتماد السجل لتعريف معلومات السجل، وعنصر سري لتعريف كلمة مرور السجل. يشير في PasswordSecretRef إلى في Name$SecretObj.$RegistryObj

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

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

احصل على معرف البيئة الخاص بك.

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

إنشاء تطبيق الحاوية.

$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

عرض موقع الويب

استخدم FQDN الخاص بتطبيق الحاوية لعرض موقع الويب. تشبه الصفحة لقطة الشاشة التالية.

تنظيف الموارد

في حال عدم استمرارك في استخدام هذا التطبيق، فقم بتشغيل الأمر التالي لحذف مجموعة الموارد مع جميع الموارد التي تم إنشاؤها في هذا التشغيل السريع.

تنبيه

يحذف هذا الأمر مجموعة الموارد المحددة وجميع الموارد المضمنة فيها. إذا كانت هناك موارد خارج نطاق هذا البرنامج التعليمي موجودة في مجموعة الموارد المحددة، فسيتم حذفها أيضاً.

Bash

az group delete --name $RESOURCE_GROUP

بوويرشيل

az group delete --name $RESOURCE_GROUP

تلميح

هل تواجه مشكلات؟ اسمحوا لنا أن نعرف على GitHub عن طريق فتح مشكلة في Azure Container Apps repo.

الخطوات التالية

البيئات في Azure Container Apps