نشر تطبيق ويب Node.js + MongoDB إلى Azure

  • مقالة
  • قراءة خلال 24 دقائق

في هذا البرنامج التعليمي، ستقوم بنشر نموذج Express.js التطبيق باستخدام قاعدة بيانات MongoDB إلى Azure. سيتم استضافة تطبيق Express.js في Azure App Service، الذي يدعم استضافة تطبيقات Node.js في كل من بيئات خوادم Linux (إصدارات Node 12 و14 و16) و Windows (الإصداران 12 و14). سيتم استضافة قاعدة بيانات MongoDB في Azure Cosmos DB ، وهي قاعدة بيانات سحابية أصلية تقدم واجهة برمجة تطبيقات متوافقة مع MongoDB بنسبة 100٪.

A diagram showing how the Express.js app will be deployed to Azure App Service and the MongoDB data will be hosted inside of Azure Cosmos DB.

تفترض هذه المقالة أنك على دراية بالفعل بالتطويرNode.js ولديك Node و MongoDB مثبتة محليا. ستحتاج أيضا إلى حساب Azure مع اشتراك نشط. إذا لم يكن لديك حساب Azure، فيمكنك إنشاء حساب مجانا.

تطبيق العينة

لمتابعة هذا البرنامج التعليمي ، قم باستنساخ أو تنزيل نموذج التطبيق من المستودع https://github.com/Azure-Samples/msdocs-nodejs-mongodb-azure-sample-app.

git clone https://github.com/Azure-Samples/msdocs-nodejs-mongodb-azure-sample-app.git

