تشغيل سريع: إنشاء دالة JavaScript في Azure باستخدام Visual Studio Code

  • مقالة

استخدم Visual Studio Code لإنشاء دالة JavaScript تستجيب لطلبات HTTP. اختبر التعليمات البرمجية محليًا، ثم انشرها إلى بيئة بلا خادم Azure Functions.

هام

يتغير محتوى هذه المقالة استنادا إلى اختيارك لنموذج البرمجة Node.js في المحدد في أعلى الصفحة. يتوفر نموذج v4 بشكل عام وتم تصميمه للحصول على تجربة أكثر مرونة وبديهية لمطوري JavaScript وTypeScript. تعرف على المزيد حول الاختلافات بين v3 وv4 في دليل الترحيل.

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

هناك أيضاً إصدار يستند إلى واجهة سطر الأوامر من هذه المقالة.

تكوين بيئتك

قبل البدء، تأكد من توفر المتطلبات التالية:

تثبيت الأدوات الأساسية أو تحديثها

يتكامل ملحق Azure Functions ل Visual Studio Code مع Azure Functions Core Tools بحيث يمكنك تشغيل وتصحيح وظائفك محليا في Visual Studio Code باستخدام وقت تشغيل Azure Functions. قبل البدء، من الجيد تثبيت Core Tools محليا أو تحديث تثبيت موجود لاستخدام أحدث إصدار.

في Visual Studio Code، حدد F1 لفتح لوحة الأوامر، ثم ابحث عن الأمر Azure Functions وتشغيله: تثبيت أو تحديث Core Tools.

يبدأ هذا الأمر تثبيتا مستندا إلى الحزمة لأحدث إصدار من Core Tools.

إنشاء مشروعك المحلي

يمكنك في هذا القسم استخدام Visual Studio Code لإنشاء مشروع Azure Functions محلي في JavaScript. لاحقا في هذه المقالة، يمكنك نشر التعليمات البرمجية للدالة إلى Azure.

  1. حدد رمز Azure في شريط "النشاط". ثم في منطقة «مساحة العمل» (محلية)، حدد الزر +، واختر "إنشاء دالة" في القائمة المنسدلة. اختر إنشاء مشروع جديد حين يُطلب منك.

    لقطة شاشة لإنشاء نافذة مشرع جديد.

  2. اختر موقع الدليل الخاص لمساحة عمل المشروع لديك واختر "تحديد". يجب عليك إما إنشاء مجلد جديد أو اختيار مجلد فارغ لمساحة عمل المشروع. لا تختر مجلد مشروع يشكل بالفعل جزءًا من مساحة عمل.

  1. قدِّم المعلومات التالية في المطالبات:

    المطالبة التحديد
    حدد اللغة الخاصة بمشروع الدالة اختر JavaScript.
    تحديد نموذج برمجة JavaScript اختيار Model V3
    تحديد قالب للدالة الأولى لمشروعك اختر HTTP trigger.
    توفير اسم دالة اكتبHttpExample.
    مستوى التخويل اختر Anonymous بحيث يتمكن أي شخص من استدعاء نقطة النهاية للدالة. للتعرف على مستويات التخويل، راجع مفاتيح التخويل.
    تحديد الطريقة التي تريد فتح مشروعك بها اختر Open in current window.

    باستخدام هذه المعلومات، ينشئ Visual Studio Code مشروع دالات Azure مع مشغل HTTP. يمكنك عرض ملفات المشروع المحلي في المستكشف. لمعرفة المزيد حول الملفات المُنشأة راجع ملفات المشروع المُنشأة.

  1. قدِّم المعلومات التالية في المطالبات:

    المطالبة التحديد
    حدد اللغة الخاصة بمشروع الدالة اختر JavaScript.
    تحديد نموذج برمجة JavaScript اختيار Model V4
    تحديد قالب للدالة الأولى لمشروعك اختر HTTP trigger.
    توفير اسم دالة اكتبHttpExample.
    تحديد الطريقة التي تريد فتح مشروعك بها اختيار Open in current window

    باستخدام هذه المعلومات، ينشئ Visual Studio Code مشروع دالات Azure مع مشغل HTTP. يمكنك عرض ملفات المشروع المحلي في المستكشف. لمعرفة المزيد حول الملفات التي تم إنشاؤها، راجع دليل مطور Azure Functions JavaScript.

تشغيل الدالة محليًا

