8 निःशुल्क React ऐप होस्टिंग सेवाएँ1 min read

तो आपने एक React ऐप बनाया, लेकिन आप निश्चित नहीं हैं कि इसे कैसे या कहाँ होस्ट करना है। इस लेख में, हम आपको 8 निःशुल्क React होस्टिंग सेवाओं के बारे में बताएंगे, और दिखाएंगे कि हमने उन्हें कैसे तैनात किया यह React ऐप प्रत्येक का उपयोग करके, और आपको बताएंगे कि इस प्रक्रिया में हमने क्या सीखा।

हमने Figma का उपयोग करके अपना ऐप बनाया Anima प्लगइन, जिसने हमें कार्यक्षमता, प्रतिक्रियाशील व्यवहार और समृद्ध मीडिया जोड़ने की अनुमति दी संपूर्ण यूआई के लिए डेव-रेडी React कोड निर्यात करें. इसे डिज़ाइन करने और तैनात करने में हमें एक दिन लगा।

अपने React ऐप को निःशुल्क कहां होस्ट करें

React जैसे घटक-आधारित फ्रेमवर्क के बढ़ने के कारण सर्वर रहित होस्टिंग समाधानों की संख्या बढ़ रही है। Amazon AWS, Microsoft Azure और Google Cloud वर्तमान में प्रमुख प्लेटफ़ॉर्म हैं। हालाँकि, समर्पित फ्रंटएंड होस्टिंग सेवाओं की ओर बदलाव बढ़ रहा है, जिसके लिए कम प्रयास की आवश्यकता होती है, और यह आपको कुछ ही समय में चालू कर सकती है – और अधिकांश में सीआई/सीडी शामिल है। यहां 8 निःशुल्क React ऐप होस्टिंग सेवाएँ हैं जिनका हमने परीक्षण किया:

1. Netlify

2. Vercel

3. एडब्ल्यूएस प्रवर्धित करें

4. फायरबेस

5. GitHub पेज

6. गिटलैब पेज

7. प्रदान करना

8. आवेश

आइए इन निःशुल्क React ऐप होस्टिंग सेवाओं के बारे में अधिक विस्तार से जानें, और प्रदर्शित करें कि हमने प्रत्येक का उपयोग करके React ऐप कैसे तैनात किया। 

Netlify

पृष्ठभूमि

Netlify की स्थापना 2014 में हुई थी और इसने शुरू से ही स्थिर वेबसाइटों की मेजबानी पर ध्यान केंद्रित किया था। अपने उदार मुक्त स्तर के कारण इसने बहुत सारे डेवलपर्स को आकर्षित किया। कुछ साल बाद, Netlify सबसे लोकप्रिय JAMstack और स्टेटिक वेबसाइट होस्ट में से एक बन गया।

का उपयोग कैसे करें

1. आदर्श रूप से, आप GitHub के साथ पंजीकरण या साइन इन करेंगे। यह सुनिश्चित करता है कि आप अपनी प्रोफ़ाइल पर रिपॉजिटरी तक पहुंच सकते हैं और उन्हें शीघ्रता से तैनात कर सकते हैं।
2. एक बार लॉग इन करने के बाद, “नई साइट जोड़ें” पर क्लिक करें और “मौजूदा प्रोजेक्ट आयात करें” चुनें।
3. फिर अपने प्रदाता के रूप में GitHub पर क्लिक करें।
4. “बैंक-वेबसाइट” या आपके प्रोजेक्ट का जो भी नाम हो उसे चुनें।
5. परिनियोजन सेटिंग्स को ठीक करें (हमारी वेबसाइट के मामले में, डिफ़ॉल्ट पूरी तरह से काम करते हैं), फिर “परिनियोजन साइट” पर क्लिक करें।
6. एक बार तैनात होने के बाद, आप इसे सार्वजनिक URL पर देख सकते हैं जिसे आप दुनिया के साथ साझा कर सकते हैं। वाह!

यहाँ है लाइव ऐप Netlify पर तैनात किया गया है।

पक्ष – विपक्ष

Netlify को स्थापित करना और तैनात करना आसान है, यह उल्लेख करने की आवश्यकता नहीं है कि यह सबसे तेज़ सेवाओं में से एक है जिसका हमने यहां परीक्षण किया है। एक नकारात्मक पक्ष यह है कि यदि आपको सहयोगियों और/या एक टीम की आवश्यकता है, तो आपको सशुल्क योजना में अपग्रेड करना होगा।

