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

يمكنك إقران Cloud Functions مع Firebase Hosting لإنشاء المحتوى الديناميكي وعرضه أو إنشاء واجهات برمجة تطبيقات REST كخدمات مصغّرة.

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

للاطّلاع على حالات الاستخدام والنماذج الخاصة بـ Cloud Functions المدمَجة مع Firebase Hosting، يُرجى الانتقال إلى نظرتنا العامة حول الخدمات بلا خادم.

ربط Cloud Functions بـ Firebase Hosting

يقدّم هذا القسم مثالاً تفصيليًا لربط دالة بـ Firebase Hosting.

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

الخطوة 1: إعداد Cloud Functions

  1. تأكَّد من أنّ لديك أحدث إصدار من Firebase CLI وأنّك بدأت استخدام Firebase Hosting.

    للحصول على تعليمات مفصّلة حول تثبيت واجهة سطر الأوامر وبدء استخدام Hosting، يُرجى الاطّلاع على دليل البدء في استخدام Hosting.

  2. تأكَّد من إعداد Cloud Functions

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

    • إذا لم يسبق لك إعداد ليس Cloud Functions:

      1. ابدأ استخدام Cloud Functions من خلال تنفيذ الأمر التالي من جذر دليل مشروعك:

        firebase init functions

      2. عندما يُطلب منك ذلك، اختَر JavaScript (يستخدم هذا المثال التفصيلي JavaScript).

      3. تأكَّد من وجود دليل functions في دليل مشروع على جهاز المستخدم (الذي تم إنشاؤه من خلال أمر Firebase الذي نفّذته للتو). هذا functions الدليل هو المكان الذي يتم فيه تخزين رمز Cloud Functions

الخطوة 2: إنشاء دالة HTTPS واختبارها لموقعك الإلكتروني على Hosting

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

  2. استبدِل محتوى الملف بالرمز التالي.

    ينشئ هذا الرمز دالة HTTPS (تُسمّى bigben) تردّ على طلبات HTTPS بعرض BONG لكل ساعة من اليوم، تمامًا مثل الساعة.

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

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 هذه من عنوان Firebase Hosting URL لكي تتمكّن من إنشاء محتوى ديناميكي لموقعك الإلكتروني المستضاف على Firebase.

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

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

  1. افتح ملف firebase.json.

  2. أضِف إعداد rewrite التالي ضِمن قسم hosting:

    "hosting": {
  // ...

  // Add the "rewrites" attribute within "hosting"
  "rewrites": [ {
    "source": "/bigben",
    "function": {
      "functionId": "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 لاختبار هذه التحسينات.

للحصول على أفضل أداء، ضَع الدوال في نفس موقع Hosting من خلال اختيار إحدى المناطق التالية:

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

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

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

الخطوة 4: تفعيل دالتك

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

  1. انشر دالتك ومحتوى Hosting وإعداداته على موقعك الإلكتروني من خلال تنفيذ الأمر التالي من جذر دليل مشروع على جهاز المستخدم:

    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 Hosting وCloud Functions.

  1. ثبِّت Express.js في مشروع على جهاز المستخدم من خلال تنفيذ الأمر التالي من دليل functions:

    npm install express --save

  2. افتح ملف /functions/index.js، ثم استورِد Express.js وابدأ استخدامه:

    const functions = require('firebase-functions/v1');
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 كواجهة برمجة تطبيقات بتنسيق 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 ووحدات البرمجيات الوسيطة.

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