Catch up on highlights from Firebase at Google I/O 2023. Learn more

خدمة المحتوى الديناميكي واستضافة الخدمات المصغرة باستخدام وظائف السحابة

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

تتيح لك Cloud Functions for Firebase تشغيل التعليمات البرمجية الخلفية تلقائيًا استجابةً لطلبات HTTPS. يتم تخزين التعليمات البرمجية الخاصة بك في سحابة Google وتشغيلها في بيئة مُدارة. ليست هناك حاجة لإدارة وتوسيع نطاق الخوادم الخاصة بك.

على سبيل المثال، استخدم حالات وعينات للوظائف السحابية المدمجة مع استضافة Firebase، تفضل بزيارة النظرة العامة بدون خادم .

ربط الوظائف السحابية باستضافة Firebase

يقدم هذا القسم مثالاً تفصيليًا لتوصيل إحدى الوظائف باستضافة Firebase.

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

الخطوة 1: إعداد الوظائف السحابية

  1. تأكد من حصولك على أحدث إصدار من Firebase CLI ومن قيامك بتهيئة Firebase Hosting.

    للحصول على إرشادات مفصلة حول تثبيت واجهة سطر الأوامر (CLI) وتهيئة الاستضافة، راجع دليل البدء للاستضافة .

  2. تأكد من إعداد وظائف السحابة:

    • إذا قمت بالفعل بإعداد وظائف السحابة، فيمكنك المتابعة إلى الخطوة 2: إنشاء وظيفة HTTPS واختبارها .

    • إذا لم تقم بإعداد وظائف السحابة:

      1. قم بتهيئة وظائف السحابة عن طريق تشغيل الأمر التالي من جذر دليل مشروعك:

        firebase init functions

      2. عندما يُطلب منك ذلك، حدد JavaScript (يستخدم هذا المثال الإرشادي JS).

      3. تأكد من وجود دليل functions في دليل مشروعك المحلي (تم إنشاؤه بواسطة أمر Firebase الذي قمت بتشغيله للتو). دليل functions هذا هو المكان الذي يوجد فيه رمز Cloud Functions.

الخطوة 2: إنشاء واختبار وظيفة HTTPS لموقع الاستضافة الخاص بك

  1. افتح /functions/index.js في محررك المفضل.

  2. استبدل محتويات الملف بالكود التالي.

    يقوم هذا الكود بإنشاء وظيفة HTTPS (تسمى bigben ) والتي ترد على طلبات HTTPS باستخدام BONG لكل ساعة من اليوم، تمامًا مثل الساعة.

    const functions = require('firebase-functions');

exports.bigben = functions.https.onRequest((req, res) => {
  const hours = (new Date().getHours() % 12) + 1  // London is UTC + 1hr;
  res.status(200).send(`<!doctype html>
    <head>
      <title>Time</title>
    </head>
    <body>
      ${'BONG '.repeat(hours)}
    </body>
  </html>`);
});

  3. اختبر وظائفك محليًا باستخدام Firebase Local Emulator Suite .

    1. من جذر دليل المشروع المحلي الخاص بك، قم بتشغيل الأمر التالي:

      firebase emulators:start

    2. قم بالوصول إلى الوظيفة عبر عنوان URL المحلي الذي تم إرجاعه بواسطة واجهة سطر الأوامر، على سبيل المثال: http://localhost:5001/ PROJECT_ID /us-central1/bigben .

تفضل بزيارة وثائق Cloud Functions لمعرفة المزيد حول طلبات HTTPS.

ترشدك الخطوة التالية إلى كيفية الوصول إلى وظيفة HTTPS هذه من عنوان URL لاستضافة Firebase حتى تتمكن من إنشاء محتوى ديناميكي لموقعك المستضاف على Firebase.

الخطوة 3: توجيه طلبات HTTPS إلى وظيفتك

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

  1. افتح ملف firebase.json الخاص بك.

  2. أضف تكوين rewrite التالي ضمن قسم hosting :

    "hosting": {
  // ...

  // Add the "rewrites" attribute within "hosting"
  "rewrites": [ {
    "source": "/bigben",
    "function": "bigben",
    "region": "us-central1"  // optional (see note below)
    "pinTag": true           // optional (see note below)
  } ]
}

  3. تأكد من أن عملية إعادة التوجيه الخاصة بك تعمل كما هو متوقع من خلال الاختبار مرة أخرى باستخدام محاكيات Firebase.

    1. من جذر دليل المشروع المحلي الخاص بك، قم بتشغيل الأمر التالي:

      firebase emulators:start

    2. قم بزيارة عنوان URL المستضاف محليًا لموقعك كما تم إرجاعه بواسطة سطر الأوامر (عادةً localhost:5000 )، لكن قم بإلحاق عنوان URL بـ bigben ، كما يلي: http://localhost:5000/bigben

  4. كرر على وظيفتك ووظائفها لموقعك. استخدم محاكيات Firebase لاختبار هذه التكرارات.

