Share via

نشر تطبيق ويب Node.js في Azure

  • مقالة

في هذه البداية السريعة، ستتعلم كيفية إنشاء وتوزيع أول تطبيق ويب Node.js (Express) إلى تطبيق App Service. تدعم خدمة التطبيقات إصدارات مختلفة من Node.js على كل من Linux و Windows.

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

يوضح لك هذا الفيديو كيفية نشر تطبيق ويب Node.js في Azure.

يتم أيضا وصف الخطوات الواردة في الفيديو في الأقسام التالية.

قم بإعداد بيئتك الأولية

  • أن يكون لديك حساب Azure باشتراك نشط. أنشئ حساباً مجاناً.
  • قم بتثبيت Node.js LTS وnpm. قم بتشغيل الأمر node --version للتحقق من تثبيت Node.js.
  • قم بتثبيت Azure CLI، الذي يمكنك من خلاله تشغيل الأوامر في أي shell لإنشاء موارد Azure وتكوينها.
  • أن يكون لديك حساب Azure باشتراك نشط. أنشئ حساباً مجاناً.
  • قم بتثبيت Node.js LTS وnpm. قم بتشغيل الأمر node --version للتحقق من تثبيت Node.js.
  • لديك عميل FTP (على سبيل المثال، FileZilla)، للاتصال بتطبيقك.

قم بإنشاء تطبيق Node.js الخاص بك

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

تلميح

إذا كنت قد أكملت بالفعل "Node.js tutorial"، فيمكنك التخطي إلى النشر إلى Azure .

  1. قم بإنشاء تطبيق Node.js باستخدام Express Generator، والذي يتم تثبيته افتراضيًا مع Node.js و NPM.

    npx express-generator myExpressApp --view ejs

  2. تغيير إلى دليل التطبيق وتركيب حزم NPM.

    cd myExpressApp && npm install

  3. ابدأ خادم التطوير بمعلومات تتبع الأخطاء.

    DEBUG=myexpressapp:* npm start

  4. في المتصفح، انتقل إلى http://localhost:3000. ستشاهد ما يشبه ما يلي:

    Running Express Application

واجهت مشكلة

نشر في Azure

قبل المتابعة، تأكد من تثبيت جميع المتطلبات الأساسية وتكوينها.

إشعار

لكي يعمل تطبيق Node.js في Azure، فإنه يحتاج إلى الاستماع إلى المنفذ الذي يوفره متغير البيئة PORT. في تطبيق Express الذي تم إنشاؤه، يتم استخدام متغير البيئة هذا بالفعل في سلة البرامج النصية لبدء bin/www (ابحث عن process.env.PORT).

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

  1. في الجهاز، تأكد من أنك في دليل myExpressApp، ثم ابدأ Visual Studio Code بالأمر الآتي:

    code .

  2. في تعليمة برمجية Visual Studio، في شريط النشاط، حدد شعار Azure.

  3. في مستكشف خدمة التطبيقات، حدد تسجيل الدخول إلى Azure... واتبع الإرشادات.

    في تعليمة برمجية Visual Studio، ينبغي أن ترى عنوان بريدك الإلكتروني Azure في شريط الحالة واشتراكك في مستكشف AZURE APP SERVICE.

    sign in to Azure

واجهت مشكلة

تكوين التطبيق خدمة التطبيقات ونشر التعليمات البرمجية

  1. حدد مجلد myExpressApp.

  1. انقر بزر الماوس الأيمن فوق App Services وحدد Create new Web App. يتم استخدام حاوية Linux بشكل افتراضي.

  2. اكتب اسماً فريداً عالمياً لتطبيق الويب واضغط على "Enter". يجب أن يكون الاسم فريداً عبر كل Azure وأن يستخدم أحرفاً أبجدية رقمية فقط ("A-Z" و"a-z" و"0-9") والواصلات ("-").

  3. في تحديد مكدس ذاكرة مؤقتة وقت التشغيل، حدد الإصدار Node.js الذي تريده. يوصى باستخدام إصدار LTS.

  4. في Select a pricing tier، حدد Free (F1) وانتظر حتى يتم إنشاء الموارد في Azure.

  5. في النافذة المنبثقة قم دائمًا بتوزيع مساحة العمل "myExpressApp" على <اسم التطبيق>"، حدد نعم. بهذه الطريقة، طالما أنك في نفس مساحة العمل، سيوزع Visual Studio Code مساحة تطبيق App Service ذاتها في كل مرة.

    بينما يقوم Visual Studio Code بإنشاء موارد Azure ونشر التعليمات البرمجية، فإنه يعرض إعلامات التقدم.

  6. بمجرد اكتمال التوزيع، حدد استعراض موقع ويب في نافذة الإعلام المنبثقة. ينبغي أن يعرض المتصفح صفحة Express الافتراضية.