يتكامل Visual Studio Code مع أدوات Azure Functions Core للسماح لك بتشغيل هذا المشروع على كمبيوتر التطوير المحلي قبل النشر إلى Azure.

  1. لبدء الدالة محليا، اضغط على F5 أو أيقونة Run and Debug في شريط Activity على الجانب الأيسر. تعرض لوحة Terminal عملية الإخراج من Core Tools. يبدأ تطبيقك في لوحة المحطة الطرفية. يمكنك مشاهدة نقطة نهاية URL للوظيفة التي تم تشغيلها بواسطة HTTP وتعمل محليًا.

    لقطة شاشة تعرض إخراج VS Code للدالة المحلية.

    إذا كنت تواجه مشكلة في التشغيل على Windows، فتأكد من عدم تعيين المحطة الطرفية الافتراضية ل Visual Studio Code إلى WSL Bash.

  2. اختر، مع استمرار تشغيل Core Tools في Terminal، رمز Azure في شريط "النشاط". في منطقة "مساحة العمل"، يمكنك توسيع "مشروع محلي>وظائف". انقر بزر الماوس الأيمن (Windows) أو Ctrl - انقر فوق (macOS) الدالة الجديدة واختر Execute Function Now....

    تنفيذ الدالة الآن من Visual Studio Code

  3. في Enter request body سترى قيمة نص رسالة الطلب الخاصة { "name": "Azure" }. اضغط فوق Enter لإرسال رسالة الطلب هذه إلى الوظيفة الخاصة بك.

  4. عند تنفيذ الوظيفة محليًا وإرجاع استجابة، يرفع تنبيه في Visual Studio التعليمات البرمجية. تعرض معلومات حول تنفيذ الوظيفة في لوحة Terminal.

  5. مع التركيز على لوحة Terminal، اضغط على Ctrl + C لإيقاف Core Tools وقطع اتصال مصحح الأخطاء.

بعد التحقق من عمل الوظيفة بشكل صحيح على الحاسوب المحلي، حان الوقت لاستخدام تعليمة Visual Studio البرمجية لنشر المشروع مباشرة على Azure.

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

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

  1. إذا لم تُسجل الدخول بالفعل، فاختر رمز Azure في شريط "النشاط". ثم في منطقة "الموارد"، اختر "تسجيل الدخول إلى Azure...".

    لقطة شاشة تعرض تسجيل الدخول إلى نافذة Azure في VS Code.

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

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

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

إنشاء تطبيق الوظائف في Azure

يمكنك، في هذا القسم، إنشاء تطبيق وظائف وموارد ذات الصلة في اشتراك Azure.

  1. حدد رمز Azure في شريط "النشاط". ثم في منطقة "الموارد"، حدد الرمز + وحدد الخيار "إنشاء تطبيق الوظائف في Azure".

    أنشئ موردًا في اشتراك Azure الخاص بك

  2. قدِّم المعلومات التالية في المطالبات:

    المطالبة التحديد
    تحديد الاشتراك حدد الاشتراك المطلوب استخدامه. لن تظهر هذه المطالبة عندما يكون لديك اشتراك واحد فقط مرئي ضمن «الموارد».
    أدخل اسماً فريداً عالمياً لتطبيق الوظائف اكتب اسماً صالحاً في مسار URL. يتم التحقق من صحة الاسم الذي تكتبه للتأكد من أنه فريد في دالات Azure.
    تحديد مكدس ذاكرة مؤقتة لوقت التشغيل اختر إصدار اللغة الذي كنت تعمل عليه محلياً.
    حدد موقعاً للموارد الجديدة للحصول على أداء أفضل، اختر منطقة قريبة منك.

    يعرض الملحق حالة الموارد الفردية في أثناء إنشائها في Azure في لوحة Azure: سجل النشاط.

    سجل إنشاء مورد Azure

  3. يتم، عند الانتهاء من الإنشاء، إنشاء موارد Azure التالية في الاشتراك. تسمى الموارد استنادًا إلى اسم تطبيق الوظائف الخاص بك:

    • مجموعة الموارد، وهي حاوية منطقية للموارد ذات الصلة.
    • حساب التخزين بخدمة Azure: هو مورد تخزين يحتفظ بالحالة ومعلومات أخرى حول المشروع.
    • تطبيق الوظيفة، الذي يوفر البيئة لتنفيذ التعليمة البرمجية للوظيفة. يتيح لك تطبيق الوظيفة تجميع الوظائف كوحدة منطقية لإدارة الموارد وتوزيعها ومشاركتها بشكل أسهل مع نفس خطة المضيف.
    • خطة «خدمة التطبيقات» التي تحدد المضيف الأساسي لتطبيق الوظائف.
    • مثيل Application Insights متصل بتطبيق الوظائف الذي يتتبع استخدام الوظائف في التطبيق.

    يعرض تنبيه بعد إنشاء تطبيق الوظيفة وتطبيق حزمة التوزيع.

    تلميح

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

نشر المشروع في Azure

هام

يستبدل التوزيع إلى تطبيق وظائف موجود دائمًا محتويات هذا التطبيق في Azure.

  1. في منطقة الموارد لنشاط Azure، حدد موقع مورد تطبيق الدالة الذي أنشأته للتو، وانقر بزر الماوس الأيمن فوق المورد، وحدد Deploy to function app....

  2. عند مطالبتك بالكتابة فوق عمليات التوزيع السابقة، حدد Deploy لنشر التعليمات البرمجية للدالة إلى مورد تطبيق الوظائف الجديد.

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

    لقطة شاشة تظهر نافذة View Output

