Catch up on highlights from Firebase at Google I/O 2023. Learn more

क्लाउड फ़ंक्शंस के साथ गतिशील सामग्री परोसें और माइक्रोसर्विसेज होस्ट करें

फायरबेस होस्टिंग के साथ पेयर क्लाउड फंक्शंस आपकी डायनामिक सामग्री को जनरेट और सर्व करने के लिए या माइक्रोसर्विसेज के रूप में REST API का निर्माण करते हैं।

फायरबेस के लिए क्लाउड फ़ंक्शंस आपको HTTPS अनुरोधों के जवाब में स्वचालित रूप से बैकएंड कोड चलाने देता है। आपका कोड Google के क्लाउड में संग्रहीत है और प्रबंधित वातावरण में चलता है। अपने स्वयं के सर्वरों को प्रबंधित और स्केल करने की कोई आवश्यकता नहीं है।

उदाहरण के लिए फायरबेस होस्टिंग के साथ एकीकृत क्लाउड फ़ंक्शंस के लिए मामलों और नमूनों का उपयोग करें, हमारे सर्वर रहित अवलोकन पर जाएँ।

क्लाउड फ़ंक्शंस को फायरबेस होस्टिंग से कनेक्ट करें

यह अनुभाग किसी फ़ंक्शन को Firebase होस्टिंग से जोड़ने के लिए एक पूर्वाभ्यास उदाहरण प्रदान करता है।

ध्यान दें कि गतिशील सामग्री परोसने के प्रदर्शन को बेहतर बनाने के लिए, आप वैकल्पिक रूप से अपनी कैश सेटिंग को ट्यून कर सकते हैं।

चरण 1: क्लाउड फ़ंक्शंस सेट अप करें

  1. सुनिश्चित करें कि आपके पास फायरबेस सीएलआई का नवीनतम संस्करण है और आपने फायरबेस होस्टिंग को इनिशियलाइज़ किया है।

    सीएलआई स्थापित करने और होस्टिंग आरंभ करने के बारे में विस्तृत निर्देशों के लिए, होस्टिंग के लिए प्रारंभ करें मार्गदर्शिका देखें।

  2. सुनिश्चित करें कि आपने क्लाउड फ़ंक्शंस सेट अप कर लिया है:

    • यदि आपने क्लाउड फ़ंक्शंस पहले ही सेट कर लिए हैं, तो आप चरण 2 पर आगे बढ़ सकते हैं: एक HTTPS फ़ंक्शन बनाएँ और उसका परीक्षण करें

    • यदि आपने क्लाउड फ़ंक्शंस सेट नहीं किए हैं:

      1. अपनी प्रोजेक्ट डायरेक्टरी के रूट से निम्नलिखित कमांड चलाकर क्लाउड फ़ंक्शंस को इनिशियलाइज़ करें:

        firebase init functions
      2. संकेत दिए जाने पर, JavaScript चुनें (यह वॉक-थ्रू उदाहरण JS का उपयोग करता है)।

      3. जांचें कि आपके पास अपनी स्थानीय प्रोजेक्ट निर्देशिका में एक functions निर्देशिका है (आपके द्वारा चलाए गए फायरबेस कमांड द्वारा बनाई गई)। यह functions निर्देशिका वह जगह है जहां क्लाउड फ़ंक्शंस के लिए कोड रहता है।

चरण 2: अपनी होस्टिंग साइट के लिए HTTPS फ़ंक्शन बनाएं और उसका परीक्षण करें

  1. अपने पसंदीदा संपादक में /functions/index.js खोलें।

  2. फ़ाइल की सामग्री को निम्न कोड से बदलें।

    यह कोड एक HTTPS फ़ंक्शन बनाता है ( bigben नाम दिया गया है) जो HTTPS अनुरोधों का जवाब दिन के प्रत्येक घंटे के लिए एक घड़ी की तरह BONG के साथ देता है।

    const functions = require('firebase-functions');
    
    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 स्थानीय एम्यूलेटर सूट का उपयोग करके स्थानीय रूप से अपने कार्यों का परीक्षण करें।

    1. अपनी स्थानीय प्रोजेक्ट निर्देशिका की जड़ से, निम्न कमांड चलाएँ:

      firebase emulators:start
    2. सीएलआई द्वारा लौटाए गए स्थानीय यूआरएल के माध्यम से फ़ंक्शन तक पहुंचें, उदाहरण के लिए: http://localhost:5001/ PROJECT_ID /us-central1/bigben