واجهت مشكلة

في الجهاز، تأكد من أنك في دليل myExpressApp، ووزع التعليمة البرمجية في مجلدك المحلي (myExpressApp) باستخدام الأمر az webapp up:

az webapp up --sku F1 --name <app-name>
  • إذا لم az يتم التعرف على الأمر، فتأكد من تثبيت Azure CLI كما هو موضح في إعداد بيئتك الأولية.
  • استبدل <app_name> باسم فريد عبر كل أنواع Azure (الأحرف الصالحة هيa-zو 0-9و -). النمط الجيد هو استخدام مزيج من اسم شركتك ومعرف التطبيق.
  • --sku F1تقوم الوسيطة بإنشاء تطبيق الويب على مستوى التسعير المجاني، والذي لا يتحمل أي تكلفة.
  • يمكنك تضمين اختياريا حجة --location <location-name>حيث<location_name> هو المنطقة Azure المتاحة. يمكنك استرداد قائمة المناطق المسموح بها لحساب Azure الخاص بك عن طريق تشغيل الأمر az account list-locations.
  • ينشئ الأمر تطبيق Linux Node.js بشكل افتراضي. لإنشاء تطبيق Windows بدلاً من ذلك، استخدم --os-type الوسيطة.
  • إذا رأيت الخطأ "تعذر الكشف التلقائي عن حزمة وقت تشغيل تطبيقك"، فتأكد من تشغيل الأمر في دليل myExpressApp (راجع استكشاف مشكلات الاكتشاف التلقائي في az webapp وحلها).

قد يستغرق الأمر بضع دقائق حتى يكتمل. أثناء التشغيل، يوفر التطبيق رسائل حول إنشاء مجموعة الموارد وخطة خدمة التطبيقات ومورد التطبيق وتهيئة التسجيل والقيام بنشر ZIP. ثم يعطي الرسالة، "يمكنك تشغيل التطبيق على http://<app-name>.azurewebsites.net"، وهو عنوان URL للتطبيق على Azure.

The webapp '<app-name>' doesn't exist
Creating Resource group '<group-name>' ...
Resource group creation complete
Creating AppServicePlan '<app-service-plan-name>' ...
Creating webapp '<app-name>' ...
Configuring default logging for the app, if not already enabled
Creating zip with contents of dir /home/cephas/myExpressApp ...
Getting scm site credentials for zip deployment
Starting zip deployment. This operation can take a while to complete ...
Deployment endpoint responded with status code 202
You can launch the app at http://<app-name>.azurewebsites.net
{
  "URL": "http://<app-name>.azurewebsites.net",
  "appserviceplan": "<app-service-plan-name>",
  "location": "centralus",
  "name": "<app-name>",
  "os": "<os-type>",
  "resourcegroup": "<group-name>",
  "runtime_version": "node|10.14",
  "runtime_version_detected": "0.0",
  "sku": "FREE",
  "src_path": "//home//cephas//myExpressApp"
}

إشعار

يقومaz webapp upالأمر بالإجراءات التالية:

  • إنشاء مجموعة موارد⁩ افتراضية.

  • إنشاء خطة App Service افتراضية.

  • إنشاء تطبيق بالاسم المحدد.

  • توزيع كل الملفات مضغوطة من دليل المشغّل الحالي، مع تمكين أتمتة الإصدار.

  • قم بتخزين المعلمات مؤقتًا محليًا في ملف .azure/config بحيث لا تحتاج إلى تحديدها مرة أخرى عند النشر لاحقًا باستخدام az webapp up أو أوامر az webapp الأخرى من مجلد المشروع. يتم استخدام القيم المخزنة مؤقتاً تلقائياً بشكل افتراضي.

تسجيل الدخول إلى مدخل Microsoft Azure

قم بتسجيل الدخول إلى بوابة Azure.