تشغيل الوظيفة في Azure

  1. بالعودة إلى منطقة Resources في الشريط الجانبي قم بتوسيع الاشتراك الخاص بك، وتطبيق الوظائف الجديد وFunctions. انقر بزر الماوس الأيمن (Windows) أو Ctrl - انقر فوق الدالة (macOS) HttpExample واختر تنفيذ الدالة الآن....

    لقطة شاشة تعرض تنفيذ وظيفة في Azure من Visual Studio Code.

  2. في Enter request body سترى قيمة نص رسالة الطلب الخاصة { "name": "Azure" }. اضغط فوق Enter لإرسال رسالة الطلب هذه إلى الوظيفة الخاصة بك.

  3. عند تنفيذ الوظيفة محليًا وإرجاع استجابة، يتم طرح تنبيه في تعليمة Visual Studio البرمجية.

تغيير التعليمات البرمجية وإعادة التوزيع إلى Azure

  1. في Visual Studio Code في طريقة عرض Explorer، حدد الملف ./HttpExample/index.js.

  2. استبدال الملف مع التعليمة البرمجية التالية لإنشاء كائن JSON وإعادته.

    module.exports = async function (context, req) {

    try {
        context.log('JavaScript HTTP trigger function processed a request.');

        // Read incoming data
        const name = (req.query.name || (req.body && req.body.name));
        const sport = (req.query.sport || (req.body && req.body.sport));

        // fail if incoming data is required
        if (!name || !sport) {

            context.res = {
                status: 400
            };
            return;
        }

        // Add or change code here
        const message = `${name} likes ${sport}`;

        // Construct response
        const responseJSON = {
            "name": name,
            "sport": sport,
            "message": message,
            "success": true
        }

        context.res = {
            // status: 200, /* Defaults to 200 */
            body: responseJSON,
            contentType: 'application/json'
        };
    } catch(err) {
        context.res = {
            status: 500
        };
    }
}

  3. أعد تشغيل تطبيق الدالة محلياً.

  4. في المطالبة أدخل نص الطلب، غير نص رسالة الطلب إلى { "name": "Tom","sport":"basketball" }. اضغط فوق Enter لإرسال رسالة الطلب هذه إلى الوظيفة الخاصة بك.

  5. عرض الاستجابة في الإعلام:

    {
  "name": "Tom",
  "sport": "basketball",
  "message": "Tom likes basketball",
  "success": true
}

  6. إعادة توزيع الدالة إلى Azure.

استكشاف الأخطاء وإصلاحها

استخدم الجدول التالي لحل المشكلات الأكثر شيوعا التي تمت مواجهتها عند استخدام هذا التشغيل السريع.

المشكلة حل
ألا يمكن إنشاء مشروع دالة محلية؟ تأكد من تثبيت ملحق دوال Azure.
ألا يمكنك تشغيل الوظيفة محليًا؟ تأكد من تثبيت أحدث إصدار من Azure Functions Core Tools.
عند التشغيل على Windows، فتأكد من عدم تعيين غلاف المحطة الطرفية الافتراضي لـ Visual Studio Code على WSL Bash.
ألا يمكنك توزيع الدالة إلى Azure؟ راجع الإخراج للحصول على معلومات الخطأ. يعد رمز الجرس الموجود في الزاوية اليمنى السفلية طريقة أخرى لعرض الإخراج. هل قمت بالنشر إلى تطبيق دالة موجود؟ يستبدل هذا الإجراء محتوى هذا التطبيق في Azure.
هل تعذر تشغيل تطبيق الدالة المستند إلى السحابة؟ تذكر استخدام سلسلة الاستعلام لإرسال المعلمات.

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

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

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

  1. في Visual Studio Code، حدد رمز Azure لفتح Azure explorer.
  2. في قسم مجموعات الموارد، ابحث عن مجموعة الموارد.
  3. انقر بزر الماوس الأيمن فوق مجموعة الموارد وحددحذف.

لمعرفة المزيد حول تكاليف الدالات، يرجى الاطلاع على تقدير تكاليف خطة الاستهلاك.

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

لقد استخدمت Visual Studio Codeلإنشاء تطبيق دوال باستخدام دالة بسيطة تعمل بواسطة مشغل "HTTP". في المقالة التالية، يمكنك توسيع هذه الدالة عن طريق الاتصال إما بـ Azure Cosmos DB أو Azure Storage. لمعرفة المزيد حول الاتصال بخدمات Azure الأخرى، راجع إضافة روابط إلى دالة قائمة في Azure Functions. إذا كنت تريد معرفة المزيد عن الأمان، راجع تأمين وظائف Azure.

الاتصال إلى Azure Cosmos DB

الاتصال إلى تخزين قائمة انتظار Azure

لقد استخدمت Visual Studio Codeلإنشاء تطبيق دوال باستخدام دالة بسيطة تعمل بواسطة مشغل "HTTP".

تعرف على المزيد حول وظائف JavaScript