"यदि कोई कर्मचारी अपना काम अच्छी तरह से करना चाहता है, तो उसे पहले अपने औजारों को तेज करना होगा।" - कन्फ्यूशियस, "द एनालेक्ट्स ऑफ कन्फ्यूशियस। लू लिंगगोंग"
मुखपृष्ठ > प्रोग्रामिंग > छवियों के साथ एक वाइट/रिएक्ट एप्लिकेशन परिनियोजित करना: एक संपूर्ण मार्गदर्शिका

छवियों के साथ एक वाइट/रिएक्ट एप्लिकेशन परिनियोजित करना: एक संपूर्ण मार्गदर्शिका

2024-11-07 को प्रकाशित
ब्राउज़ करें:200

Deploying a Vite/React Application with Images: A Complete Guide

गिटहब पेजों पर वाइट/रिएक्ट एप्लिकेशन को तैनात करना एक रोमांचक मील का पत्थर है, लेकिन यह प्रक्रिया कभी-कभी अप्रत्याशित चुनौतियों के साथ आ सकती है, खासकर छवियों और संपत्तियों से निपटते समय। यह ब्लॉग पोस्ट आपको आरंभिक परिनियोजन से लेकर सामान्य समस्याओं के निवारण और प्रभावी समाधान तक पहुंचने तक की पूरी प्रक्रिया के बारे में बताएगा।

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


आवश्यक शर्तें

इससे पहले कि हम इसमें उतरें, सुनिश्चित करें कि आपके पास निम्नलिखित हैं:

  • एक Vite/React प्रोजेक्ट: यह मार्गदर्शिका मानती है कि आपने Vite को बिल्ड टूल के रूप में और React को अपने फ्रेमवर्क के रूप में उपयोग करके अपना प्रोजेक्ट सेट किया है।
  • GitHub रिपॉजिटरी: आपके पास एक मौजूदा GitHub रिपॉजिटरी होनी चाहिए जहां आप तैनाती के लिए अपने एप्लिकेशन को आगे बढ़ाएंगे।
  • GitHub पेज सक्षम: सुनिश्चित करें कि तैनाती के लिए आपके रिपॉजिटरी की सेटिंग में GitHub पेज सक्षम है।

चरण 1: प्रोजेक्ट और GitHub पेज परिनियोजन प्रारंभ करें

सबसे पहले, सुनिश्चित करें कि आपका Vite/React एप्लिकेशन ठीक से प्रारंभ किया गया है और लोकलहोस्ट पर काम करता है। आप निम्नानुसार एक बुनियादी वाइट प्रोजेक्ट बना सकते हैं:


npm create vite@latest


निर्भरताएं स्थापित करें:


npm install


सबकुछ काम करता है इसकी पुष्टि करने के लिए प्रोजेक्ट को स्थानीय रूप से चलाएं:


npm run dev


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

GitHub पेजों के लिए एक vite.config.js बनाएं

गिटहब पेजेस को उम्मीद है कि एप्लिकेशन को एक विशिष्ट आधार यूआरएल से परोसा जाएगा, जो आमतौर पर आपका रिपॉजिटरी नाम है। इसे प्रतिबिंबित करने के लिए 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()],
})


आधार विकल्प यह सुनिश्चित करता है कि एप्लिकेशन तैनात होने पर सही आधार पथ का उपयोग करता है।


चरण 2: प्रोजेक्ट बनाएं और तैनात करें

परिनियोजन को संभालने के लिए आपको 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.io// पर लाइव होना चाहिए, लेकिन यदि आप मेरे जैसे हैं, तो आपको कुछ समस्याओं का सामना करना पड़ सकता है ऐप ठीक से प्रस्तुत नहीं कर रहा है, या छवियां दिखाई नहीं दे रही हैं।


चरण 3: सामान्य समस्याएँ और समाधान

समस्या 1: परिनियोजन के बाद रिक्त पृष्ठ

परिनियोजन के बाद, आप देख सकते हैं कि ऐप एक खाली पृष्ठ लोड करता है। यह अक्सर रूटिंग समस्याओं के कारण होता है। डिफ़ॉल्ट रूप से, रिएक्ट-राउटर-डोम से ब्राउज़र राउटर का उपयोग किया जाता है, जो सर्वर-साइड रूटिंग पर निर्भर करता है, लेकिन GitHub पेज स्थिर फ़ाइलें परोसता है और क्लाइंट-साइड रूट को संभाल नहीं पाता है।

समाधान: हैशराउटर का उपयोग करें

इसे हल करने के लिए, अपनी Index.js या main.jsx फ़ाइल में ब्राउज़र राउटर से हैश राउटर पर स्विच करें।

नोट: यह आवश्यक नहीं है कि आपके पास यह सिर्फ एक सुविधाजनक यूआई लाइब्रेरी है जिसका उपयोग मैं अपने प्रोजेक्ट्स में अक्सर करता हूं।


import { HashRouter } from 'react-router-dom';

createRoot(document.getElementById('root')).render(
  
    
      
        
      
    
  
);