Vercel

पृष्ठभूमि

Vercel (मूल रूप से Zeit के नाम से जाना जाता है) की स्थापना 2015 में हुई थी और यह तेजी से प्रसिद्ध हो गया। वे Next.js के अनुरक्षक हैं, जो वेबसाइट बनाने के लिए एक लोकप्रिय React ढांचा है। वे गैर-व्यावसायिक वेबसाइटों के लिए एक निःशुल्क स्तर की पेशकश करते हैं, साथ ही सर्वर रहित कार्यों के लिए अपने एज नेटवर्क का उपयोग करने के तरीके भी प्रदान करते हैं।

का उपयोग कैसे करें

1. GitHub के साथ साइन इन करें या पंजीकरण करें।
2. “नया जोड़ें…” ड्रॉपडाउन पर क्लिक करें और “प्रोजेक्ट” चुनें।                                                             
3. “बैंक-वेबसाइट” या अपना पसंदीदा React प्रोजेक्ट चुनें।
4. हम परिनियोजन सेटिंग्स के लिए डिफ़ॉल्ट के साथ गए और फिर “तैनाती” पर क्लिक किया।
5. कुछ समय बाद, हमें वेबसाइट मिल गई।

यहाँ है लाइव URL।

पक्ष – विपक्ष

Vercel को परिनियोजन प्रक्रिया के इंस्टॉलेशन भाग को कैश करने के लिए कुछ समय चाहिए, लेकिन उसके बाद, यह सबसे तेज़ सेवाओं में से एक है। यह आपके द्वारा दबाई गई प्रत्येक शाखा के लिए पूर्वावलोकन परिनियोजन दिखाता है और कैशिंग के कारण यह इसे शीघ्रता से करता है।

एडब्ल्यूएस प्रवर्धित करें

पृष्ठभूमि

AWS क्लाउड उत्पादों का एक विशाल संग्रह है, और Amplify को उनमें से कुछ पर पकड़ बनाने के आसान तरीके के रूप में विज्ञापित किया गया है। एडब्ल्यूएस एम्प्लीफाई के साथ, आप उपयोग के मामलों के विकसित होने पर एडब्ल्यूएस सेवाओं की व्यापकता का लाभ उठाने के लचीलेपन के साथ, एडब्ल्यूएस पर फुल-स्टैक एप्लिकेशन को जल्दी से बना, शिप और होस्ट कर सकते हैं।

का उपयोग कैसे करें

1. साइन अप करें या AWS में लॉग इन करें, फिर AWS एम्प्लीफाई खोजें और “आरंभ करें” पर क्लिक करें।
2. GitHub चुनें और इसे अधिकृत करें (मैंने इसे केवल “बैंक-वेबसाइट” रेपो के लिए अनुमति दी है)।
3. “हाल ही में अपडेट की गई रिपॉजिटरी” अनुभाग में रेपो का चयन करें।
   1. बिल्ड सेटिंग में, हमें इसे बदलना होगा आधारनिर्देशिका हमारे ऐप के लिए जिला जैसे इतना: फिर, बिल्ड सेटिंग्स इस तरह दिखनी चाहिए:
4. अगले चरण में, “सहेजें और तैनात करें” पर क्लिक करें।
5. कुछ समय बाद, वेबसाइट तैनात हो जाएगी और उपयोग के लिए तैयार हो जाएगी।

और हम जीवित हैं! यहाँ है URL.

पक्ष – विपक्ष

आपको इसे संपादित करना होगा आधारनिर्देशिका परिनियोजन विनिर्देश में—यह बॉक्स से बाहर पहचाना नहीं गया है। यूआई थोड़ा अव्यवस्थित लगता है, लेकिन यह एक व्यक्तिगत पसंद है। AWS Amplify के लिए बहुत बड़ी संभावनाएं हैं क्योंकि कई अन्य AWS वेब सेवाएँ हाथ की पहुंच के भीतर हैं।

फायरबेस

पृष्ठभूमि

