تمرين - دمج تطبيق الويب Next.js مع البينة الأساسية لبيانات IoT

  • 20 دقائق

يوفر هذا التمرين نظرة عامة على دمج Next.js مع البينة الأساسية لبيانات IoT.

في هذا التمرين، ستقوم بما يلي:

  • تكوين تطبيق Next.js.
  • نشر تطبيق ويب Azure يستضيف تطبيق Next.js.
  • تحقق من وظيفة تطبيق ويب Azure.

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

لتشغيل هذه العملية تحتاج إلى:

  • اشتراك Azure.
  • حساب Microsoft أو حساب Microsoft Entra مع دور global مسؤول istrator في مستأجر Microsoft Entra. يجب أن يكون المستأجر مقترنا باشتراك Azure وبدور المالك أو المساهم في اشتراك Azure.
  • لإكمال وحدات التمرين قم بإعداد Azure Cosmos DB ودمج Azure Cosmos DB مع مسار بيانات IoT.

في هذا التمرين، يمكنك استخدام رمز تطبيق Next.js موجود يسترد بيانات القياس عن بعد ل IoT من مجموعة Cosmos DB التي نفذتها في وحدة التمرين السابقة من هذه الوحدة النمطية.

تكوين تطبيق Next.js.

تكوين نموذج تطبيق Next.js يسترد البيانات من مجموعة Cosmos DB.

  1. ابدأ تشغيل مستعرض ويب، وانتقل إلى مدخل Microsoft Azure وسجل الدخول إلى اشتراك Azure الذي تستخدمه لهذه الوحدة النمطية.

  2. في مدخل Microsoft Azure، في شريط الأدوات، حدد أيقونة Cloud Shell الموجودة بجوار مربع البحث.

    إشعار

    بدلا من ذلك، يمكنك الوصول إلى Cloud Shell مباشرة عن طريق التنقل إلى https://shell.azure.com.

  3. إذا تمت مطالبتك بتحديد إما Bash أو PowerShell، فحدد Bash.

    إشعار

    إذا كانت هذه هي المرة الأولى التي تبدأ فيها Cloud Shell وتم عرض الرسالة You have no storage mounted، فحدد الاشتراك الذي تستخدمه في هذا المختبر، ثم حدد Create storage.

  4. قم بتشغيل الأمر التالي لاستنساخ مستودع GitHub الذي يحتوي على نموذج التعليمات البرمجية للتطبيق Next.js لهذا التمرين.

    git clone https://github.com/MicrosoftDocs/mslearn-cloud-native-apps.git

  5. قم بتشغيل الأمر التالي للتبديل إلى الدليل الذي يحتوي على نسخة مستودع GitHub.

    cd ./mslearn-cloud-native-apps/m05u08/

  6. قم بتشغيل الأمر التالي لعرض محتوى ملف index.js . يحتوي هذا الملف على البرنامج النصي Next.js الذي ينشئ اتصالا بحساب Cosmos DB الذي أنشأته في التمرين الأول من هذه الوحدة النمطية. كما أنه يستعلم عن محتوى iotcollection في قاعدة بيانات iotdb التي قمت بإنشائها في التمرين الثاني من هذه الوحدة.

    cat ./pages/index.js

  7. قم بتشغيل الأمر التالي لعرض محتوى ملف config.js . يخزن هذا الملف القيم التي تمثل نقطة نهاية Cosmos DB SQL API. كما أنه يخزن مفتاح الوصول المقابل، وقاعدة البيانات الهدف والحاوية التي تستضيف بيانات IoT التي جمعتها في التمرين السابق لهذه الوحدة.

    cat ./config.js

    إشعار

    أسماء قاعدة البيانات والحاوية معبأة مسبقا. بعد ذلك، ستقوم بتعيين قيم نقطة النهاية ومفتاح الوصول المطابق.

  8. قم بتشغيل الأوامر التالية لاسترداد قيم نقطة نهاية Cosmos DB SQL API ومفتاح الوصول المقابل، ثم تخزينها في متغيرات مؤقتة.

    RG1NAME=cosmos-db-RG
