نشر تطبيق ويب Node.js في Azure
إشعار
بدءا من 1 يونيو 2024، يمكن لتطبيقات App Service التي تم إنشاؤها حديثا إنشاء اسم مضيف افتراضي فريد يستخدم اصطلاح <app-name>-<random-hash>.<region>.azurewebsites.net
التسمية . تظل أسماء التطبيقات الحالية دون تغيير. على سبيل المثال:
myapp-ds27dh7271aah175.westus-01.azurewebsites.net
لمزيد من المعلومات، راجع اسم المضيف الافتراضي الفريد لمورد App Service.
في هذه البداية السريعة، ستتعلم كيفية إنشاء وتوزيع أول تطبيق ويب Node.js (Express) إلى تطبيق App Service. تدعم خدمة التطبيقات إصدارات مختلفة من Node.js على كل من Linux و Windows.
تعمل هذه البداية السريعة على تكوين تطبيق خدمة التطبيقات في الطبقة المجانية ولا تتحمل أي تكلفة لاشتراك 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، الذي يمكنك من خلاله تشغيل الأوامر في shell لإنشاء موارد Azure وتكوينها.
- أن يكون لديك حساب Azure باشتراك نشط. أنشئ حساباً مجاناً.
- تثبيت Node.js LTS. قم بتشغيل الأمر
node --version
للتحقق من تثبيت Node.js. - لديك عميل FTP (على سبيل المثال، FileZilla)، للاتصال بتطبيقك.
قم بإنشاء تطبيق Node.js الخاص بك
في هذه الخطوة، تقوم بإنشاء تطبيق Node.js أساسي والتأكد من أنه يعمل على جهاز الكمبيوتر الخاص بك.
تلميح
إذا كنت قد أكملت بالفعل "Node.js tutorial"، فيمكنك التخطي إلى النشر إلى Azure .
إنشاء تطبيق Node.js باستخدام Express Generator، والذي يتم تثبيته افتراضيا مع Node.js وnpm.
npx express-generator myExpressApp --view ejs
إذا كانت هذه هي المرة الأولى التي تقوم فيها بتثبيت المولد، فستطالبك npx بالموافقة على التثبيت.
قم بالتغيير إلى دليل التطبيق وقم بتثبيت حزم npm.
cd myExpressApp && npm install
تحديث التبعيات إلى الإصدار الأكثر أمانا.
npm audit fix --force
ابدأ خادم التطوير بمعلومات تتبع الأخطاء.
DEBUG=myexpressapp:* npm start
في المتصفح، انتقل إلى
http://localhost:3000
. ستشاهد ما يشبه ما يلي:
نشر في Azure
قبل المتابعة، تأكد من تثبيت جميع المتطلبات الأساسية وتكوينها.
إشعار
لكي يعمل تطبيق Node.js في Azure، فإنه يحتاج إلى الاستماع إلى المنفذ الذي يوفره متغير البيئة PORT
. في تطبيق Express الذي تم إنشاؤه، يتم استخدام متغير البيئة هذا بالفعل في سلة/www البرنامج النصي لبدء التشغيل. (ابحث process.env.PORT
عن .)
تسجيل الدخول إلى Azure
في المحطة الطرفية، تأكد من أنك في دليل myExpressApp ، ثم ابدأ تشغيل Visual Studio Code باستخدام الأمر التالي:
code .
في Visual Studio Code، في شريط النشاط، حدد شعار Azure.
في مستكشف App Service ، حدد تسجيل الدخول إلى Azure واتبع الإرشادات.
في Visual Studio Code، يجب أن تشاهد عنوان بريدك الإلكتروني في Azure في شريط المعلومات واشتراكك في مستكشف App Service .
تكوين التطبيق خدمة التطبيقات ونشر التعليمات البرمجية
- حدد مجلد myExpressApp.
انقر بزر الماوس الأيمن فوق App Services وحدد Create new Web App. يتم استخدام حاوية Linux بشكل افتراضي.
اكتب اسما فريدا عالميا لتطبيق الويب الخاص بك وحدد Enter. يجب أن يكون الاسم فريداً عبر كل Azure وأن يستخدم أحرفاً أبجدية رقمية فقط ("A-Z" و"a-z" و"0-9") والواصلات ("-"). راجع الملاحظة في بداية هذه المقالة.
في تحديد مكدس وقت التشغيل، حدد الإصدار Node.js الذي تريده. يوصى باستخدام إصدار LTS.
في Select a pricing tier، حدد Free (F1) وانتظر حتى يتم إنشاء الموارد في Azure.
في النافذة المنبثقة قم دائمًا بتوزيع مساحة العمل "myExpressApp" على <اسم التطبيق>"، حدد نعم. يضمن القيام بذلك أنه طالما كنت في نفس مساحة العمل، يتم نشر Visual Studio Code في نفس تطبيق App Service في كل مرة.
بينما يقوم Visual Studio Code بإنشاء موارد Azure ونشر التعليمات البرمجية، فإنه يعرض إعلامات التقدم.
بمجرد اكتمال التوزيع، حدد استعراض موقع ويب في نافذة الإعلام المنبثقة. ينبغي أن يعرض المتصفح صفحة 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 up.)
قد يستغرق الأمر بضع دقائق حتى يكتمل. أثناء التشغيل، يوفر رسائل حول إنشاء مجموعة الموارد وخطة App Service ومورد التطبيق وتكوين التسجيل والقيام بنشر 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
لبدء إنشاء تطبيق Node.js، استعرض للوصول إلى https://portal.azure.com/#create/Microsoft.WebSite.
في علامة التبويب Basics ، ضمن Project Details، تأكد من تحديد الاشتراك الصحيح ثم حدد Create new لإنشاء مجموعة موارد. للاسم، اكتب "myResourceGroup".
ضمن تفاصيل المثيل، اكتب اسمًا فريدًا عالميًا لتطبيق الويب وحدد الرمز. (راجع الملاحظة في بداية هذه المقالة.) حدد Node 18 LTS في مكدس وقت التشغيل ونظام التشغيل والمنطقة التي تريد خدمة تطبيقك منها.
ضمن App Service Plan، حدد Create new لإنشاء خطة App Service. اكتب خطة الخدمة الخاصة بي للاسم. للتغيير إلى المستوى المجاني، حدد تغيير الحجم، وحدد علامة التبويب Dev/Test ، وحدد F1، ثم حدد الزر تطبيق في أسفل الصفحة.
حدد الزر مراجعة + إنشاء أسفل الصفحة.
بعد عمليات التشغيل للمصادقة، حدد مراجعة + إنشاء بأسفل الصفحة.
بعد اكتمال عملية التوزيع، حدد Go to resource.
الحصول على بيانات اعتماد FTPS
تدعم خدمة تطبيقات Azure نوعين من بيانات الاعتماد لنشر FTP/S. بيانات الاعتماد المبينة ليست هي نفسها بيانات اعتماد اشتراك Azure الخاصة بك. في هذا القسم، يمكنك الحصول على بيانات اعتماد نطاق التطبيق لاستخدامها مع FileZilla.
من صفحة تطبيق App Service، حدد Deployment Center في القائمة اليسرى ثم حدد علامة التبويب FTPS credentials .
افتح FileZilla وأنشئ موقعًا جديدًا.
من علامة التبويب بيانات اعتماد FTPS، انسخ نقطة نهاية FTPS واسم المستخدم وكلمة المرور إلى FileZilla.
حدد الاتصال في FileZilla.
نشر الملفات باستخدام FTPS
انسخ كافة ملفات الملفات والدلائل إلى الدليل /site/wwwroot في Azure.
استعرض للوصول إلى عنوان URL للتطبيق للتحقق من أن التطبيق يعمل بشكل صحيح.
إعادة نشر التحديثات
يمكنك نشر التغييرات على هذا التطبيق عن طريق إجراء تعديلات في Visual Studio Code وحفظ ملفاتك ثم إعادة النشر إلى تطبيق Azure الخاص بك. على سبيل المثال:
من نموذج المشروع، افتح views/index.ejs وغيّر
<p>Welcome to <%= title %></p>
to
<p>Welcome to Azure</p>
في مستكشف App Service ، حدد أيقونة Deploy to Web App مرة أخرى، وتأكد من خلال تحديد Deploy مرة أخرى.
بمجرد اكتمال التوزيع، حدد استعراض موقع ويب في نافذة الإعلام المنبثقة. يجب أن ترى أن
Welcome to Express
الرسالة قد تم تغييرها إلىWelcome to Azure
.
احفظ التغييرات، ثم أعد نشر التطبيق باستخدام الأمر az webapp up مرة أخرى دون أي وسيطات لنظام Linux. إضافة
--os-type Windows
لنظام التشغيل Windows:az webapp up
يستخدم هذا الأمر القيم المخزنة مؤقتًا محليًا في ملف .azure/config، مثل اسم التطبيق ومجموعة الموارد وخطة خدمة التطبيقات.
بمجرد اكتمال النشر، قم بتحديث صفحة ويب
http://<app-name>.azurewebsites.net
. (راجع الملاحظة في بداية هذه المقالة.) يجب أن ترى أنهWelcome to Express
تم تغيير الرسالة إلىWelcome to Azure
.
احفظ التغييرات، ثم أعد نشر التطبيق باستخدام عميل FTP.
بمجرد اكتمال النشر، قم بتحديث صفحة ويب
http://<app-name>.azurewebsites.net
. (راجع ملاحظة في بداية هذه المقالة.) يجب أن ترى أنهWelcome to Express
تم تغيير الرسالة إلىWelcome to Azure
.
سجلات التدفق
يمكنك دفق إخراج السجل (المكالمات إلى console.log()
) من تطبيق Azure مباشرة في إطار إخراج التعليمات البرمجية Visual Studio.
في مستكشف خدمة التطبيقات، انقر بزر الماوس الأيمن فوق عقدة التطبيق وحدد بدء سجلات البث.
إذا طُلب منك إعادة تشغيل التطبيق، فحدد نعم. بمجرد إعادة تشغيل التطبيق، تفتح نافذة إخراج التعليمات البرمجية Visual Studio مع اتصال بتدفق السجل.
بعد بضع ثوانٍ، تُظهر نافذة الإخراج رسالة تشير إلى أنك متصل بخدمة تدفق السجل. يمكنك إنشاء المزيد من نشاط الإخراج عن طريق تحديث الصفحة في المستعرض.
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()
) من تطبيق مدخل Microsoft Azure مباشرة في إطار إخراج التعليمات البرمجية Visual Studio.
في نفس صفحة خدمة التطبيق بتطبيقك، استخدم القائمة اليسرى للتمرير إلى قسم المراقبة وحدد دفق السجل.
بعد بضع ثوانٍ، تُظهر نافذة الإخراج رسالة تشير إلى أنك متصل بخدمة تدفق السجل. يمكنك إنشاء المزيد من نشاط الإخراج عن طريق تحديث الصفحة في المستعرض.
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 في إحدى مجموعات الموارد. تضع الخطوات الواردة في هذا التشغيل السريع جميع الموارد في مجموعة الموارد هذه. للتنظيف، تحتاج فقط إلى إزالة مجموعة الموارد.
في ملحق Azure Visual Studio توسيع مستكشف Resource Groups.
قم بتوسيع الاشتراك، وانقر بزر الماوس الأيمن فوق مجموعة الموارد التي أنشأتها سابقًا، وحدد حذف.
عند مطالبتك، تأكد من حذفك بإدخال اسم مجموعة الموارد التي تقوم بحذفها. بمجرد تأكيد ذلك، يتم حذف مجموعة الموارد، وترى إشعارًا عند الانتهاء من ذلك.
في الخطوات السابقة، أنشأت موارد Azure في إحدى مجموعات الموارد. تحتوي مجموعة الموارد على اسم مثل "appsvc_rg_Linux_CentralUS"، اعتمادا على موقعك.
إذا كنت لا تتوقع أن تحتاج إلى هذه الموارد في المستقبل، فاحذف مجموعة الموارد عن طريق تشغيل الأمر التالي:
az group delete --no-wait
يستخدم الأمر اسم مجموعة الموارد المخزن مؤقتاً في ملف .azure / config.
تسمح الوسيطة --no-wait
للأمر بالعودة قبل اكتمال العملية.
يمكنك حذف مجموعة الموارد وخدمة التطبيقات وجميع الموارد ذات الصلة عندما لا تكون هناك حاجة إليها.
من صفحة نظرة عامة على خدمة التطبيق، حدد مجموعة الموارد التي أنشأتها في خطوة إنشاء موارد Azure.
من صفحة مجموعة الموارد، حدد حذف مجموعة الموارد. تأكيد اسم مجموعة الموارد لإنهاء حذف الموارد.
الخطوات التالية
تهانينا، لقد أكملت هذه البداية السريعة بنجاح!
تحقق من ملحقات Azure الأخرى.
أو احصل عليها جميعاً عن طريق تثبيت حزمة ملحقات Node Pack for Azure.