إنشاء موارد Azure

  1. لبدء إنشاء تطبيق Node.js، استعرض للوصول إلى https://portal.azure.com/#create/Microsoft.WebSite.

  2. في علامة التبويب الأساسيات، ضمن تفاصيل المشروع، تأكد من تحديد الاشتراك الصحيح ثم اختر مجموعة موارد إنشاء جديد. للاسم، اكتب "myResourceGroup".

    Screenshot of the Project details section showing where you select the Azure subscription and the resource group for the web app

  3. ضمن تفاصيل المثيل، اكتب اسمًا فريدًا عالميًا لتطبيق الويب وحدد الرمز. حدد Node 18 LTSRuntime stack ونظام التشغيل والمنطقة التي تريد خدمة تطبيقك منها.

    Screenshot of the Instance details section where you provide a name for the virtual machine and select its region, image and size

  4. ضمن خطة خدمة التطبيقات، اختر إنشاء خطة خدمة تطبيقات جديدة. اكتب خطة الخدمة الخاصة بي للاسم. للتغيير إلى المستوى المجاني، حدد تغيير الحجم، وحدد علامة التبويب Dev /Test، وحدد F1، وحدد الزر تطبيق في أسفل الصفحة.

    Screenshot of the Administrator account section where you provide the administrator username and password

  5. حدد الزر مراجعة + إنشاء أسفل الصفحة.

    Screenshot showing the Review and create button at the bottom of the page

  6. بعد عمليات التشغيل للمصادقة، حدد مراجعة + إنشاء بأسفل الصفحة.

  7. بعد اكتمال عملية التوزيع، حدد Go to resource.

    Screenshot showing the next step of going to the resource

الحصول على بيانات اعتماد FTPS

تدعم خدمة تطبيقات Azure نوعين من بيانات الاعتماد لنشر FTP/S. بيانات الاعتماد المبينة ليست هي نفسها بيانات اعتماد اشتراك Azure الخاصة بك. في هذا القسم، يمكنك الحصول على بيانات اعتماد نطاق التطبيق لاستخدامها مع FileZilla.

  1. من صفحة تطبيق App Service، حدد مركز التوزيع في القائمة اليمنى وحدد علامة تبويب بيانات اعتماد FTPS.

    FTPS deployment credentials

  2. افتح FileZilla وأنشئ موقعًا جديدًا.

  3. من علامة التبويب بيانات اعتماد FTPS، ضمن نطاق التطبيق، انسخ نقطة نهاية FTPS واسم مستخدم FTPS وكلمة المرور في FileZilla.

    FTPS connection details

  4. حدد الاتصال في FileZilla.

نشر الملفات باستخدام FTPS

  1. نسخ كافة الملفات وملفات الدلائل إلى الدليل /site/wwwroot في Azure.

    FileZilla deploy files

  2. استعرض للوصول إلى عنوان URL للتطبيق للتحقق من أن التطبيق يعمل بشكل صحيح.

إعادة نشر التحديثات

يمكنك نشر تغييرات على هذا التطبيق عن طريق إجراء تعديلات في Visual Studio التعليمات البرمجية وحفظ الملفات ثم إعادة النشر إلى تطبيق Azure. على سبيل المثال:

  1. من نموذج المشروع، افتح views/index.ejs وغيّر

    <p>Welcome to <%= title %></p>

    to

    <p>Welcome to Azure</p>

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

  2. بمجرد اكتمال التوزيع، حدد استعراض موقع ويب في نافذة الإعلام المنبثقة. يجب أن ترى أن Welcome to Express الرسالة قد تم تغييرها إلى Welcome to Azure!.

  1. احفظ التغييرات، ثم أعد نشر التطبيق باستخدام الأمر az webapp up مرة أخرى دون أي وسيطات لنظام Linux. إضافة --os-type Windows لنظام التشغيل Windows:

    az webapp up

    يستخدم هذا الأمر القيم المخزنة مؤقتًا محليًا في ملف .azure/config، مثل اسم التطبيق ومجموعة الموارد وخطة خدمة التطبيقات.

  2. بمجرد اكتمال النشر، قم بتحديث صفحة ويب http://<app-name>.azurewebsites.net. يجب أن ترى أن Welcome to Express الرسالة قد تم تغييرها إلى Welcome to Azure!.

  1. احفظ التغييرات، ثم أعد نشر التطبيق باستخدام عميل FTP.

  2. بمجرد اكتمال النشر، قم بتحديث صفحة ويب http://<app-name>.azurewebsites.net. يجب أن ترى أن Welcome to Express الرسالة قد تم تغييرها إلى Welcome to Azure!.

سجلات التدفق

يمكنك دفق إخراج السجل (المكالمات إلى console.log()) من تطبيق Azure مباشرة في إطار إخراج التعليمات البرمجية Visual Studio.

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

    Start Streaming Logs

  2. إذا طُلب منك إعادة تشغيل التطبيق، فحدد نعم. بمجرد إعادة تشغيل التطبيق، تفتح نافذة إخراج التعليمات البرمجية Visual Studio مع اتصال بتدفق السجل.

  3. بعد بضع ثوانٍ، تُظهر نافذة الإخراج رسالة تشير إلى أنك متصل بخدمة تدفق السجل. يمكنك إنشاء المزيد من نشاط الإخراج عن طريق تحديث الصفحة في المستعرض.

     Connecting to log stream...
 2020-03-04T19:29:44  Welcome, you are now connected to log-streaming service. The default timeout is 2 hours.
 Change the timeout with the App Setting SCM_LOGSTREAM_TIMEOUT (in seconds).

