कई डेवलपर्स को रिएक्ट ऐप्स को तैनात करना मुश्किल लगता है, खासकर वे जो पारिस्थितिकी तंत्र से परिचित नहीं हैं। आप GitHub Pages का उपयोग करके रिएक्ट ऐप्स सहित अपने स्थिर वेबपेजों को निःशुल्क और आसानी से होस्ट कर सकते हैं। इस विस्तृत ट्यूटोरियल की मदद से आपके रिएक्ट ऐप्स को GitHub पेज पर तैनात करना आसान और परेशानी मुक्त बना दिया जाएगा, जो आपको प्रक्रिया के हर चरण में ले जाएगा।

1. गिटहब पेजों का परिचय

गिटहब पेज एक स्थिर साइट होस्टिंग सेवा है जिसे आपके व्यक्तिगत, संगठन या प्रोजेक्ट पेजों को सीधे गिटहब रिपॉजिटरी से होस्ट करने के लिए डिज़ाइन किया गया है। यह आपके GitHub वर्कफ़्लो के साथ एक सहज एकीकरण प्रदान करता है, जो इसे रिएक्ट ऐप्स होस्ट करने के लिए एक आदर्श विकल्प बनाता है।

मुख्य लाभ:

निःशुल्क और उपयोग में आसान।

कस्टम डोमेन का समर्थन करता है।

स्वचालित रूप से आपकी साइट बनाता है और तैनात करता है।

अधिक जानकारी के लिए, GitHub पेज दस्तावेज़ीकरण देखें।

1. अपना रिएक्ट ऐप सेट करना

अपने रिएक्ट ऐप को GitHub पेज पर तैनात करने से पहले, सुनिश्चित करें कि आपके पास एक कार्यशील रिएक्ट एप्लिकेशन है। यदि आपके पास अभी तक कोई नहीं है, तो आप क्रिएट रिएक्ट ऐप (सीआरए) का उपयोग करके एक नया रिएक्ट ऐप बना सकते हैं।

npx create-react-app my-react-app
cd my-react-app

यह कमांड सभी आवश्यक कॉन्फ़िगरेशन के साथ एक नया रिएक्ट प्रोजेक्ट सेट करता है।

1. परिनियोजन के लिए अपना रिएक्ट ऐप तैयार करना

GitHub पेजों पर एक रिएक्ट ऐप को तैनात करने के लिए, आपको अपने ऐप के कॉन्फ़िगरेशन में कुछ संशोधन करने होंगे।

GitHub पेज पैकेज स्थापित करें:

npm install gh-pages --save-dev

पैकेज अपडेट करें.json:

अपनी package.json फ़ाइल में निम्नलिखित फ़ील्ड जोड़ें:

"homepage": "https://.github.io/",
"scripts": {
  "predeploy": "npm run build",
  "deploy": "gh-pages -d build"
}

अपने GitHub उपयोगकर्ता नाम और अपने रिपॉजिटरी के नाम से बदलें।

1. एक GitHub रिपॉजिटरी बनाना

GitHub पर जाएं और एक नया रिपॉजिटरी बनाएं।

अपने भंडार को नाम दें और इसे सार्वजनिक पर सेट करें।

README, .gitignore, या लाइसेंस के साथ आरंभ न करें, क्योंकि इन्हें बाद में जोड़ा जाएगा।

1. अपने रिएक्ट ऐप को GitHub पेजों पर तैनात करना

अब जब आपका रिएक्ट ऐप तैयार है और आपके पास GitHub रिपॉजिटरी है, तो इसे तैनात करने का समय आ गया है।

गिट प्रारंभ करें और GitHub पर पुश करें:

git init
git remote add origin https://github.com//.git
git add .
git commit -m "Initial commit"
git push -u origin master

अपना ऐप परिनियोजित करें:

npm run deploy

यह कमांड आपके ऐप का निर्माण करेगा और इसे आपके रिपॉजिटरी की gh-पेज शाखा में तैनात करेगा।

1. सामान्य परिनियोजन मुद्दे और समस्या निवारण

गिटहब पेजों पर रिएक्ट ऐप्स को तैनात करने से कभी-कभी समस्याएं आ सकती हैं। यहां सामान्य समस्याएं और उनके समाधान दिए गए हैं:

