了解 2023 年 Google I/O 大会上介绍的 Firebase 亮点。了解详情

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    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. फायरबेस लोकल एमुलेटर सूट का उपयोग करके स्थानीय रूप से अपने कार्यों का परीक्षण करें।

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

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

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

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

चरण 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. अपनी साइट के लिए अपने फ़ंक्शन और उसकी कार्यक्षमता पर पुनरावृति करें। इन पुनरावृत्तियों का परीक्षण करने के लिए फायरबेस एमुलेटर का उपयोग करें।

सर्वोत्तम प्रदर्शन के लिए, निम्नलिखित क्षेत्रों में से किसी एक को चुनकर अपने कार्यों को होस्टिंग के साथ संयोजित करें:

  • us-west1
  • us-central1
  • us-east1
  • europe-west1
  • asia-east1

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

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

चरण 4: अपना फ़ंक्शन तैनात करें

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

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

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

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

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

एक वेब फ्रेमवर्क का प्रयोग करें

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

निम्नलिखित अनुभाग फायरबेस होस्टिंग और क्लाउड फ़ंक्शंस के साथ 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 गिनती को 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 ऐप को 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);
    

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

अगले कदम