للحصول على أفضل أداء، قم بتوزيع وظائفك مع الاستضافة عن طريق اختيار إحدى المناطق التالية:

  • us-west1
  • us-central1
  • us-east1
  • europe-west1
  • asia-east1

قم بزيارة صفحة تكوين الاستضافة لمزيد من التفاصيل حول قواعد إعادة الكتابة . يمكنك أيضًا التعرف على ترتيب أولويات الاستجابات لتكوينات الاستضافة المختلفة.

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

الخطوة 4: نشر وظيفتك

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

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

    firebase deploy --only functions,hosting

  2. قم بالوصول إلى موقعك المباشر ووظيفتك على عناوين URL التالية:

    • نطاقات Firebase الفرعية الخاصة بك:
      PROJECT_ID .web.app/bigben و PROJECT_ID .firebaseapp.com/bigben

    • أي مجالات مخصصة متصلة:
      CUSTOM_DOMAIN /bigben

استخدم إطار الويب

يمكنك استخدام أطر عمل الويب، مثل Express.js ، في Cloud Functions لخدمة المحتوى الديناميكي لتطبيقك وكتابة تطبيقات الويب المعقدة بسهولة أكبر.

يوفر القسم التالي مثالاً تفصيليًا لاستخدام Express.js مع استضافة Firebase والوظائف السحابية.

  1. قم بتثبيت Express.js في مشروعك المحلي عن طريق تشغيل الأمر التالي من دليل functions الخاص بك:

    npm install express --save

  2. افتح ملف /functions/index.js الخاص بك، ثم قم باستيراد Express.js وتهيئته:

    const functions = require('firebase-functions');
const express = require('express');
const app = express();

  3. أضف نقطتي النهاية التاليتين:

    1. أضف نقطة النهاية الأولى لخدمة فهرس موقعنا على / .

      app.get('/', (req, res) => {
  const date = new Date();
  const hours = (date.getHours() % 12) + 1;  // London is UTC + 1hr;
  res.send(`
    <!doctype html>
    <head>
      <title>Time</title>
      <link rel="stylesheet" href="/style.css">
      <script src="/script.js"></script>
    </head>
    <body>
      <p>In London, the clock strikes:
        <span id="bongs">${'BONG '.repeat(hours)}</span></p>
      <button onClick="refresh(this)">Refresh</button>
    </body>
  </html>`);
});

    2. ونقطة نهاية أخرى لإرجاع عدد BONG كواجهة برمجة التطبيقات (API)، بتنسيق JSON، ضمن /api :

      app.get('/api', (req, res) => {
  const date = new Date();
  const hours = (date.getHours() % 12) + 1;  // London is UTC + 1hr;
  res.json({bongs: 'BONG '.repeat(hours)});
});

  4. تصدير تطبيق Express.js كوظيفة HTTPS:

    exports.app = functions.https.onRequest(app);

  5. في ملف firebase.json الخاص بك، قم بتوجيه جميع الطلبات إلى وظيفة app . تسمح عملية إعادة الكتابة هذه لـ Express.js بخدمة المسار الفرعي المختلف الذي قمنا بتكوينه (في هذا المثال، / و /api ).

    {
 "hosting": {
   // ...

   // Add the "rewrites" attribute within "hosting"
   "rewrites": [ {
     "source": "**",
     "function": "app"
   } ]
 }
}

إضافة الوسيطة

بالاستمرار في مثالنا، الآن بعد أن أصبحت تستخدم Express.js، يمكنك إضافة البرنامج الوسيط Express.js بالطريقة النموذجية. على سبيل المثال، يمكنك تمكين طلبات CORS على نقاط النهاية الخاصة بنا.

  1. قم بتثبيت البرنامج الوسيط cors عن طريق تشغيل الأمر التالي:

    npm install --save cors

  2. افتح ملف /functions/index.js الخاص بك، ثم أضف cors إلى تطبيق Express.js الخاص بك، كما يلي:

    const cors = require('cors')({origin: true});
app.use(cors);

تفضل بزيارة وثائق Cloud Functions لمعرفة المزيد حول استخدام Firebase مع تطبيقات Express ووحدات البرامج الوسيطة.

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