गिटहब पेजों पर वाइट/रिएक्ट एप्लिकेशन को तैनात करना एक रोमांचक मील का पत्थर है, लेकिन यह प्रक्रिया कभी-कभी अप्रत्याशित चुनौतियों के साथ आ सकती है, खासकर छवियों और संपत्तियों से निपटते समय। यह ब्लॉग पोस्ट आपको आरंभिक परिनियोजन से लेकर सामान्य समस्याओं के निवारण और प्रभावी समाधान तक पहुंचने तक की पूरी प्रक्रिया के बारे में बताएगा।
चाहे आप नौसिखिया हों या अनुभवी व्यक्ति हों, यह मार्गदर्शिका आपको सामान्य नुकसानों से बचने और आपके वाइट/रिएक्ट ऐप को सभी संपत्तियों को उचित रूप से प्रस्तुत करने के साथ सफलतापूर्वक तैनात करने में मदद करेगी।
इससे पहले कि हम इसमें उतरें, सुनिश्चित करें कि आपके पास निम्नलिखित हैं:
सबसे पहले, सुनिश्चित करें कि आपका Vite/React एप्लिकेशन ठीक से प्रारंभ किया गया है और लोकलहोस्ट पर काम करता है। आप निम्नानुसार एक बुनियादी वाइट प्रोजेक्ट बना सकते हैं:
npm create vite@latest
निर्भरताएं स्थापित करें:
npm install
सबकुछ काम करता है इसकी पुष्टि करने के लिए प्रोजेक्ट को स्थानीय रूप से चलाएं:
npm run dev
एक बार जब आपका प्रोजेक्ट तैयार हो जाए, तो इसे अपने GitHub रिपॉजिटरी में भेजें।
गिटहब पेजेस को उम्मीद है कि एप्लिकेशन को एक विशिष्ट आधार यूआरएल से परोसा जाएगा, जो आमतौर पर आपका रिपॉजिटरी नाम है। इसे प्रतिबिंबित करने के लिए vite.config.js फ़ाइल को अपडेट करें:
import { defineConfig } from 'vite' import react from '@vitejs/plugin-react' export default defineConfig({ base: process.env.NODE_ENV === 'production' ? '/your-repo-name/' : '/', plugins: [react()], })
आधार विकल्प यह सुनिश्चित करता है कि एप्लिकेशन तैनात होने पर सही आधार पथ का उपयोग करता है।
परिनियोजन को संभालने के लिए आपको gh-pages पैकेज इंस्टॉल करना होगा।
npm install gh-pages --save-dev
अपने package.json में, परिनियोजन प्रक्रिया को स्वचालित करने के लिए निम्नलिखित स्क्रिप्ट जोड़ें:
"scripts": { "predeploy": "npm run build", "deploy": "gh-pages -d dist" }
परिनियोजन चलाएँ:
npm run deploy
इस बिंदु पर, आपका प्रोजेक्ट https://
परिनियोजन के बाद, आप देख सकते हैं कि ऐप एक खाली पृष्ठ लोड करता है। यह अक्सर रूटिंग समस्याओं के कारण होता है। डिफ़ॉल्ट रूप से, रिएक्ट-राउटर-डोम से ब्राउज़र राउटर का उपयोग किया जाता है, जो सर्वर-साइड रूटिंग पर निर्भर करता है, लेकिन GitHub पेज स्थिर फ़ाइलें परोसता है और क्लाइंट-साइड रूट को संभाल नहीं पाता है।
समाधान: हैशराउटर का उपयोग करें
इसे हल करने के लिए, अपनी Index.js या main.jsx फ़ाइल में ब्राउज़र राउटर से हैश राउटर पर स्विच करें।
import { HashRouter } from 'react-router-dom'; createRoot(document.getElementById('root')).render();
नेविगेशन स्थिति पर नज़र रखने के लिए HashRouter URL में एक हैश प्रतीक (#) का उपयोग करता है, जिससे GitHub पेज 404 लौटाए बिना विभिन्न मार्गों को ठीक से सेवा प्रदान कर सकते हैं।
खाली पृष्ठ की समस्या को ठीक करने के बाद, एक और समस्या जिसका आपको सामना करना पड़ सकता है वह है ऐप होमपेज पर काम कर रहा है लेकिन अन्य मार्गों पर नेविगेट करते समय 404 त्रुटि दिखा रहा है, खासकर यदि आप सीधे /ब्लॉग या /प्रोजेक्ट जैसे मार्ग तक पहुंचते हैं।
ऐसा इसलिए होता है क्योंकि GitHub पेज केवल Index.html फ़ाइल को प्रस्तुत करना जानता है और रिएक्ट राउटर द्वारा प्रबंधित मार्गों को नहीं पहचानता है।
समाधान: GitHub पेज सेटिंग्स में 404 त्रुटियों को संभालें
इसे ठीक करने के लिए, आपको अपने सार्वजनिक/फ़ोल्डर में एक 404.html फ़ाइल बनानी होगी। यह फ़ाइल यह सुनिश्चित करेगी कि GitHub Pages आपकी Index.html फ़ाइल को किसी भी ऐसे रूट के लिए प्रस्तुत करता है जिसे वह नहीं पहचानता है, जिससे रिएक्ट राउटर को रूटिंग को संभालने की अनुमति मिलती है:
सबसे आम परिनियोजन समस्याओं में से एक छवियों का सही ढंग से लोड न होना है। हालांकि वे लोकलहोस्ट पर ठीक से काम करते हैं, GitHub पेजों पर तैनात करने के बाद आपको टूटे हुए छवि लिंक दिखाई दे सकते हैं।
उदाहरण के लिए, आप अपने घटकों में इस तरह की छवि का संदर्भ दे सकते हैं:
समस्या: गलत छवि पथ
यहाँ समस्या यह है कि जब ऐप को उपनिर्देशिका (उदाहरण के लिए, /your-repo-name/) में तैनात किया जाता है, तो निरपेक्ष पथ (/ से शुरू होने वाले) अच्छी तरह से काम नहीं करते हैं। GitHub पेज https://
समाधान: BASE_URL का उपयोग करें
इसे ठीक करने के लिए, अपनी सभी छवियों को सार्वजनिक/छवियों में ले जाएं, जबकि यह वैकल्पिक है, मैं आपको ऐसा करने की अत्यधिक अनुशंसा करूंगा। आप परिवेश के आधार पर BASE_URL को गतिशील रूप से छवि पथों से जोड़ देंगे:
const BASE_URL = import.meta.env.BASE_URL;
यह सुनिश्चित करता है कि विकास (लोकलहोस्ट) और उत्पादन (गिटहब पेज) दोनों में सही पथ का उपयोग किया जाता है।
रूटिंग और छवि पथों के लिए सुधार लागू करने के बाद, अपने एप्लिकेशन का पुनर्निर्माण और पुन: तैनाती करें:
npm run build npm run deploy
आपका Vite/React एप्लिकेशन अब सभी छवियों को सही ढंग से प्रस्तुत करने और सभी मार्गों को ठीक से प्रबंधित करने के साथ पूरी तरह से तैनात किया जाना चाहिए।
सारांश:
इन चरणों के साथ, आपका Vite/React ऐप GitHub पेज पर लाइव और सुचारू रूप से कार्य करना चाहिए। हैप्पी कोडिंग और तैनाती!
अस्वीकरण: उपलब्ध कराए गए सभी संसाधन आंशिक रूप से इंटरनेट से हैं। यदि आपके कॉपीराइट या अन्य अधिकारों और हितों का कोई उल्लंघन होता है, तो कृपया विस्तृत कारण बताएं और कॉपीराइट या अधिकारों और हितों का प्रमाण प्रदान करें और फिर इसे ईमेल पर भेजें: [email protected] हम इसे आपके लिए यथाशीघ्र संभालेंगे।
Copyright© 2022 湘ICP备2022001581号-3