Cloud Functions की मदद से डाइनैमिक कॉन्टेंट उपलब्ध कराएं और माइक्रोसर्विस होस्ट करें

अपने डाइनैमिक कॉन्टेंट को जनरेट और डिलीवर करने के लिए, Cloud Functions को Firebase Hosting के साथ पेयर करें. इसके अलावा, REST API को माइक्रोसेवाओं के तौर पर बनाया जा सकता है.

Cloud Functions for Firebase की मदद से, एचटीटीपीएस अनुरोधों के जवाब में बैकएंड कोड अपने-आप चलाया जा सकता है. आपका कोड, Google के क्लाउड में सेव होता है और मैनेज किए जा रहे एनवायरमेंट में चलता है. आपको अपने सर्वर मैनेज करने और उन्हें स्केल करने की ज़रूरत नहीं होती.

Firebase Hosting के साथ इंटिग्रेट किए गए Cloud Functions के इस्तेमाल के उदाहरण और सैंपल देखने के लिए, सर्वरलेस की खास जानकारी पर जाएं.

Cloud Functions को Firebase Hosting से कनेक्ट करना

इस सेक्शन में, किसी फ़ंक्शन को Firebase Hosting से कनेक्ट करने का उदाहरण दिया गया है.

ध्यान दें कि डाइनैमिक कॉन्टेंट दिखाने की परफ़ॉर्मेंस को बेहतर बनाने के लिए, कैश मेमोरी की सेटिंग को अपनी ज़रूरत के हिसाब से बदला जा सकता है.

पहला चरण: Cloud Functions सेट अप करना

  1. पक्का करें कि आपके पास Firebase CLI का सबसे नया वर्शन हो और आपने Firebase Hosting को शुरू किया हो.

    सीएलआई इंस्टॉल करने और Hosting को शुरू करने के बारे में ज़्यादा जानकारी के लिए, Hosting को इस्तेमाल करने से जुड़ी गाइड देखें.

  2. पक्का करें कि आपने Cloud Functions सेट अप किया हो:

    • अगर आपने Cloud Functions पहले से ही सेट अप कर लिया है, तो दूसरा चरण: एचटीटीपीएस फ़ंक्शन बनाएं और उसकी जांच करें पर जाएं.

    • अगर आपने Cloud Functions सेट अप नहीं किया है, तो:

      1. अपनी प्रोजेक्ट डायरेक्ट्री के रूट से, यह कमांड चलाकर Cloud Functions को शुरू करें:

        firebase init functions

      2. जब आपसे कहा जाए, तब JavaScript चुनें. इस उदाहरण में JS का इस्तेमाल किया गया है.

      3. देखें कि आपकी स्थानीय प्रोजेक्ट डायरेक्ट्री में functions डायरेक्ट्री मौजूद हो. यह डायरेक्ट्री, अभी-अभी चलाई गई Firebase कमांड से बनाई जाती है. functions डायरेक्ट्री में, Cloud Functions का कोड होता है.

दूसरा चरण: अपनी Hosting साइट के लिए, एचटीटीपीएस फ़ंक्शन बनाएं और उसकी जांच करें

  1. अपने पसंदीदा एडिटर में /functions/index.js खोलें.

  2. फ़ाइल के कॉन्टेंट को इस कोड से बदलें.

    इस कोड से एक एचटीटीपीएस फ़ंक्शन (bigben नाम वाला) बनाया जाता है. यह फ़ंक्शन, एचटीटीपीएस अनुरोधों का जवाब देता है. इसमें दिन के हर घंटे के लिए 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. सीएलआई से मिले लोकल यूआरएल के ज़रिए फ़ंक्शन को ऐक्सेस करें. उदाहरण के लिए: http://localhost:5001/PROJECT_ID/us-central1/bigben.

एचटीटीपीएस अनुरोधों के बारे में ज़्यादा जानने के लिए, Cloud Functions दस्तावेज़ पढ़ें.

अगले चरण में, आपको Firebase Hosting यूआरएल से इस एचटीटीपीएस फ़ंक्शन को ऐक्सेस करने का तरीका बताया गया है, ताकि यह Firebase पर होस्ट की गई आपकी साइट के लिए डाइनैमिक कॉन्टेंट जनरेट कर सके.

तीसरा चरण: अपने फ़ंक्शन को सीधे एचटीटीपीएस अनुरोध भेजना

