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

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

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

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

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);

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

अगले चरण