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

डाइनैमिक कॉन्टेंट जनरेट और दिखाने के लिए, Cloud Functions को Firebase Hosting से जोड़ें. इसके अलावा, माइक्रोसेवाओं के तौर पर REST एपीआई बनाएं.

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

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

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

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

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

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

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

    CLI इंस्टॉल करने और 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. CLI से मिले स्थानीय यूआरएल के ज़रिए, फ़ंक्शन को ऐक्सेस करें. उदाहरण के लिए: उदाहरण के लिए: http://localhost:5001/PROJECT_ID/us-central1/bigben.

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

अगले चरण में, आपको इस एचटीटीपीएस फ़ंक्शन को from a Firebase Hosting URL से ऐक्सेस करने का तरीका बताया जाएगा, ताकि यह 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. CLI से मिले, स्थानीय तौर पर होस्ट किए गए अपनी साइट के यूआरएल (आम तौर पर 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 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. और /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 मिडलवेयर को सामान्य तरीके से जोड़ा जा सकता है. उदाहरण के लिए, हमारे एंडपॉइंट पर CORS अनुरोधों को चालू किया जा सकता है.

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

अगले चरण