اتبع الخطوات التالية لتشغيل التطبيق محليا:

  • تثبيت تبعيات الحزمة عن طريق تشغيل npm install.
  • انسخ .env.sample الملف إلى .env قيمة DATABASE_URL وقم بتعبئتها بعنوان URL ل MongoDB (على سبيل المثال mongodb://localhost:27017/).
  • بدء تشغيل التطبيق باستخدام npm start.
  • لعرض التطبيق، استعرض للوصول إلى http://localhost:3000.

1 - إنشاء خدمة تطبيق Azure

يتم استخدام Azure App Service لاستضافة تطبيق الويب Express.js. عند إعداد خدمة التطبيق للتطبيق، ستحدد:

  • اسم تطبيق الويب. إنه الاسم المستخدم كجزء من اسم DNS لتطبيق الويب الخاص بك في شكل https://<app-name>.azurewebsites.net.
  • وقت التشغيل للتطبيق. إنه المكان الذي تحدد فيه إصدار العقدة لاستخدامه لتطبيقك.
  • خطة خدمة التطبيق التي تحدد موارد الحوسبة (وحدة المعالجة المركزية والذاكرة) المتوفرة للتطبيق.
  • مجموعة الموارد للتطبيق. تتيح لك مجموعة الموارد تجميع (في حاوية منطقية) جميع موارد Azure اللازمة للتطبيق.

قم بإنشاء موارد Azure باستخدام مدخل Azure أو VS Code باستخدام حزمة ملحق Azure Tools أو Azure CLI.

سجل الدخول إلى مدخل Azure واتبع الخطوات التالية لإنشاء موارد خدمة تطبيقات Azure .

الإرشادات لقطة شاشة
في مدخل Microsoft Azure:
  1. أدخل "خدمات التطبيقات" في شريط البحث أعلى مدخل Azure.
  2. حدد العنصر المسمى خدمات التطبيقات ضمن العنوان خدمات ضمن الخدمات في القائمة التي تظهر أسفل شريط البحث.
 A screenshot showing how to use the search box in the top tool bar to find App Services in Azure.
في صفحة خدمات التطبيقات ، حدد + إنشاء A screenshot showing the create button on the App Services page used to create a new web app.
في الصفحة إنشاء تطبيق ويب ، املأ النموذج كما يلي.
  1. مجموعة الموارد → حدد إنشاء جديد واستخدم اسما ل msdocs-expressjs-mongodb-tutorial.
  2. الاسم → msdocs-expressjs-mongodb-XYZ حيث XYZ هو أي ثلاثة أحرف عشوائية. يجب أن يكون هذا الاسم فريدًا عبر Azure.
  3. نشررمز →.
  4. مكدس وقت التشغيل → Node 14 LTS.
  5. نظام التشغيل → لينكس.
  6. المنطقة → أي منطقة Azure بالقرب منك.
  7. خطة Linux → حدد إنشاء جديد واستخدم اسما ل msdocs-expressjs-mongodb-plan.
  8. Sku والحجم → حدد تغيير الحجم لتحديد خطة خدمة تطبيق مختلفة.
 A screenshot showing the form to fill out to create a web app in Azure.
تتحكم خطة خدمة التطبيق في عدد الموارد (وحدة المعالجة المركزية/الذاكرة) المتوفرة لتطبيقك وتكلفة هذه الموارد. يمكنك معرفة المزيد حول اختيار خطة خدمة التطبيقات في المقالة نظرة عامة على خطة خدمة التطبيق. للحصول على قائمة كاملة بخطط خدمة التطبيقات، راجع صفحة تسعير خدمة التطبيقات .

في هذا المثال، حدد Dev/Test في أعلى الشاشة وحدد خطة B1 (الأساسية). ستتحمل خطة B1 Basic رسوما صغيرة على حساب Azure الخاص بك ولكنها توفر أداء أفضل من خطة F1 (المجانية).

عند الانتهاء، حدد تطبيق لتطبيق التغييرات.		 A screenshot of the Spec Picker dialog that lets you select the App Service plan to use for your web app.
في صفحة إنشاء تطبيق ويب الرئيسية، حدد الزر *مراجعة + إنشاء في أسفل الشاشة.

سينقلك هذا إلى صفحة المراجعة . حدد إنشاء لإنشاء خدمة التطبيق.		 A screenshot of the main web app create page showing the button to select on to create your web app in Azure.

2 - إنشاء قاعدة بيانات Azure Cosmos في وضع توافق MongoDB

Azure Cosmos DB هي قاعدة بيانات NoSQL تدار بشكل كامل لتطوير التطبيقات الحديثة. من بين ميزاته واجهة برمجة تطبيقات متوافقة مع MongoDB بنسبة 100٪ تسمح لك باستخدام أدوات وحزم وتطبيقات MongoDB الحالية مع Cosmos DB.

يجب عليك تسجيل الدخول إلى مدخل Azure لإنهاء هذه الخطوات لإنشاء قاعدة بيانات Cosmos.

الإرشادات لقطة شاشة
في مدخل Microsoft Azure:

  1. في شريط البحث أعلى مدخل Azure، أدخل "Cosmos DB".

  2. في القائمة التي تظهر أسفل شريط البحث، ضمن Services، حدد العنصر المسمى Azure Cosmos DB.

 A screenshot showing how to use the search box in the top tool bar to find Cosmos DB in Azure.
في صفحة قاعدة بيانات Azure Cosmos ، حدد + إنشاء A screenshot showing the create button on the Cosmos DB page used to create a database.
ستظهر صفحة تطلب منك تحديد خيار واجهة برمجة التطبيقات لقاعدة بيانات Cosmos DB. اختر Azure Cosmos DB API for MongoDB. A screenshot showing the page where you select the MongoDB API for your Cosmos DB.
في الصفحة إنشاء حساب Azure Cosmos DB ، املأ النموذج كما يلي.

  1. بالنسبة إلى مجموعة الموارد، اختر مجموعة الموارد نفسها من القائمة المنسدلة التي استخدمتها لتطبيق الويب الخاص بك في App Service (msdocs-expressjs-mongodb-quickstart). هذا منطقيا يجمع معا جميع المكونات اللازمة لهذا التطبيق معا في نفس مجموعة الموارد لتسهيل الاكتشاف والإدارة.

  2. أدخل اسم حسابmsdocs-expressjs-mongodb-database-XYZ لاسم مثيل Azure CosmosDb حيث XYZ هو أي ثلاثة أحرف فريدة. يجب أن تكون أسماء حسابات قاعدة بيانات Cosmos فريدة عبر Azure. يجب أن يتراوح طول الاسم بين 3 و 44 حرفا وأن يحتوي فقط على أحرف صغيرة وأرقام ورمز الواصلة (-).

  3. بالنسبة إلى الموقع، حدد نفس موقع Azure الذي استخدمته لتطبيق ويب خدمة التطبيق. من المهم استضافة التطبيق وقاعدة البيانات في نفس موقع Azure لتقليل زمن انتقال الشبكة بين المكونات المختلفة للحل.

  4. إذا كان خصم الطبقة المجانية متاحا لحسابك، فيمكنك تطبيقه.

  5. حدد مراجعة + إنشاء للانتقال إلى صفحة التأكيد، ثم حدد إنشاء لإنشاء قاعدة البيانات.

عادة ما يستغرق إنشاء Azure CosmosDB جديد حوالي 5 دقائق.		 A screenshot showing how to fill out the page to create a new Cosmos DB.

3 - الاتصال خدمة التطبيق الخاصة بك إلى قاعدة بيانات Cosmos الخاصة بك

للاتصال بقاعدة بيانات Cosmos DB، تحتاج إلى توفير سلسلة الاتصال الخاصة بقاعدة البيانات بالتطبيق الخاص بك. يتم ذلك في تطبيق العينة عن طريق قراءة DATABASE_URL متغير البيئة. عند تشغيله محليا، يستخدم التطبيق النموذجي حزمة dotenv لقراءة قيمة سلسلة الاتصال من .env الملف.

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

الإرشادات لقطة شاشة
انتقل إلى حساب قاعدة بيانات Cosmos الخاص بك. إذا كنت قد أنشأت للتو حساب Cosmos DB الخاص بك ، فيمكنك تحديد الزر " الانتقال إلى المورد" ليتم نقله مباشرة إلى الحساب. أو يمكنك استخدام مربع البحث في الجزء العلوي من الشاشة للبحث عن قاعدة بيانات Cosmos DB والانتقال إليها.
  1. في الصفحة الخاصة بقاعدة بيانات Cosmos، تأكد من تحديد عنصر البدء السريع في القائمة اليمنى. سترى مربع نص يسمى سلسلة الاتصال الأساسية. على الرغم من وجود علامات تبويب للغات مختلفة ، إلا أن سلسلة الاتصال هي نفسها بغض النظر عن اللغة.
  2. انسخ قيمة سلسلة الاتصال إلى المخزن المؤقت للحافظة.
 A screenshot showing the location of the Cosmos DB connection string on the Cosmos DB quick start page.
انتقل مرة أخرى إلى مثيل خدمة التطبيق لتعيين سلسلة الاتصال لتطبيق الويب الخاص بك.

  1. في مربع البحث أعلى الشاشة، اكتب اسم خدمة التطبيق (msdocs-expressjs-mongodb-XYZ).
  2. حدد خدمة التطبيق عند ظهورها ضمن قسم الموارد في مربع الحوار للانتقال إلى خدمة التطبيقات.
 A screenshot showing how to search for and go to the App Service, where the connection string needs to store the connection string.
في صفحة خدمة التطبيقات:
  1. حدد عنصر التكوين ضمن الإعدادات.
  2. في قسم إعدادات التطبيق (وليس قسم سلاسل الاتصال)، حدد عنصر القائمة + إعداد تطبيق جديد لإضافة إعداد .
 A screenshot showing how to use the Application settings within an App Service.
في مربع الحوار إضافة/تحرير إعداد التطبيق ، قم بتعيين اسم الإعداد إلى DATABASE_URL لمطابقة الاسم المستخدم في التعليمات البرمجية للتطبيق. ثم الصق قيمة سلسلة الاتصال لقاعدة البيانات الخاصة بك في حقل القيمة . حدد موافق لحفظ هذا الإعداد. A screenshot showing the dialog used to set an application setting in Azure App Service.

4 - نشر التعليمات البرمجية للتطبيق إلى Azure

تدعم خدمة Azure App طرقا متعددة لنشر التعليمات البرمجية للتطبيق على Azure بما في ذلك دعم إجراءات GitHub وجميع أدوات CI/CD الرئيسية. تركز هذه المقالة على كيفية نشر التعليمات البرمجية من محطة العمل المحلية إلى Azure.

لنشر التعليمات البرمجية للتطبيق مباشرة من VS Code، يجب أن يكون لديك حزمة ملحق Azure Tools مثبتة وأن يتم تسجيل الدخول إلى Azure من VS Code.

تنزيل حزمة ملحقات أدوات Azure

الإرشادات لقطة شاشة
حدد موقع أيقونة Azure في شريط الأدوات الأيمن وحددها لإظهار ملحق Azure Tools for VS Code. A screenshot showing the location of the Azure Tool icon in Visual Studio Code.
ابحث عن قسم خدمة التطبيقات في ملحق أدوات Azure ثم حدد موقع تطبيق الويب الخاص بك ضمن الاشتراك الصحيح. انقر بزر الماوس الأيمن فوق تطبيق الويب ثم حدد نشر إلى تطبيق الويب ... من القائمة. A screenshot showing how you deploy an application to Azure by right-clicking on a web app in VS Code and selecting deploy from the context menu.
سيظهر مربع حوار في أعلى النافذة لاختيار الدليل المراد النشر منه. اختر الدليل الجذر لمكان وجود التعليمات البرمجية المصدر للتطبيق الخاص بك.

سيطالبك مربع حوار بتشغيل أوامر الإنشاء على الخادم الهدف. ستؤدي الإجابة بنعم على هذا السؤال إلى تحسين الأداء لعمليات النشر المستقبلية.		 A screenshot showing the dialog box used to select the deployment directory in VS Code.
سيظهر إشعار في الزاوية السفلية اليسرى من VS Code لإبلاغك بأن النشر جار. عند اكتمال النشر، سيتم استبدال هذا الإعلام بمربع حوار يسمح لك بالاستعراض إلى موقع ويب. A screenshot showing the Output window of VS Code while deploying an application to Azure.

5 - تصفح التطبيق

سيكون للتطبيق عنوان URL للنموذج https://<app name>.azurewebsites.net. استعرض للوصول إلى عنوان URL هذا لعرض التطبيق.

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

A screenshot showing the application running in a browser.

6 - تكوين وعرض سجلات التطبيق

تلتقط Azure App Service جميع الرسائل المسجلة إلى وحدة التحكم لمساعدتك في تشخيص المشكلات المتعلقة بتطبيقك. يقوم نموذج التطبيق بإخراج رسائل سجل وحدة التحكم في كل نقطة من نقاط النهاية الخاصة به لإظهار هذه القدرة. على سبيل المثال، get تقوم نقطة النهاية بإخراج رسالة حول عدد المهام التي تم استردادها من قاعدة البيانات وتظهر رسالة خطأ إذا حدث خطأ ما.

/* GET home page. */
router.get('/', function(req, res, next) {
  Task.find()
    .then((tasks) => {      
      const currentTasks = tasks.filter(task => !task.completed);
      const completedTasks = tasks.filter(task => task.completed === true);

      console.log(`Total tasks: ${tasks.length}   Current tasks: ${currentTasks.length}    Completed tasks:  ${completedTasks.length}`)
      res.render('index', { currentTasks: currentTasks, completedTasks: completedTasks });
    })
    .catch((err) => {
      console.log(err);
      res.send('Sorry! Something went wrong.');
    });
});

يمكن مراجعة محتويات سجلات تشخيص خدمة التطبيقات في مدخل Azure أو VS Code أو باستخدام Azure CLI.

الإرشادات لقطة شاشة
أولا، تحتاج إلى تمكين سجلات البث في Azure App Service. انتقل إلى الصفحة الخاصة بمثيل خدمة التطبيقات في مدخل Azure.

  1. حدد سجلات خدمة التطبيقات ضمن عنوان المراقبة في القائمة الموجودة على الجانب الأيمن من الصفحة.
  2. تغيير الخاصية تسجيل التطبيق من إيقاف إلى **نظام الملفات.
  3. أدخل فترة احتفاظ مدتها 30 يوما للسجلات.
  4. انقر على Save لحفظ التغييرات التي أجريتها.
 A screenshot showing the location of the Azure Tool icon in Visual Studio Code.
حدد عنصر دفق السجل من القائمة ضمن قسم المراقبة. قم بتحديث الصفحة الرئيسية في التطبيق أو حاول تقديم طلبات أخرى لإنشاء بعض رسائل السجل.

سترى أي رسائل سجل تم إنشاؤها بواسطة تطبيقك ورسائل تم إنشاؤها بواسطة الخدمة في الإخراج.		 A screenshot showing how you deploy an application to Azure by right-clicking on a web app in VS Code and selecting deploy from the context menu.

7 - فحص الملفات المنشورة باستخدام كودو

توفر Azure App Service وحدة تحكم تشخيصية مستندة إلى الويب تسمى Kudu تتيح لك فحص بيئة استضافة الخادم لتطبيق الويب الخاص بك. باستخدام Kudu ، يمكنك عرض الملفات التي تم نشرها على Azure ، ومراجعة محفوظات نشر التطبيق ، وحتى فتح جلسة SSH في بيئة الاستضافة.

للوصول إلى Kudu، انتقل إلى أحد عناوين URL التالية. ستحتاج إلى تسجيل الدخول إلى موقع Kudu باستخدام بيانات اعتماد Azure الخاصة بك.

  • بالنسبة للتطبيقات التي يتم نشرها في خطط خدمة التطبيقات المجانية والمشتركة والأساسية والقياسية Premium - https://<app-name>.scm.azurewebsites.net.
  • بالنسبة للتطبيقات التي تم نشرها في خطط الخدمة المعزولة - https://<app-name>.scm.<ase-name>.p.azurewebsites.net.

من الصفحة الرئيسية في Kudu ، يمكنك الوصول إلى معلومات حول بيئة استضافة التطبيقات وإعدادات التطبيق وعمليات النشر وتصفح الملفات في دليل wwwroot.

A screenshot of the main page in the Kudu SCM app showing the different information available about the hosting environment.

سيؤدي تحديد رابط عمليات النشر أسفل رأس واجهة برمجة تطبيقات REST إلى عرض محفوظات عمليات نشر تطبيق الويب الخاص بك.

A screenshot of the deployments JSON in the Kudu SCM app showing the history of deployments to this web app.

يتيح لك تحديد الارتباط wwwroot للموقع ضمن عنوان استعراض الدليل استعراض الملفات وعرضها على خادم الويب.

A screenshot of files in the wwwroot directory showing how Kudu lets you to see what has been deployed to Azure.

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

عند الانتهاء، يمكنك حذف كافة الموارد من Azure عن طريق حذف مجموعة الموارد للتطبيق.

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

الإرشادات لقطة شاشة
انتقل إلى مجموعة الموارد في بوابة Azure.
  1. أدخل اسم مجموعة الموارد في شريط البحث أعلى الصفحة.
  2. ضمن عنوان مجموعات الموارد في مربع الحوار أدناه، حدد اسم مجموعة الموارد للانتقال إليها.
 A screenshot showing how to search for and go to a resource group in the Azure portal.
حدد الزر حذف مجموعة الموارد في أعلى الصفحة. A screenshot showing the location of the Delete Resource Group button in the Azure portal.
في مربع حوار التأكيد، أدخل اسم مجموعة الموارد لتأكيد الحذف. حدد الزر حذف في أسفل الصفحة لحذف مجموعة الموارد. A screenshot of the confirmation dialog for deleting a resource group in the Azure portal.

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

JavaScript on Azure developer center

تكوين تطبيق Node.js في App Service