404 त्रुटियां: सुनिश्चित करें कि package.json में होमपेज फ़ील्ड सही ढंग से सेट है।

बिल्ड विफलताएँ: अपनी बिल्ड स्क्रिप्ट की जाँच करें और सुनिश्चित करें कि सभी निर्भरताएँ स्थापित हैं।

सीओआरएस मुद्दे: यदि आप क्रॉस-ऑरिजिन अनुरोध कर रहे हैं तो सुनिश्चित करें कि आपके एपीआई एंडपॉइंट सीओआरएस का समर्थन करते हैं।

अधिक समस्या निवारण युक्तियों के लिए, GitHub पेज समस्या निवारण मार्गदर्शिका देखें।

1. GitHub क्रियाओं के साथ तैनाती को स्वचालित करना

गिटहब एक्शन शक्तिशाली सीआई/सीडी क्षमताएं प्रदान करता है जो आपकी तैनाती प्रक्रिया को स्वचालित कर सकता है। इसे कैसे सेट करें यहां बताया गया है:

एक वर्कफ़्लो फ़ाइल बनाएं:

अपनी रिपॉजिटरी में, .github/workflows/deploy.yml नाम से एक फ़ाइल बनाएं।

परिनियोजन स्क्रिप्ट जोड़ें:

नाम: रिएक्ट ऐप को GitHub पेजों पर तैनात करें

on:
  push:
    branches:
      - master

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout code
        uses: actions/checkout@v2

      - name: Set up Node.js
        uses: actions/setup-node@v2
        with:
          node-version: '14'

      - name: Install dependencies
        run: npm install

      - name: Build the React app
        run: npm run build

      - name: Deploy to GitHub Pages
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./build

जब भी आप मास्टर शाखा में परिवर्तन दबाएंगे तो यह वर्कफ़्लो आपके रिएक्ट ऐप को स्वचालित रूप से तैनात कर देगा।

1. उन्नत परिनियोजन तकनीक

बुनियादी बातों से परे, कई उन्नत तकनीकें हैं जिनका उपयोग आप अपनी तैनाती प्रक्रिया को बढ़ाने के लिए कर सकते हैं:

कस्टम डोमेन: आप अपनी रिपॉजिटरी में एक CNAME फ़ाइल जोड़कर अपनी GitHub पेज साइट के साथ एक कस्टम डोमेन का उपयोग कर सकते हैं।

HTTPS प्रवर्तन: अपनी रिपॉजिटरी सेटिंग्स में HTTPS विकल्प को सक्षम करके सुनिश्चित करें कि आपकी साइट हमेशा HTTPS पर सेवा प्रदान करती है।

शाखा परिनियोजन: स्टेजिंग और उत्पादन वातावरण के लिए विभिन्न शाखाओं से परिनियोजन।

विस्तृत जानकारी के लिए, GitHub पेज कस्टम डोमेन गाइड देखें।

1. रिएक्ट ऐप्स को तैनात करने के लिए सर्वोत्तम अभ्यास

एक सफल तैनाती और उच्च गुणवत्ता वाला उपयोगकर्ता अनुभव सुनिश्चित करने के लिए, इन सर्वोत्तम प्रथाओं का पालन करें:

अपने बिल्ड को अनुकूलित करें: अपने जावास्क्रिप्ट बंडलों को अनुकूलित करने के लिए वेबपैक और बैबल जैसे टूल का उपयोग करें।

पर्यावरण चर का उपयोग करें: पर्यावरण चर का उपयोग करके अपनी पर्यावरण-विशिष्ट सेटिंग्स प्रबंधित करें।

प्रदर्शन की निगरानी करें: अपने तैनात ऐप के प्रदर्शन को ट्रैक करने और सुधारने के लिए प्रदर्शन निगरानी टूल का उपयोग करें।

अधिक सर्वोत्तम प्रथाओं के लिए, रिएक्ट परिनियोजन गाइड देखें।

1. निष्कर्ष

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

इस गाइड का पालन करके, आप अपने एप्लिकेशन को दुनिया भर में वितरित करने के लिए GitHub की होस्टिंग क्षमताओं की शक्ति का लाभ उठाते हुए, अपने रिएक्ट ऐप्स को GitHub पेजों पर तैनात करने के लिए अच्छी तरह से सुसज्जित होंगे।