ACCOUNTNAME=$(az cosmosdb list --resource-group $RG1NAME --query "[0].name" --output tsv)
ENDPOINT=$(az cosmosdb show --name $ACCOUNTNAME --resource-group $RG1NAME --query "locations[0].documentEndpoint" --output tsv)
KEY=$(az cosmosdb keys list --name $ACCOUNTNAME --resource-group $RG1NAME --query "primaryMasterKey" --output tsv)

  9. من جلسة Bash في جزء Cloud Shell ، قم بتشغيل الأوامر التالية لاستبدال العناصر النائبة في ملف config.js بالقيم التي قمت باستردادها في الخطوة السابقة.

     ENDPOINT="$(echo $ENDPOINT | sed -e 's/\\/\\\\/g; s/\//\\\//g; s/&/\\\&/g')"
 sed -i 's/"COSMOS_DB_SQL_API_ENDPOINT"/"'"$ENDPOINT"'"/' ./config.js

 KEY="$(echo $KEY | sed -e 's/\\/\\\\/g; s/\//\\\//g; s/&/\\\&/g')"
 sed -i 's/"COSMOS_DB_ACCESS_KEY"/"'"$KEY"'"/' ./config.js

  10. من جلسة Bash في جزء Cloud Shell ، قم بتشغيل الأمر التالي للتحقق من أن ملف config.js يحتوي على القيم الفعلية لنقطة نهاية Cosmos DB SQL API ومفتاح الوصول المقابل.

    cat ./config.js

    إشعار

    عند هذه النقطة، يجب أن تعرف المزيد حول كيفية تثبيت حزم التبعية وبناء التطبيق. نظرا لوجود مشكلات في تعيين الإصدار، لن تتمكن من تشغيل البنية في Azure Cloud Shell. بدلا من ذلك، ستقوم بتنفيذ هذه المهمة بعد التوزيع.

توزيع تطبيق ويب Azure الذي يستضيف تطبيق Next.js

نشر تطبيق Next.js الذي تم تكوينه حديثا إلى تطبيق ويب Azure والتحقق من وظائفه.

إشعار

يمكنك نشر نفس التطبيق إلى أي خدمة Azure أخرى توفر بيئة وقت تشغيل Node.js، بما في ذلك أجهزة Azure الظاهرية أو مثيلات حاوية Azure أو خدمة Azure Kubernetes.

  1. في Azure Cloud Shell، قم بتشغيل الأوامر التالية لإنشاء مجموعة موارد لاستضافة تطبيق ويب Azure، حيث تقوم بنشر تطبيق Next.js.

    RG1NAME=cosmos-db-RG
LOCATION=$(az group show --resource-group $RG1NAME --query location --output tsv)
RG2NAME=nextjs-webapp-RG
az group create --name $RG2NAME --location $LOCATION

  2. قم بتشغيل الأوامر التالية لإنشاء خطة Azure App Service التي تستضيف تطبيق ويب Azure الجديد.

    SPNAME=nextjs-webapp-sp
az appservice plan create --name $SPNAME --resource-group $RG2NAME --sku S1

  3. قم بتشغيل الأوامر التالية لإنشاء تطبيق ويب Azure الجديد.

    WEBAPPNAME=nextjs$RANDOM$RANDOM
az webapp create --name $WEBAPPNAME --resource-group $RG2NAME --plan $SPNAME

  4. قم بتشغيل الأوامر التالية لإعادة تهيئة مستودع Git المحلي وتثبيت جميع التغييرات في الفرع الرئيسي.

    git config --global user.email "user1@adatum.com"
git config --global user.name "Adatum User"
git init
git add -A
git commit -m "Initial Commit"

  5. قم بتشغيل الأوامر التالية لإعداد بيانات اعتماد النشر على مستوى المستخدم.

    DEPLOYMENTUSER=m05u08User$RANDOM
DEPLOYMENTPASS=m05u08Pass$RANDOM$RANDOM
az webapp deployment user set --user-name $DEPLOYMENTUSER --password $DEPLOYMENTPASS

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

    echo $DEPLOYMENTUSER
echo $DEPLOYMENTPASS

  7. قم بتشغيل الأوامر التالية لتحديد عنوان URL لتوزيع تطبيق الويب Azure الذي تستخدمه كهدف git push للأمر.

    RG2NAME=nextjs-webapp-RG
