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 होस्ट की गई साइट के लिए डाइनैमिक कॉन्टेंट जनरेट कर सके.

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

फिर से लिखने के नियमों की मदद से, किसी खास पैटर्न से मैच करने वाले अनुरोधों को एक ही डेस्टिनेशन पर भेजा जा सकता है. यहां दिए गए चरणों में, bigben फ़ंक्शन को लागू करने के लिए, अपनी Hosting साइट पर मौजूद पाथ ../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 की गिनती को एपीआई के तौर पर, /api में JSON फ़ॉर्मैट में दिखाने के लिए एक और एंडपॉइंट:

      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 दस्तावेज़ पर जाएं.

अगले चरण