واجهت مشكلة

يمكنك الوصول إلى سجلات وحدة التحكم التي تم إنشاؤها من داخل التطبيق والحاوية التي يتم تشغيلها فيها. تتضمن السجلات أي إخراج تم إنشاؤه بواسطة المكالمات إلى console.log().

لدفق السجلات، قم بتشغيل الأمر az webapp log tail:

az webapp log tail

يستخدم الأمر اسم مجموعة الموارد المخزن مؤقتاً في ملف .azure / config.

يمكنك أيضًا --logs تضمين المعلمة مع الأمر az webapp up لفتح دفق السجل تلقائيًا عند التوزيع.

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

إلى سجل توقف تدفق في أي وقت، اضغط السيطرة+C في المحطة.

يمكنك الوصول إلى سجلات وحدة التحكم التي تم إنشاؤها من داخل التطبيق والحاوية التي يتم تشغيلها فيها. يمكنك دفق إخراج السجل (المكالمات إلى console.log()) من تطبيق مدخل Microsoft Azure مباشرة في إطار إخراج التعليمات البرمجية Visual Studio.

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

    Screenshot of Log stream in Azure App service.

  2. بعد بضع ثوانٍ، تُظهر نافذة الإخراج رسالة تشير إلى أنك متصل بخدمة تدفق السجل. يمكنك إنشاء المزيد من نشاط الإخراج عن طريق تحديث الصفحة في المستعرض.

     Connecting...
 2021-10-26T21:04:14  Welcome, you are now connected to log-streaming service.
 Starting Log Tail -n 10 of existing logs ----
 /appsvctmp/volatile/logs/runtime/81b1b83b27ea1c3d598a1cdec28c71c4074ce66c735d0be57f15a8d07cb3178e.log
 2021-10-26T21:04:08.614384810Z: [INFO]
 2021-10-26T21:04:08.614393710Z: [INFO]  # Enter the source directory to make sure the script runs where the user expects
 2021-10-26T21:04:08.614399010Z: [INFO]  cd "/home/site/wwwroot"
 2021-10-26T21:04:08.614403210Z: [INFO]
 2021-10-26T21:04:08.614407110Z: [INFO]  export NODE_PATH=/usr/local/lib/node_modules:$NODE_PATH
 2021-10-26T21:04:08.614411210Z: [INFO]  if [ -z "$PORT" ]; then
 2021-10-26T21:04:08.614415310Z: [INFO]          export PORT=8080
 2021-10-26T21:04:08.614419610Z: [INFO]  fi
 2021-10-26T21:04:08.614423411Z: [INFO]
 2021-10-26T21:04:08.614427211Z: [INFO]  node /opt/startup/default-static-site.js
 Ending Log Tail of existing logs ---

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

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

  1. في ملحق Azure Visual Studio توسيع مستكشف Resource Groups.

  2. قم بتوسيع الاشتراك، وانقر بزر الماوس الأيمن فوق مجموعة الموارد التي أنشأتها سابقًا، وحدد حذف.

    Screenshot of the Visual Studio Code navigation to delete a resource that contains App Service resources.

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

واجهت مشكلة

في الخطوات السابقة، أنشأت موارد Azure في إحدى مجموعات الموارد. مجموعة الموارد لها اسم مثل "appsvc_rg_Linux_CentralUS" اعتماداً على موقعك.

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

az group delete --no-wait

يستخدم الأمر اسم مجموعة الموارد المخزن مؤقتاً في ملف .azure / config.

تسمح الوسيطة --no-wait للأمر بالعودة قبل اكتمال العملية.

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

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

    Resource group in App Service overview page

  2. من صفحة مجموعة الموارد، حدد حذف مجموعة الموارد. تأكيد اسم مجموعة الموارد لإنهاء حذف الموارد.

    Delete resource group

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

تهانينا، لقد أكملت هذه البداية السريعة بنجاح!

البرنامج التعليمي: تطبيق Node.js مع MongoDB

تهيئة تطبيق Node.js

 آمنة مع المجال المخصص والشهادة

تحقق من ملحقات Azure الأخرى.

أو احصل عليها جميعاً عن طريق تثبيت حزمة ملحقات Node Pack for Azure.