फायरबेस एक Google सेवा है जिसे रीयल-टाइम स्टोरेज प्लेटफ़ॉर्म के रूप में जाना जाता है। लेकिन इसमें स्थिर वेबसाइटों और Express.js माइक्रोसर्विसेज या APIs के लिए एक होस्टिंग विकल्प भी है, और उन शाखाओं के लिए पूर्वावलोकन URLs का समर्थन करता है जिन पर आपकी टीम काम कर रही है। Netlify, Vercel और अन्य की तरह, यह CDN नेटवर्क पर तैनात सामग्री प्रदान करता है।

का उपयोग कैसे करें

1. स्थापित करना फायरबेस-टूल्स साथ एनपीएम इंस्टाल -जी फायरबेस-टूल्स.
2. के साथ फायरबेस में लॉग इन करें फायरबेस लॉगिन. एक बार लॉग इन करने पर, आपको इस तरह का एक संदेश देखना चाहिए:
3. प्रोजेक्ट निर्देशिका में जाएँ और चलाएँ फायरबेस init, आपको कुछ इस तरह देखना चाहिए: वैकल्पिक GitHub एक्शन डिप्लॉय के साथ फायरबेस होस्टिंग के लिए फ़ाइलों को कॉन्फ़िगर करने का विकल्प चुनें। फिर, आप सीधे सीएलआई से एक प्रोजेक्ट बना सकते हैं या इसे करने के लिए फायरबेस यूआई का उपयोग कर सकते हैं और बाद में इसे कनेक्ट कर सकते हैं। हमने कमांड लाइन से प्रोजेक्ट बनाया, और इस प्रकार हमने परिणामी प्रश्नों का उत्तर दिया:                                                                                             उसके बाद, सरल `firebase.json` और `.firebaserc` फाइलें बनाई जाएंगी।
4. फिर, भागो फायरबेस परिनियोजन वास्तव में फ़ाइलों को तैनात करने के लिए जिलानिर्देशिका. यदि निर्देशिका अनुपलब्ध है, तो चलाना सुनिश्चित करें एनपीएम रन बिल्ड फ़ाइलें उत्पन्न करने के लिए सबसे पहले। फायरबेस परिनियोजन कमांड को नीचे दिए गए उदाहरण के समान आउटपुट उत्पन्न करना चाहिए:

अब आप कर सकते हैं वेबसाइट देखें प्रदान किए गए URL पर। वाह! 

पक्ष – विपक्ष

फायरबेस काफी सरल है, लेकिन जब आप इसे अपने प्रोजेक्ट के अंदर सेट अप करते हैं, तो आपको जिन प्रश्नों का उत्तर देने की आवश्यकता होती है वे थोड़े भ्रमित करने वाले होते हैं। सौभाग्य से, हमने उपरोक्त अनुभाग में आपके लिए उनका उत्तर दिया है, लेकिन आगे बढ़ने से पहले उन्हें वास्तविक फायरबेस सुविधाओं की समझ की आवश्यकता होती है। इसके अलावा, फायरबेस तैनात करने में तेज है और एक URL उत्पन्न कर सकता है जहां आप तैनात फ़ाइलों का पूर्वावलोकन कर सकते हैं। आप इसे CLI के साथ GitHub एक्शन परिनियोजन के साथ आसानी से स्वचालित भी कर सकते हैं, जो साफ-सुथरा है।

GitHub पेज

पृष्ठभूमि

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

का उपयोग कैसे करें

कृपया ध्यान दें कि आपको इसे संपादित करना होगा ऐप.जेएसएक्स जहां हम कॉल करते हैं रूटर और जोड़ें बेसनाम इसे रेपो नाम से मेल करने के लिए। तो इस तरह ऐप.जेएसएक्स देखना चाहिए:                                                                                        हमें बदलना होगा बेसनाम क्योंकि GitHub पेज वेबसाइट को इस फॉर्म `https://GITHUB_USERNAME.gitlab.io/REPO_NAME` के URL पर तैनात करेंगे। आधार नाम निर्धारित किए बिना वेबसाइट ठीक से काम नहीं करेगी प्रतिक्रिया-राउटर-डोम.

1. कोड बदलने के बाद, हमें इंस्टॉल करना होगा gh-पेज पैकेज के साथ:
2. और, एक जोड़ें पूर्वतैनाती और ए तैनात करना स्क्रिप्ट को package.json:
3. फिर, हम बस दौड़ते हैं एनपीएम रन परिनियोजन. यह ट्रिगर होगा एनपीएम रन बिल्ड और इसका उपयोग होगा gh-पेज की सामग्री प्रकाशित करने के लिए जिला GitHub पर एक अलग शाखा में बुलाया गया gh-पेज.
4. अंत में, जांचें कि क्या gh-पेज नीचे दिए गए अनुसार GitHub पेजों के लिए उपयोग किया जाता है:

यहाँ है लाइव URL।

पक्ष – विपक्ष

यदि आप कोई ऐसा प्रोजेक्ट तैनात कर रहे हैं जो आपके उपयोगकर्ता नाम से भिन्न है, तो इसे GitHub के साथ हमारे मुफ़्त डोमेन पर एक उपनिर्देशिका के अंदर तैनात किया जाएगा। फिर, आपको उपनिर्देशिका के अंदर होने के तर्क का समर्थन करने के लिए अतिरिक्त कोड लिखना होगा।

यह हमारे उपयोग के मामले में आउट-ऑफ-द-बॉक्स निरंतर तैनाती का समर्थन नहीं करता है, लेकिन आप इसे सेट कर सकते हैं। एक बार सेट अप हो जाने पर, परिवर्तन लागू करना त्वरित होता है।

गिटलैब पेज

पृष्ठभूमि

GitHub की तरह, GitLab का अपना होस्टिंग समाधान है, और वे इसे GitLab Pages कहते हैं। मुझे इसे उन्हें देना होगा, GitHub पेजों की तुलना में GitLab पेजों पर निरंतर तैनाती स्थापित करना आसान है।

का उपयोग कैसे करें

1. साइन अप करें या GitLab में लॉग इन करें
2. यदि आपके पास GitLab में रेपो पहले से नहीं है तो उसे जोड़ें। तुम कर सकते हो जो मैंने वहां जोड़ा था उसे फोर्क करें 
   GitHub पेजों के समान, आपको संपादित करना होगा ऐप.जेएसएक्स जहां हम कॉल करते हैं रूटर और जोड़ें  बेसनाम इसे रेपो नाम से मेल करने के लिए। तो यह अंतिम परिवर्तन है:                                                               हमें बदलना होगा बेसनाम क्योंकि GitLab पेज वेबसाइट को इस फॉर्म के URL पर तैनात करेंगे: https://GITLAB_USERNAME.gitlab.io/REPOSITORY_NAME. आधार नाम निर्धारित किए बिना वेबसाइट ठीक से काम नहीं करेगी प्रतिक्रिया-राउटर-डोम.
3. एक बार जब आप संपादित कर लेते हैं और प्रोजेक्ट को GitLab पर भेज देते हैं, तो सेटिंग्स> पेज पर जाएं और आपको GitLab पेज पर रेपो को तैनात करने के लिए चार-चरणीय विज़ार्ड के साथ स्वागत किया जाएगा। 
4. विज़ार्ड में पहला चरण बिल्ड छवि दर्ज करना है। हम Node.js LTS का उपयोग करेंगे।
5. इसके बाद, हम प्री-बिल्ड कमांड दर्ज करेंगे। एनपीएम सीआई यहाँ पर्याप्त होगा.
6. अब निर्माण चरण के लिए। हमें पास होना है — –जिला-डीआईआर सार्वजनिक क्योंकि GitLab Pages में वेबसाइट निर्मित होने की उम्मीद है जनता निर्देशिका. क्षमा करें, आप किसी अन्य निर्देशिका से बच नहीं सकते।
7. नव निर्मित को प्रतिबद्ध करें .gitlab-ci.yml फ़ाइल जो GitLab को बताती है कि अपनी वेबसाइट को कैसे तैनात करें।
8. अब, रेपो के CI/CD -> पाइपलाइन अनुभाग पर जाएं और नई जोड़ी गई पाइपलाइन का प्रदर्शन देखें।
9. कुछ समय बाद, पाइपलाइन का काम समाप्त हो जाएगा और वेबसाइट GitLab पेजों पर तैनात हो जाएगी।

यहाँ है नतीजा.

पक्ष – विपक्ष

पैकेज स्थापित करने में धीमे हैं और इसे काम करने के लिए आपको अतिरिक्त कोड जोड़ने की आवश्यकता है, लेकिन विज़ार्ड तैनात करने के लिए केवल चार चरणों के साथ सुपर सहज है।

प्रदान करना

पृष्ठभूमि