नेविगेशन स्थिति पर नज़र रखने के लिए HashRouter URL में एक हैश प्रतीक (#) का उपयोग करता है, जिससे GitHub पेज 404 लौटाए बिना विभिन्न मार्गों को ठीक से सेवा प्रदान कर सकते हैं।


समस्या 2: रिफ्रेश या अन्य रूट पर 404 त्रुटि

खाली पृष्ठ की समस्या को ठीक करने के बाद, एक और समस्या जिसका आपको सामना करना पड़ सकता है वह है ऐप होमपेज पर काम कर रहा है लेकिन अन्य मार्गों पर नेविगेट करते समय 404 त्रुटि दिखा रहा है, खासकर यदि आप सीधे /ब्लॉग या /प्रोजेक्ट जैसे मार्ग तक पहुंचते हैं।

ऐसा इसलिए होता है क्योंकि GitHub पेज केवल Index.html फ़ाइल को प्रस्तुत करना जानता है और रिएक्ट राउटर द्वारा प्रबंधित मार्गों को नहीं पहचानता है।

समाधान: GitHub पेज सेटिंग्स में 404 त्रुटियों को संभालें

इसे ठीक करने के लिए, आपको अपने सार्वजनिक/फ़ोल्डर में एक 404.html फ़ाइल बनानी होगी। यह फ़ाइल यह सुनिश्चित करेगी कि GitHub Pages आपकी Index.html फ़ाइल को किसी भी ऐसे रूट के लिए प्रस्तुत करता है जिसे वह नहीं पहचानता है, जिससे रिएक्ट राउटर को रूटिंग को संभालने की अनुमति मिलती है:

  1. अपने Index.html को 404.html नाम की एक नई फ़ाइल में कॉपी करें।
  2. इस फ़ाइल को अपने सार्वजनिक/फ़ोल्डर में रखें।
  3. परियोजना का पुनर्निर्माण और पुनः तैनाती।

समस्या 3: छवियाँ उत्पादन में लोड नहीं हो रही हैं

सबसे आम परिनियोजन समस्याओं में से एक छवियों का सही ढंग से लोड न होना है। हालांकि वे लोकलहोस्ट पर ठीक से काम करते हैं, GitHub पेजों पर तैनात करने के बाद आपको टूटे हुए छवि लिंक दिखाई दे सकते हैं।

उदाहरण के लिए, आप अपने घटकों में इस तरह की छवि का संदर्भ दे सकते हैं:


thumbnail


समस्या: गलत छवि पथ

यहाँ समस्या यह है कि जब ऐप को उपनिर्देशिका (उदाहरण के लिए, /your-repo-name/) में तैनात किया जाता है, तो निरपेक्ष पथ (/ से शुरू होने वाले) अच्छी तरह से काम नहीं करते हैं। GitHub पेज https://.github.io/your-repo-name/Images/myImage.png के बजाय https://.github.io/Images/myImage.png पर छवि ढूंढने का प्रयास करता है , जिसके परिणामस्वरूप 404 त्रुटि हुई।

समाधान: BASE_URL का उपयोग करें

इसे ठीक करने के लिए, अपनी सभी छवियों को सार्वजनिक/छवियों में ले जाएं, जबकि यह वैकल्पिक है, मैं आपको ऐसा करने की अत्यधिक अनुशंसा करूंगा। आप परिवेश के आधार पर BASE_URL को गतिशील रूप से छवि पथों से जोड़ देंगे:

  1. एक BASE_URL स्थिरांक परिभाषित करें जो पर्यावरण पर निर्भर करता है:

   const BASE_URL = import.meta.env.BASE_URL;


  1. छवियों का संदर्भ देते समय इस BASE_URL का उपयोग करें:

   thumbnail


ध्यान दें: छवियों के सामने से / को हटाना न भूलें, अन्यथा यह दोगुना हो जाएगा, एक BASE_URL से और दूसरा /छवियों से जिन्हें आप हटाना भूल गए थे।

यह सुनिश्चित करता है कि विकास (लोकलहोस्ट) और उत्पादन (गिटहब पेज) दोनों में सही पथ का उपयोग किया जाता है।


चरण 4: अंतिम परिनियोजन

रूटिंग और छवि पथों के लिए सुधार लागू करने के बाद, अपने एप्लिकेशन का पुनर्निर्माण और पुन: तैनाती करें:


npm run build
npm run deploy


आपका Vite/React एप्लिकेशन अब सभी छवियों को सही ढंग से प्रस्तुत करने और सभी मार्गों को ठीक से प्रबंधित करने के साथ पूरी तरह से तैनात किया जाना चाहिए।

सारांश:

  1. रूटिंग मुद्दे: GitHub पेज जैसे स्थिर परिनियोजन में उचित रूटिंग के लिए HashRouter का उपयोग करें।
  2. रूट्स पर 404 त्रुटियां: यह सुनिश्चित करने के लिए एक 404.html फ़ाइल बनाएं कि GitHub पेज आपके ऐप को सही ढंग से पेश करता है।
  3. छवियां लोड नहीं हो रही हैं: सभी छवियों को सार्वजनिक/छवियों में ले जाएं और विकास और उत्पादन परिवेश दोनों को संभालने के लिए अपने परिसंपत्ति पथों में गतिशील रूप से BASE_URL जोड़ें।

इन चरणों के साथ, आपका Vite/React ऐप GitHub पेज पर लाइव और सुचारू रूप से कार्य करना चाहिए। हैप्पी कोडिंग और तैनाती!

विज्ञप्ति वक्तव्य यह आलेख यहां पुन: प्रस्तुत किया गया है: https://dev.to/usooldatascience/deploying-a-vitereact-application-with-images-a-complete-guide-12p3?1 यदि कोई उल्लंघन है, तो कृपया [email protected] पर संपर्क करें। इसे हटाने के लिए
नवीनतम ट्यूटोरियल अधिक>

चीनी भाषा का अध्ययन करें

अस्वीकरण: उपलब्ध कराए गए सभी संसाधन आंशिक रूप से इंटरनेट से हैं। यदि आपके कॉपीराइट या अन्य अधिकारों और हितों का कोई उल्लंघन होता है, तो कृपया विस्तृत कारण बताएं और कॉपीराइट या अधिकारों और हितों का प्रमाण प्रदान करें और फिर इसे ईमेल पर भेजें: [email protected] हम इसे आपके लिए यथाशीघ्र संभालेंगे।

Copyright© 2022 湘ICP备2022001581号-3