HTTPS अनुरोधों के बारे में अधिक जानने के लिए क्लाउड फ़ंक्शंस के दस्तावेज़ देखें।

अगला चरण आपको बताता है कि इस HTTPS फ़ंक्शन को Firebase होस्टिंग URL से कैसे एक्सेस किया जाए ताकि यह आपकी Firebase-होस्ट की गई साइट के लिए गतिशील सामग्री उत्पन्न कर सके।

चरण 3: सीधे HTTPS आपके फ़ंक्शन के लिए अनुरोध करता है

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

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

  2. hosting अनुभाग के अंतर्गत निम्न rewrite कॉन्फ़िगरेशन जोड़ें:

    "hosting": {
      // ...
    
      // Add the "rewrites" attribute within "hosting"
      "rewrites": [ {
        "source": "/bigben",
        "function": "bigben",
        "region": "us-central1"  // optional (see note below)
        "pinTag": true           // optional (see note below)
      } ]
    }
    
  3. पुष्टि करें कि आपका रीडायरेक्ट फायरबेस एमुलेटर के साथ फिर से परीक्षण करके अपेक्षा के अनुरूप काम करता है।

    1. अपनी स्थानीय प्रोजेक्ट निर्देशिका की जड़ से, निम्न कमांड चलाएँ:

      firebase emulators:start
    2. सीएलआई (आमतौर पर localhost:5000 ) द्वारा लौटाए गए आपकी साइट के लिए स्थानीय रूप से होस्ट किए गए यूआरएल पर जाएं, लेकिन bigben के साथ यूआरएल संलग्न करें, जैसे: http://localhost:5000/bigben

  4. अपनी साइट के लिए अपने कार्य और इसकी कार्यक्षमता पर पुनरावृति करें। इन पुनरावृत्तियों का परीक्षण करने के लिए फायरबेस एमुलेटर का उपयोग करें।

पुनर्लेखन नियमों के बारे में अधिक जानकारी के लिए होस्टिंग कॉन्फ़िगरेशन पृष्ठ पर जाएं। आप विभिन्न होस्टिंग कॉन्फ़िगरेशन के लिए प्रतिक्रियाओं के प्राथमिकता क्रम के बारे में भी जान सकते हैं।

ध्यान दें कि गतिशील सामग्री परोसने के प्रदर्शन को बेहतर बनाने के लिए, आप वैकल्पिक रूप से अपनी कैश सेटिंग को ट्यून कर सकते हैं।

चरण 4: अपने कार्य को तैनात करें

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

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

    firebase deploy --only functions,hosting
  2. निम्नलिखित यूआरएल पर अपनी लाइव साइट और अपने कार्य तक पहुंचें:

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

    • कोई भी कनेक्टेड कस्टम डोमेन :
      CUSTOM_DOMAIN /bigben

एक वेब ढांचे का प्रयोग करें

आप अपने ऐप की गतिशील सामग्री को सर्व करने और जटिल वेब ऐप को अधिक आसानी से लिखने के लिए क्लाउड फ़ंक्शंस में Express.js जैसे वेब फ्रेमवर्क का उपयोग कर सकते हैं।

निम्न अनुभाग Firebase होस्टिंग और क्लाउड फ़ंक्शंस के साथ Express.js का उपयोग करने के लिए एक वॉक-थ्रू उदाहरण प्रदान करता है।

  1. अपनी functions निर्देशिका से निम्न आदेश चलाकर अपने स्थानीय प्रोजेक्ट में Express.js स्थापित करें:

    npm install express --save
  2. अपनी /functions/index.js फ़ाइल खोलें, फिर Express.js को इम्पोर्ट और इनिशियलाइज़ करें:

    const functions = require('firebase-functions');
    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 ऐप को HTTPS फ़ंक्शन के रूप में निर्यात करें:

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

एक्सप्रेस ऐप और मिडलवेयर मॉड्यूल के साथ फायरबेस का उपयोग करने के बारे में अधिक जानने के लिए क्लाउड फ़ंक्शंस के दस्तावेज़ पर जाएं।

अगले कदम