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 सीएलआई का सबसे नया वर्शन हो और आपने 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

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

आपके पास वेब फ़्रेमवर्क का इस्तेमाल करने का विकल्प होता है, जैसे कि 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. /api में, JSON फ़ॉर्मैट में एपीआई के तौर पर BONG की गिनती दिखाने के लिए, एक और एंडपॉइंट:

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

Cloud Functions दस्तावेज़ पर जाएं देखें.

अगले चरण