फिर से लिखने के नियमों की मदद से, किसी खास पैटर्न से मेल खाने वाले अनुरोधों को एक ही डेस्टिनेशन पर भेजा जा सकता है. यहां दिए गए चरणों में बताया गया है कि अपनी Hosting साइट पर, ../bigben पाथ से आने वाले सभी अनुरोधों को bigben फ़ंक्शन को लागू करने के लिए कैसे भेजा जाता है.

  1. अपनी firebase.json फ़ाइल खोलें.

  2. hosting सेक्शन में जाकर, यह rewrite कॉन्फ़िगरेशन जोड़ें:

    "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. अपनी साइट के लिए, स्थानीय तौर पर होस्ट किए गए उस यूआरएल पर जाएं जो सीएलआई ने दिखाया है. आम तौर पर, यह localhost:5000 होता है. हालांकि, यूआरएल में bigben जोड़ें. जैसे: http://localhost:5000/bigben

  4. अपनी साइट के लिए, फ़ंक्शन और उसके काम करने के तरीके को बेहतर बनाएं. इन वर्शन को टेस्ट करने के लिए, Firebase एम्युलेटर का इस्तेमाल करें.

बेहतर परफ़ॉर्मेंस के लिए, अपने फ़ंक्शन को Hosting के साथ रखें. इसके लिए, इनमें से कोई एक क्षेत्र चुनें:

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

रीराइट करने के नियमों के बारे में ज़्यादा जानकारी पाने के लिए, Hosting कॉन्फ़िगरेशन पेज पर जाएं. अलग-अलग Hosting कॉन्फ़िगरेशन के लिए, जवाबों के प्राथमिकता क्रम के बारे में भी जानें.

ध्यान दें कि डाइनैमिक कॉन्टेंट दिखाने की परफ़ॉर्मेंस को बेहतर बनाने के लिए, कैश मेमोरी की सेटिंग को अपनी ज़रूरत के हिसाब से बदला जा सकता है.

चौथा चरण: फ़ंक्शन को डिप्लॉय करना

जब आपका फ़ंक्शन एम्युलेटर में आपकी ज़रूरत के मुताबिक काम करने लगे, तब उसे डिप्लॉय किया जा सकता है. साथ ही, असली प्रोजेक्ट के संसाधनों के साथ उसकी जांच की जा सकती है और उसे चलाया जा सकता है. यह प्रोडक्शन में चल रहे फ़ंक्शन के लिए, स्केलिंग के तरीके को कंट्रोल करने के लिए रनटाइम विकल्प सेट करने का सही समय है.

  1. अपने फ़ंक्शन के साथ-साथ Hosting कॉन्टेंट और कॉन्फ़िगरेशन को अपनी साइट पर डिप्लॉय करें. इसके लिए, अपने लोकल प्रोजेक्ट डायरेक्ट्री के रूट से यह कमांड चलाएं:

    firebase deploy --only functions,hosting

  2. इन यूआरएल पर जाकर, अपनी लाइव साइट और फ़ंक्शन को ऐक्सेस करें:

    • आपके Firebase सबडोमेन:
      PROJECT_ID.web.app/bigben और PROJECT_ID.firebaseapp.com/bigben

    • कनेक्ट किए गए कस्टम डोमेन:
      CUSTOM_DOMAIN/bigben

वेब फ़्रेमवर्क का इस्तेमाल करना

Cloud Functions में, Express.js जैसे वेब फ़्रेमवर्क का इस्तेमाल किया जा सकता है. इससे, अपने ऐप्लिकेशन का डाइनैमिक कॉन्टेंट दिखाया जा सकता है. साथ ही, जटिल वेब ऐप्लिकेशन को ज़्यादा आसानी से लिखा जा सकता है.

इस सेक्शन में, Firebase Hosting और Cloud Functions के साथ Express.js का इस्तेमाल करने का उदाहरण दिया गया है.

  1. अपनी functions डायरेक्ट्री में जाकर, यहां दी गई कमांड चलाकर अपने लोकल प्रोजेक्ट में Express.js इंस्टॉल करें:

    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 ऐप्लिकेशन को एचटीटीपीएस फ़ंक्शन के तौर पर एक्सपोर्ट करें:

    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 मिडलवेयर जोड़ा जा सकता है. उदाहरण के लिए, हमारे एंडपॉइंट पर सीओआरएस अनुरोधों को चालू किया जा सकता है.

  1. cors मिडलवेयर को इंस्टॉल करने के लिए, यह कमांड चलाएं:

    npm install --save cors

  2. अपनी /functions/index.js फ़ाइल खोलें. इसके बाद, अपने Express.js ऐप्लिकेशन में cors जोड़ें. जैसे:

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

Express ऐप्लिकेशन और मिडलवेयर मॉड्यूल के साथ Firebase का इस्तेमाल करने के बारे में ज़्यादा जानने के लिए, Cloud Functions दस्तावेज़ पढ़ें.

अगले चरण