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

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

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

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

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

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

• أن يكون لديك حساب Azure باشتراك نشط. إذا لم يكن لديك حساب، يمكنك إنشاء حساب مجانًا.
• تثبيت Node.js LTS. قم بتشغيل الأمر node --version للتحقق من تثبيت Node.js.
• ثبّت Visual Studio Code.
• تثبيت ملحق Azure App Service ل Visual Studio Code.

• أن يكون لديك حساب Azure باشتراك نشط. إذا لم يكن لديك حساب، يمكنك إنشاء حساب مجانًا.
• تثبيت Node.js LTS. قم بتشغيل الأمر node --version للتحقق من تثبيت Node.js.
• قم بتثبيت Azure CLI، الذي يمكنك استخدامه لتشغيل الأوامر في الشل لإنشاء وتكوين موارد Azure.

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

إنشاء تطبيق Node.js

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

تلميح

إذا كنت قد أنهيت بالفعل درسNode.js، يمكنك الانتقال إلى Deploy to Azure.

1. أنشئ تطبيق Node.js باستخدام مولد التطبيقات السريع، والذي يتم تثبيته افتراضيا باستخدام Node.js وnpm.

   npx express-generator myExpressApp --view ejs
   

   إذا كانت هذه هي المرة الأولى التي تقوم فيها بتركيب المولد، تطلب منك NPX الموافقة على التركيب.

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

   cd myExpressApp && npm install
   

3. تحديث التبعيات إلى الإصدار الأكثر أمانا.

   npm audit fix --force
   

4. ابدأ تشغيل خادم التطوير بمعلومات تتبع الأخطاء.

   DEBUG=myexpressapp:* npm start
   

5. في المستعرض، انتقل إلى http://localhost:3000. يجب أن ترى شيئا مثل هذا:

   

واجهت مشكلة

نشر في Azure

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

ملاحظة

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

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

1. في المحطة الطرفية، تأكد من أنك في دليل myExpressApp ، ثم ابدأ تشغيل Visual Studio Code باستخدام الأمر التالي:

   code .
   

2. في Visual Studio Code، في شريط النشاط، حدد شعار Azure.

3. تأكد من تسجيل الدخول باستخدام حساب Azure الخاص بك.

واجهت مشكلة

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

النشر إلى Linux

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

2. اكتب اسما فريدا عالميا لتطبيق الويب الخاص بك وحدد Enter. يجب أن يكون الاسم فريدا عبر جميع أزرال ويستخدم فقط الأحرف الأبجدية الرقمية (A-Z، ، و 0-9) والشرطات (-a-z).

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

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

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

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

6. بعد الانتهاء من النشر، اختر تصفح الموقع في نافذة الإشعار. يجب أن يعرض المستعرض الصفحة الافتراضية Express.

النشر إلى Windows

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

2. حدد الموقع الذي تريد عرض تطبيقك منه. على سبيل المثال، غرب أوروبا.

3. حدد تأمين اسم المضيف الافتراضي الفريد.

4. حدد Create a new resource group، ثم أدخل اسما لمجموعة الموارد، مثل AppServiceQS-rg.

5. اكتب اسما فريدا عالميا لتطبيق الويب الخاص بك، ثم حدد Enter. يجب أن يكون الاسم فريدا عبر جميع أزرال ويستخدم فقط الأحرف الأبجدية الرقمية (A-Z، ، و 0-9) والشرطات (-a-z).

6. حدد الإصدار Node.js الذي تريده. ينصح باستخدام Node 24 LTS.

7. حدد Windows لنظام التشغيل.

8. حدد Create new App Service plan، وأدخل اسما للخطة (مثل AppServiceQS-plan)، ثم حدد F1 Free لطبقة التسعير.

9. بالنسبة إلى تحديد مورد Application Insights لتطبيقك، حدد تخطي في الوقت الحالي. انتظر حتى يتم إنشاء الموارد في Azure.

10. في النافذة المنبثقة نشر مساحة العمل "myExpressApp" إلى <اسم> التطبيق"، حدد نعم. يضمن القيام بذلك أنه طالما كنت في نفس مساحة العمل، يتم نشر Visual Studio Code في نفس تطبيق App Service في كل مرة.

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

    ملاحظة

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

11. في الموارد في Visual Studio Code، قم بتوسيع عقدة التطبيق الجديد، وانقر بزر الماوس الأيمن فوق إعدادات التطبيق، وحدد إضافة إعداد جديد:

    

