Cloudflare Workers और Deno के साथ एज कंप्यूटिंग · पाठ

फ़्रंटएंड फ़्रेमवर्क एकीकरण

गतिशील फुल-स्टैक ऐप के लिए Workers को React, Vue या Svelte जैसे लोकप्रिय फ़्रंटएंड फ़्रेमवर्क से जोड़ें

पाठ 2, कुल 4 में से11 चरण

फ़्रंटएंड फ़्रेमवर्क एकीकरण, CoddyKit पर Cloudflare Workers और Deno के साथ एज कंप्यूटिंग का एक निःशुल्क पाठ है। यह 4 में से 2वाँ पाठ है। आप नीचे पूरा पाठ निःशुल्क पढ़ सकते हैं—फिर अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर के साथ ब्राउज़र में इसका व्यावहारिक अभ्यास कर सकते हैं। यह Cloudflare Workers और Deno के साथ एज कंप्यूटिंग सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। Cloudflare Workers और Deno के साथ एज कंप्यूटिंग पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

फ्रंटएंड अनुप्रयोगों के साथ फुल-स्टैक एज

Cloudflare Workers के साथ फ्रंटएंड फ़्रेमवर्क के एकीकरण में आपका स्वागत है! इस पाठ में बताया गया है कि React, Vue या Svelte जैसे लोकप्रिय फ़्रेमवर्क Workers के साथ सहज रूप से काम करके एज पर गतिशील, फुल-स्टैक अनुप्रयोग कैसे बना सकते हैं।

इनका संयोजन करने पर आपको दोनों दुनियाओं का सर्वोत्तम लाभ मिलता है: एक समृद्ध उपयोगकर्ता इंटरफ़ेस और अत्यंत तेज़, विश्वभर में वितरित बैकएंड।

फ्रंटएंड Workers से कैसे संवाद करते हैं

मूल रूप से, उपयोगकर्ता के ब्राउज़र में चलने वाला फ्रंटएंड फ़्रेमवर्क मानक HTTP अनुरोधों का उपयोग करके Cloudflare Worker से संवाद करता है। Worker एक हल्के API बैकएंड की तरह काम करता है।

फ्रंटएंड Worker के URL पर अनुरोध (GET, POST आदि) भेजता है।
Worker अनुरोध को संसाधित करके प्रतिक्रिया लौटाता है, जो अक्सर json डेटा होता है।
इसके बाद फ्रंटएंड इस डेटा के आधार पर UI अपडेट करता है।

Worker: एक सरल JSON API

आइए एक ऐसे बुनियादी Worker को देखें जो सरल API की तरह काम करता है और JSON संदेश लौटाता है। आपका फ्रंटएंड अनुप्रयोग इस एंडपॉइंट से आसानी से डेटा प्राप्त कर सकता है।

Worker की प्रतिक्रिया देखने के लिए इस उदाहरण को चलाकर देखें।

export default {
  async fetch(request, env, ctx) {
    const data = {
      message: "Hello from the Edge!",
      timestamp: new Date().toISOString()
    };

    return new Response(JSON.stringify(data), {
      headers: { 'Content-Type': 'application/json' }
    });
  }
}

फ्रंटएंड: GET अनुरोध करना

अपने फ्रंटएंड ऐप (जैसे React घटक) से Worker को कॉल करने के लिए आप ब्राउज़र के fetch API या Axios जैसी लाइब्रेरी का उपयोग करेंगे। सामान्य रूप से यह इस प्रकार दिखाई देता है (यह वैचारिक कोड है, अपने-आप चलने योग्य नहीं):

fetch('/api/hello')
  .then(response => response.json())
  .then(data => console.log(data));

फ्रंटएंड Worker को GET अनुरोध भेजता है, और Worker फिर JSON डेटा वापस भेजता है।

Worker: POST अनुरोध संभालना

फ्रंटएंड अक्सर बैकएंड को डेटा भेजने के लिए POST अनुरोधों का उपयोग करते हैं, जैसे फ़ॉर्म सबमिट करते समय या कोई नया आइटम बनाते समय। Worker यह डेटा प्राप्त करने के लिए अनुरोध के body को पढ़ सकता है।