रेंडर 2019 में लॉन्च होने वाले ब्लॉक पर एक नया बच्चा है। यह लोगों द्वारा अपनी सेवाओं (स्थैतिक वेबसाइटों सहित) को तैनात करने के तरीके को बाधित करने की कोशिश कर रहा है। अब तक, वे अच्छा कर रहे हैं और संख्या में बढ़ रहे हैं।

का उपयोग कैसे करें

1. रेंडर करने के लिए साइन अप करें या लॉग इन करें।
2. “नया” बटन दबाकर और “स्टेटिक साइट” चुनकर एक नई स्थिर वेबसाइट बनाएं।
3. वह रेपो चुनें जिसे आप तैनात करना चाहते हैं।
4. अपने पास रखें सूत; सूत का निर्माण बिल्ड सेटिंग में बिल्ड कमांड। दुर्भाग्य से, यह साथ काम नहीं करता एनपीएम सीआई; एनपीएम रन बिल्ड जैसा कि अन्य सेवाएँ करती हैं। “प्रकाशित निर्देशिका” को इसमें बदलें जिला और “स्टेटिक साइट बनाएं” पर क्लिक करें।
5. कुछ समय बाद, रेंडर कोड को तैनात करेगा।

यहाँ है रेंडर से लाइव URL।

पक्ष – विपक्ष

यह वास्तव में तेज़ है, लेकिन यह `npm ci` और `npm run build` कमांड के साथ हमारे प्रोजेक्ट के लिए अच्छी तरह से काम नहीं करता है। केवल `यार्न` ही काम करता प्रतीत होता है।

आवेश

पृष्ठभूमि

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

का उपयोग कैसे करें

1. तैयारी के लिए दौड़ें एनपीएम रन बिल्ड अंदर स्थिर फ़ाइलें उत्पन्न करने के लिए जिला निर्देशिका. आवेश तैनाती के लिए उनका उपयोग करेंगे।
2. दौड़ना एनपीएम इंस्टाल–वैश्विक उछाल
3. फिर, भागो आवेश.

ध्यान देने योग्य कुछ बातें:
यदि आप इसे पहली बार चला रहे हैं, तो आपको सर्ज के साथ एक खाता बनाना होगा। चिंता मत करो, यह आसान है. बस अपना ईमेल और वांछित पासवर्ड इनपुट करें।

फिर, आपसे “प्रोजेक्ट” इनपुट करने के लिए कहा जाएगा, जो इसका पथ होना चाहिए जिला निर्देशिका. आप बस जोड़ सकते हैं जिला यदि आप जिस रेपो को तैनात कर रहे हैं, उसके अंदर आपने वृद्धि की है तो आपको जो पथ दिया गया है।

फिर, अपनी वेबसाइट का भविष्य URL इनपुट करें। कुछ अनोखा प्रयास करें क्योंकि क्या आवेश की पेशकश मेरे लिए काम नहीं किया.

URL इनपुट के बाद, आवेश से सामग्री तैनात करेगा जिला निर्दिष्ट URL पर। यहाँ मुझे क्या मिला:

पक्ष – विपक्ष

यह तेज़ और सरल है और इसके लिए आपको एक अलग इंटरफ़ेस अपनाने की आवश्यकता नहीं है – लेकिन यह आपके ऐप के लिए उपलब्ध URL का सुझाव देने में विफल रहता है।

प्रत्येक होस्टिंग सेवा के लिए तैनाती का समय

हमारी शीर्ष 3 निःशुल्क React होस्टिंग सेवाएँ

1. Netlify
2. Vercel
3. आवेश

चाबी छीनना

इनमें से प्रत्येक निःशुल्क React ऐप होस्टिंग सेवाओं का परीक्षण करने के बाद, हमें लगता है कि Netlify इस समूह में सर्वश्रेष्ठ है। यह आपको आवश्यक कई सुविधाओं के साथ त्वरित तैनाती प्रदान करता है। इसके ठीक बाद Vercel है जिसमें बहुत सारी सुविधाएं हैं और प्रारंभिक तैनाती के बाद यह काफी तेज है। फिर, हमारे पास सर्ज है जो एक न्यूनतम परिनियोजन उपकरण है जो कि यदि आप अपग्रेड करने का निर्णय लेते हैं तो काफी सस्ता हो सकता है।

अपने फ्रंटएंड निर्माण को स्वचालित करें और अपने ऐप को 10 गुना तेजी से शिप करें। और अधिक जानें.