Firebase is back at Google I/O on May 10! Register now

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

تنظيم صفحاتك في مجموعات يمكنك حفظ المحتوى وتصنيفه حسب إعداداتك المفضّلة.

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

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

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

قم بتوصيل وظائف السحابة باستضافة Firebase

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

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

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

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

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

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

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

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

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

        firebase init functions

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

      3. تحقق من وجود دليل functions في دليل المشروع المحلي (تم إنشاؤه بواسطة أمر Firebase الذي قمت بتشغيله للتو). دليل 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 المحلي الذي يعرضه CLI ، على سبيل المثال: 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)
  } ]
}

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

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

      firebase emulators:start

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

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

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

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

الخطوة 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 ، في وظائف السحابة لتقديم المحتوى الديناميكي لتطبيقك وكتابة تطبيقات الويب المعقدة بسهولة أكبر.

يوفر القسم التالي مثالًا تفصيليًا لاستخدام Express.js مع Firebase Hosting and Cloud Functions.

  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 كواجهة برمجة تطبيقات ، بتنسيق 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 ووحدات البرامج الوسيطة.

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