इस Worker को चलाएँ और कल्पना करें कि आपका फ्रंटएंड body में {"name": "Coddy"} के साथ POST अनुरोध भेज रहा है।

export default {
  async fetch(request, env, ctx) {
    if (request.method === 'POST') {
      try {
        const body = await request.json();
        const name = body.name || 'Guest';
        return new Response(JSON.stringify({ greeting: `Hello, ${name}!` }), {
          headers: { 'Content-Type': 'application/json' }
        });
      } catch (error) {
        return new Response('Invalid JSON body', { status: 400 });
      }
    }
    return new Response('Please send a POST request.', { status: 405 });
  }
}

एज API के लिए CORS को समझना

CORS (क्रॉस-ओरिजिन संसाधन साझाकरण) एक सुरक्षा सुविधा है, जिसका उपयोग ब्राउज़र करते हैं। यदि आपका फ्रंटएंड (जैसे myapp.com) किसी अलग ओरिजिन (जैसे myworker.workers.dev) पर मौजूद Worker से डेटा प्राप्त करने का प्रयास करता है, तो ब्राउज़र उसे रोक देगा, जब तक कि Worker स्पष्ट रूप से इसकी अनुमति न दे।

CORS सक्षम करने के लिए आपको अपने Worker की प्रतिक्रियाओं में विशिष्ट HTTP हेडर जोड़ने होंगे।

Worker में बुनियादी CORS लागू करना

अपने फ्रंटएंड को Worker से संवाद करने की अनुमति देने के लिए, अपने Worker की प्रतिक्रियाओं में CORS हेडर शामिल करें। Access-Control-Allow-Origin हेडर अत्यंत महत्वपूर्ण है।

यह उदाहरण दिखाता है कि किसी भी ओरिजिन (*) से आने वाले अनुरोधों की अनुमति देते हुए बुनियादी CORS हेडर कैसे जोड़े जाते हैं। उत्पादन परिवेश में अपने फ्रंटएंड का सटीक डोमेन निर्दिष्ट करें।

export default {
  async fetch(request, env, ctx) {
    const headers = {
      'Content-Type': 'application/json',
      'Access-Control-Allow-Origin': '*', // Allow requests from any origin
      'Access-Control-Allow-Methods': 'GET, POST, OPTIONS',
      'Access-Control-Allow-Headers': 'Content-Type'
    };

    if (request.method === 'OPTIONS') {
      // Handle preflight requests for CORS
      return new Response(null, { headers });
    }

    const data = { message: 'CORS enabled response!' };
    return new Response(JSON.stringify(data), { headers });
  }
}

पर्यावरण चर और सीक्रेट

आपके Workers को API कुंजियों या अन्य संवेदनशील कॉन्फ़िगरेशन तक पहुँच की आवश्यकता हो सकती है। इन्हें सुरक्षित रूप से उपलब्ध कराने के लिए पर्यावरण चर (जिन्हें Workers में अक्सर 'बाइंडिंग' कहा जाता है) का उपयोग करें।

सीक्रेट को सीधे अपने कोड में कभी न लिखें और न ही उन्हें फ्रंटएंड के सामने उजागर करें। Workers रनटाइम पर इन तक सुरक्षित रूप से पहुँच सकते हैं और संवेदनशील कार्यों के लिए प्रॉक्सी की तरह काम कर सकते हैं।

wrangler.toml में चर परिभाषित करें।
अपने Worker में env ऑब्जेक्ट के माध्यम से उन तक पहुँचें।

एकीकरण के लिए सर्वोत्तम अभ्यास

मज़बूत फुल-स्टैक एज अनुप्रयोग बनाने के लिए इन सर्वोत्तम अभ्यासों पर विचार करें:

API संस्करण निर्धारण: आसान अपडेट के लिए /api/v1/users जैसे पथों का उपयोग करें।
स्पष्ट एंडपॉइंट नामकरण: अपने Worker के रूट को सहज बनाएँ (जैसे /products, /orders)।
त्रुटि प्रबंधन: अपने Worker से अर्थपूर्ण HTTP स्थिति कोड (400, 401, 404, 500) और JSON त्रुटि संदेश लौटाएँ।
प्रमाणीकरण: Workers प्रमाणीकरण टोकन (JWT) संभाल सकते हैं और आपके फ्रंटएंड के लिए उपयोगकर्ता सत्रों का प्रबंधन कर सकते हैं।

त्वरित जाँच: Worker एकीकरण

किसी फ्रंटएंड फ़्रेमवर्क को Cloudflare Worker के साथ एकीकृत करते समय, फ्रंटएंड द्वारा Worker से गतिशील डेटा प्राप्त करने का प्राथमिक तरीका क्या है?

इंटरैक्टिव पाठ में इसका उत्तर दें

पुनरावलोकन: फुल-स्टैक एज एकीकरण

इस पाठ में हमने देखा कि फ्रंटएंड फ़्रेमवर्क को Cloudflare Workers के साथ कैसे एकीकृत किया जाता है। हमने सीखा कि Workers शक्तिशाली, विश्वभर में वितरित API बैकएंड की तरह काम करते हैं, जिनसे आपके फ्रंटएंड ऐप मानक HTTP अनुरोधों के माध्यम से संवाद कर सकते हैं।

मुख्य बातें:

Workers JSON डेटा उपलब्ध कराते हैं और विभिन्न अनुरोध विधियों को संभालते हैं।
क्रॉस-ओरिजिन संचार के लिए CORS हेडर आवश्यक हैं।
सर्वोत्तम अभ्यासों में स्पष्ट API डिज़ाइन और सुरक्षित सीक्रेट प्रबंधन शामिल हैं।

यह एकीकरण आपको एज पर तेज़, मापनीय फुल-स्टैक अनुप्रयोग बनाने की सुविधा देता है!

शुरुआत निःशुल्क

एआई शिक्षक के साथ Cloudflare Workers और Deno के साथ एज कंप्यूटिंग सीखें — निःशुल्क

अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।

पाठ्यक्रम: 12
पाठ: 47

निःशुल्क सीखना शुरू करें पूरा पाठ्यक्रम देखें

अक्सर पूछे जाने वाले प्रश्न

क्या “फ़्रंटएंड फ़्रेमवर्क एकीकरण” पाठ निःशुल्क है?

हाँ—“फ़्रंटएंड फ़्रेमवर्क एकीकरण” का पूरा पाठ यहाँ वेब पर निःशुल्क पढ़ा जा सकता है। इंटरैक्टिव अभ्यास (अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर) करने और Cloudflare Workers और Deno के साथ एज कंप्यूटिंग पाठ्यक्रम का बाकी हिस्सा अनलॉक करने के लिए CoddyKit PRO लें। Cloudflare Workers और Deno के साथ एज कंप्यूटिंग पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

“फ़्रंटएंड फ़्रेमवर्क एकीकरण” में मैं क्या सीखूँगा?

गतिशील फुल-स्टैक ऐप के लिए Workers को React, Vue या Svelte जैसे लोकप्रिय फ़्रंटएंड फ़्रेमवर्क से जोड़ें आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ Cloudflare Workers और Deno के साथ एज कंप्यूटिंग का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

क्या Cloudflare Workers और Deno के साथ एज कंप्यूटिंग शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?

पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर Cloudflare Workers और Deno के साथ एज कंप्यूटिंग शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 2वाँ पाठ है।

“फ़्रंटएंड फ़्रेमवर्क एकीकरण” पाठ पूरा करने में कितना समय लगता है?

CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।

क्या मैं इस Cloudflare Workers और Deno के साथ एज कंप्यूटिंग पाठ में कोड लिख और चला सकता हूँ?

हाँ। हर Cloudflare Workers और Deno के साथ एज कंप्यूटिंग पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।

इस पाठ्यक्रम के सभी पाठ

← Cloudflare Workers और Deno के साथ एज कंप्यूटिंग पर वापस जाएँ