12. أدخل SCM_DO_BUILD_DURING_DEPLOYMENT لمفتاح الإعداد.

13. هنا أدخل true لقيمة الإعداد.

    يتيح هذا الإعداد من التطبيق أتمتة البناء عند وقت النشر، والذي يكتشف السكربت تلقائيا ويولد ملف web.config معه.

14. في مستكشف App Service ، حدد أيقونة Deploy to Web App مرة أخرى، وتأكد من خلال تحديد Deploy مرة أخرى.

15. انتظر حتى يكتمل النشر، ثم حدد استعراض موقع الويب في النافذة المنبثقة للإعلام. يجب أن يعرض المستعرض الصفحة الافتراضية Express.

واجهت مشكلة

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

النشر إلى Linux

az webapp up --sku F1 --name <app-name>

النشر إلى Windows

az webapp up --sku F1 --name <app-name> --os-type Windows

• إذا لم يتم التعرف على 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 up.)

قد يستغرق الأمر بضع دقائق حتى يكتمل. أثناء التشغيل، يوفر رسائل حول إنشاء مجموعة الموارد وخطة App Service ومورد التطبيق وتكوين التسجيل والقيام بنشر Zip. ثم يقوم بإرجاع رسالة تتضمن عنوان URL للتطبيق، وهو عنوان 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 <URL>
{
  "URL": "<URL>",
  "appserviceplan": "<app-service-plan-name>",
  "location": "centralus",
  "name": "<app-name>",
  "os": "<os-type>",
  "resourcegroup": "<group-name>",
  "runtime_version": "node|24",
  "runtime_version_detected": "0.0",
  "sku": "FREE",
  "src_path": "/home/cephas/myExpressApp"
}

ملاحظة

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

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

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

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

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

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

إنشاء موارد Azure

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

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

3. في علامة التبويب Basics ، ضمن Project Details، تأكد من تحديد الاشتراك الصحيح ثم حدد Create new لإنشاء مجموعة موارد. للاسم، اكتب "myResourceGroup".

   

4. ضمن تفاصيل المثيل، اكتب اسما فريدا عالميا لتطبيق الويب الخاص بك وحدد Code. اختر Node 24 LTS في مكدس وقت التشغيل، ونظام تشغيل، ومنطقة تريد خدمة تطبيقك منها.

   

5. ضمن خطط التسعير، حدد إنشاء جديد لإنشاء خطة App Service. اكتب myAppServicePlan للاسم. للتغيير إلى المستوى المجاني، حدد F1 المجاني في قائمة خطة التسعير .

   

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

   

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

8. بعد اكتمال النشر، حدد Go to resource.

   

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

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

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

   

2. افتح عميل FTP الخاص بك وانتقل إلى مجلد myExpressApp الخاص بك.

3. من تبويب بيانات بيانات FTPS ، انسخ نقطة النهايةواسم المستخدموكلمة المرور إلى عميل FTP الخاص بك.

   

4. اختر Connect في عميل FTP الخاص بك.

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

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

   

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

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

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

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

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

   إلى

   <p>Welcome to Azure</p>
   

2. في مستكشف App Service ، حدد أيقونة Deploy to Web App مرة أخرى، وتأكد من خلال تحديد Deploy مرة أخرى.

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

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

   az webapp up
   

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

3. بمجرد اكتمال النشر، قم بتحديث صفحة الويب. يجب أن ترى أن الرسالة Welcome to Express تم تغييرها إلى Welcome to Azure.

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

3. بمجرد اكتمال النشر، قم بتحديث صفحة الويب. يجب أن ترى أن الرسالة Welcome to Express تم تغييرها إلى Welcome to Azure.

سجلات التدفق

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

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

   

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

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 ثانية.

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

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

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

   

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 Code، في القائمة Group By ، حدد Group by Resource Group.

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

   

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

واجهت مشكلة

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

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

az group delete --no-wait

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

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

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

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

   

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

   

المحتويات ذات الصلة

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

توزيع تطبيق ويب Node.js + MongoDB إلى Azure

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

  استخدم نطاقا مخصصا وشهادة مدارة لتأمين تطبيقك

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

• Azure Cosmos DB
• دالات Azure
• حزمة الامتداد من دوكر
• أدوات Azure CLI
• أدوات Azure Resource Manager

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