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

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

خطوات Azure CLI في هذا البدء السريع باستخدام مستوى Premium v3 المدفوع. تظهر خطوات تعليمة Visual Studio برمجية وبوابة Azure كيفية استخدام الطبقة المجانية.

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

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

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

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

• أن يكون لديك حساب 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 .
   

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

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

واجهت مشكلة

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

النشر إلى Linux

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

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

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

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

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

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

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

النشر إلى Windows

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

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

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

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

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

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 برمجية في نفس تطبيق App Service في كل مرة.

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

    ملاحظة

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

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

    

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

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

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

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

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

واجهت مشكلة

في الطرفية، تأكد من أنك في مجلد myExpressApp . استبدل <app-name> باسم فريد عالميا، ثم أنشئ مجموعة الموارد، خطة خدمة التطبيقات، والتطبيق. قم بتعيين SCM_DO_BUILD_DURING_DEPLOYMENT تطبيق Service لتثبيت التبعيات وبناء التطبيق عند نشر أرشيف المصدر.

النشر إلى Linux

az group create --name myResourceGroup --location eastus
az appservice plan create --name myAppServicePlan --resource-group myResourceGroup --sku P0v3 --is-linux
az webapp create --name <app-name> --resource-group myResourceGroup --plan myAppServicePlan --runtime "NODE:24-lts"
az webapp config appsettings set --name <app-name> --resource-group myResourceGroup --settings SCM_DO_BUILD_DURING_DEPLOYMENT=true

النشر إلى Windows

az group create --name myResourceGroup --location eastus
az appservice plan create --name myAppServicePlan --resource-group myResourceGroup --sku P0v3
az webapp create --name <app-name> --resource-group myResourceGroup --plan myAppServicePlan --runtime "NODE:24LTS"
az webapp config appsettings set --name <app-name> --resource-group myResourceGroup --settings SCM_DO_BUILD_DURING_DEPLOYMENT=true

• إذا لم يتم التعرف على az الأمر، فتأكد من تثبيت Azure CLI كما هو موضح في إعداد بيئتك الأولية.
• استبدلها <app-name> باسم فريد في جميع رموز Azure (الأحرف الصالحة هي a-z، 0-9، و -).
• الحجة --sku P0v3 تختار فئة تسعير بريميوم مدفوع v3. استبدل eastus بالمنطقة المفضلة لديك؛ قم بإدراج المناطق المتاحة ب az account list-locations.
• --is-linux يختار خطة لينكس. احذفها لخطة Windows، كما هو موضح في تبويب Windows.

أنشئ أرشيف ZIP للملفات في myExpressApp، وليس الدليل المرفق. على لينكس أو macOS، يمكنك تشغيله zip -r ../app.zip . -x '*/node_modules/*' '*/.git/*' '*/.env*' من myExpressApp. على Windows، يمكنك تشغيله Compress-Archive -Path (Get-ChildItem -Force -Name | Where-Object { $_ -notin @('node_modules', '.git') -and $_ -notlike '.env*' }) -DestinationPath ..\app.zip في PowerShell من myExpressApp. ثم نشر الأرشيف:

az webapp deploy --resource-group myResourceGroup --name <app-name> --src-path ../app.zip --type zip

تصفح لرؤية https://<app-name>.azurewebsites.net التطبيق.

إنشاء موارد 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 برمجية وحفظ ملفاتك ثم إعادة النشر إلى تطبيق 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. احفظ التغييرات، وأعد إنشاء .. /app.zip من ملفات التطبيق كما هو موضح في Deploy إلى Azure، ثم أعد نشر:

   az webapp deploy --resource-group myResourceGroup --name <app-name> --src-path ../app.zip --type zip
   

   استبدلها <app-name> بالاسم الذي استخدمته عند إنشاء تطبيق الويب.

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

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

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

سجلات التدفق

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

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

   

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 config --resource-group myResourceGroup --name <app-name> --docker-container-logging filesystem؛ على Windows، شغل az webapp log config --resource-group myResourceGroup --name <app-name> --application-logging filesystem.

az webapp log tail --resource-group myResourceGroup --name <app-name>

استبدلها <app-name> بالاسم الذي استخدمته عند إنشاء تطبيق الويب.

قم بتحديث التطبيق في المتصفح لإنشاء سجلات وحدة التحكم، والتي تتضمن رسائل تصف طلبات 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 برمجية، في القائمة Group By ، حدد Group by Resource Group.

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

   

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

واجهت مشكلة

في خطوات CLI السابقة، أنشأت موارد Azure في myResourceGroup.

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

az group delete --name myResourceGroup --no-wait

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

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

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

   

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

   

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

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

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

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

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

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

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

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