WEBAPPNAME=$(az webapp list --resource-group $RG2NAME --query "[0].name" --output tsv)

DEPLOYMENTURL=$(az webapp deployment source config-local-git --name $WEBAPPNAME --resource-group $RG2NAME --output tsv)

  8. قم بتشغيل الأمر التالي لتكوين المستودع البعيد المسمى azure، والذي يمثل عنوان URL للتوزيع الذي حددته في الخطوة السابقة.

    git remote add azure $DEPLOYMENTURL

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

    git checkout -b master
git push --set-upstream azure master

    إشعار

    انتظر حتى يكتمل التوزيع. يجب أن تتلقى رسالة تفيد بأن عملية التوزيع كانت ناجحة.

  10. يمكنك إغلاق الجزء Cloud Shell.

التحقق من صحة وظائف تطبيق Azure على الويب

تحقق من صحة وظيفة تطبيق الويب Azure الذي يستضيف تطبيق Next.js.

  1. في نافذة متصفح الويب التي تعرض مدخل Microsoft Azure، استخدم مربع النص Search resources, services, and docs في أعلى صفحة مدخل Microsoft Azure للبحث عن App Services.

  2. في جزء App Services ، في قائمة مثيلات App Service، حدد الإدخال الذي يمثل تطبيق ويب Azure الذي نشرته في المهمة السابقة لهذا التمرين. يجب أن يتكون الاسم من بادئة nextjs متبوعة بسلسلة من الأرقام.

  3. في الجزء الذي يعرض خصائص تطبيق الويب، ضمن قسم أدوات التطوير، حدد إدخال محرر خدمة التطبيقات (معاينة ). ثم حدد فتح المحرر.

  4. حدد أيقونة فتح وحدة التحكم .

  5. من موجه وحدة التحكم، قم بتشغيل الأمر التالي.

    npm run build

  6. ينشئ هذا الأمر تطبيق Next.js الذي دفعته إلى تطبيق Azure على الويب.

    Screenshot of the start of the build process in the App Service Editor console of the Azure web app.

  7. انتظر حتى تكتمل البنية. قد تستغرق هذه العملية حوالي 5 دقائق.

    Screenshot of the completed build process in the App Service Editor console of the Azure web app.

  8. أغلق علامة تبويب مستعرض الويب لصفحة App Service Editor .

  9. في جزء Web App، حدد Overview. في الجزء Essentials، حدد الارتباط المسمى URL.

    إشعار

    يتم فتح علامة تبويب مستعرض ويب جديدة تعرض تطبيق ويب Azure.

  10. تحقق من أن صفحة متصفح الويب تعرض صفحة Next.js - Cosmos DB IoT telemetry data مع سرد نقاط بيانات تتبع الاستخدام لـ IoT التي تم استردادها من مجموعة Azure Cosmos DB.

    Screenshot of the page of the deployed Azure web app containing the listing of the Azure Cosmos DB items.

النتائج

تهانينا! لقد أكملت التمرين الثالث من هذه الوحدة. في هذا التمرين، قمت بإنشاء دالة Azure التي تسجل حمولة طلب HTTP. بعد ذلك، قمت بتكوين قواعد القياس عن بعد ل IoT لتطبيق Azure IoT Central والتحقق من صحتها. وأخيرا، قمت بإنشاء حساب Azure Storage الذي يخزن القياس عن بعد ل IoT، وتكوين تصدير البيانات من تطبيق Azure IoT Central والتحقق من صحته.

تفريغ مجموعة الموارد

لتجنب الرسوم غير الضرورية من استخدام موارد Azure، احذف مجموعات موارد cosmos-db-RG و nextjs-webapp-RG و function-app-RG التي قمت بإنشائها في هذا التمرين. في مدخل Microsoft Azure، انتقل إلى كل مجموعة من مجموعات الموارد هذه، ثم حدد إدخال حذف مجموعة الموارد في شريط الأدوات. في مربع النص TYPE THE RESOURCE GROUP NAME، أدخل اسم مجموعة الموارد، وحدد Delete.