S02L06 - लोकल सर्वर, CORS और प्रॉक्सी

html

स्थानीय विकास पर्यावरण सेट अप करना: Backend, Frontend, CORS, और Proxy
विषयों की सूची

परिचय ………………………………………………………………1
Frontend और Backend को समझना ………………2
Spring Boot के साथ Backend सेट अप करना ……4

पुर्वापेक्षाएँ ………………………………………4
Backend एप्लिकेशन चलाना………5
Swagger के साथ API दस्तावेजीकरण……………6


Postman के साथ APIs का परीक्षण करना ………………………………8
React के साथ Frontend सेट अप करना ……………10

Frontend एप्लिकेशन चलाना………11


CORS समस्याओं को संभालना …………………………………………13

CORS को समझना ……………………………………13
Frontend में Proxy कॉन्फ़िगर करना………………14
CORS के लिए Spring Boot को संशोधित करना……………15


निष्कर्ष ……………………………………………………………………18
अतिरिक्त संसाधन …………………………………………19


परिचय
आधुनिक वेब विकास के क्षेत्र में, एक एप्लिकेशन के frontend और backend के बीच निर्बाध इंटरैक्शन बनाना अत्यंत महत्वपूर्ण है। यह ईबुक स्थानीय विकास पर्यावरण सेट अप करने के आवश्यक पहलुओं में गहराई से उतरता है, जिसमें frontend और backend का एकीकरण, Cross-Origin Resource Sharing (CORS) समस्याओं को संभालना, और proxies को कॉन्फ़िगर करना शामिल है। इस मार्गदर्शिका के अंत तक, आप दोनों frontend और backend एप्लिकेशन को कुशलतापूर्वक चलाने और प्रबंधित करने के ज्ञान से लैस हो जाएंगे, जिससे एक सुगम विकास वर्कफ़्लो सुनिश्चित होता है।
Frontend और Backend को समझना
Frontend क्या है?
एक एप्लिकेशन का frontend इसका दृश्य भाग होता है—यूज़र इंटरफ़ेस जिसके साथ उपयोगकर्ता इंटरैक्ट करते हैं। इसमें वे सभी तत्व शामिल हैं जिन्हें उपयोगकर्ता सीधे देखते और उपयोग करते हैं, जैसे कि लेआउट, डिज़ाइन तत्व, बटन, और इंटरैक्टिव फीचर्स।
Backend क्या है?
Backend, जिसे अक्सर server-side कहा जाता है, एप्लिकेशन की लॉजिक, डेटाबेस इंटरैक्शन्स, प्रमाणीकरण को संभालता है, और frontend को डेटा प्रदान करता है। यह उपयोगकर्ता अनुरोधों को संसाधित करने और उपयुक्त प्रतिक्रियाएँ देने के लिए आवश्यक भारी कार्य को करता है।
पोषक संबंध
एक एप्लिकेशन के सही तरीके से काम करने के लिए, frontend और backend को सामंजस्य में काम करना चाहिए। backend आवश्यक डेटा और सेवाएँ प्रदान करता है जिन्हें frontend उपयोग करता है ताकि एक गतिशील और प्रतिक्रियाशील यूज़र अनुभव प्रदान किया जा सके।


घटक
Frontend
Backend


भूमिका
यूज़र इंटरफ़ेस और यूज़र अनुभव
डेटा प्रोसेसिंग, बिजनेस लॉजिक, और स्टोरेज


तकनीक
React, Angular, Vue.js, HTML, CSS, JavaScript
Spring Boot, Node.js, Python, Ruby, Java


इंटरैक्शन
अनुरोध भेजता है, प्राप्त डेटा दिखाता है
अनुरोध प्राप्त करता है, डेटा प्रोसेस करता है, प्रतिक्रियाएँ भेजता है


Spring Boot के साथ Backend सेट अप करना
पुर्वापेक्षाएँ
Backend सेट अप करने में गहराई तक जाने से पहले, सुनिश्चित करें कि आपके स्थानीय सिस्टम में निम्नलिखित स्थापित हैं:

Java Development Kit (JDK) 17: Java-आधारित एप्लिकेशन चलाने के लिए आवश्यक।
Integrated Development Environment (IDE): VS Code इसकी बहुमुखी प्रतिभा और व्यापक प्लगइन समर्थन के लिए अनुशंसित है।
Spring Boot: एक फ्रेमवर्क जो Java एप्लिकेशन के बूटस्ट्रैपिंग और विकास को सरल बनाता है।

Java 17 स्थापित करना

Microsoft OpenJDK डाउनलोड पेज पर जाएँ।
JDK 17 चुनें और अपने ऑपरेटिंग सिस्टम के अनुकूल इंस्टॉलर डाउनलोड करें।
Java को अपने मशीन पर सेट अप करने के लिए इंस्टॉलेशन प्रॉम्ट्स का पालन करें।

VS Code सेट अप करना

आधिकारिक वेबसाइट से VS Code डाउनलोड करें।
Java और Spring Boot के लिए आवश्यक एक्सटेंशन्स स्थापित करें ताकि आपका विकास अनुभव बेहतर हो सके।

Backend एप्लिकेशन चलाना

प्रोजेक्ट को VS Code में खोलें:

प्रोजेक्ट फ़ोल्डर पर राइट-क्लिक करें।
टर्मिनल में खोलें चुनें।
प्रोजेक्ट को VS Code में लॉन्च करने के लिए 



		
		
			
			
Java
			
			code .
			
				
					
				
					1
				
						code .
					
				
			
		

 निष्पादित करें।


मुख्य फ़ाइल चुनना:

प्रोजेक्ट के भीतर किसी कंट्रोलर या किसी भी Java फ़ाइल पर जाएँ।
ऊपरी दाएँ कोने में Run बटन (प्लेय आइकन) पर क्लिक करें।
VS Code मुख्य मेथड की पहचान करेगा और एप्लिकेशन शुरू करेगा।


Backend तक पहुँचना:

एप्लिकेशन शुरू होने पर, अपने ब्राउज़र में http://localhost:8080 पर जाएँ।
आपको /api/v1 जैसे एंडपॉइंट्स दिखाई दे सकते हैं, जो आपके API रूट्स का हिस्सा हैं।



Swagger के साथ API दस्तावेजीकरण
Swagger API दस्तावेजीकरण और परीक्षण के लिए एक शक्तिशाली उपकरण है। यह आपके backend APIs का अन्वेषण और परीक्षण करने के लिए एक इंटरैक्टिव इंटरफ़ेस प्रदान करता है।

Swagger UI तक पहुँचें:

Swagger दस्तावेजीकरण देखने के लिए http://localhost:8080/swagger-ui/index.html पर जाएँ।
यह इंटरफ़ेस आपको सभी उपलब्ध APIs और उनकी कार्यात्मकताओं को देखने की अनुमति देता है।


Swagger JSON निर्यात करना:

Swagger UI के भीतर Swagger JSON लिंक पर क्लिक करें।
further उपयोग के लिए जैसे Postman के साथ, JSON फ़ाइल को अपने प्रोजेक्ट डायरेक्टरी में api-docs.json के रूप में सहेजें।




Postman के साथ APIs का परीक्षण करना
Postman एक अनिवार्य उपकरण है जो डेवलपर्स को APIs का परीक्षण और इंटरैक्ट करने की अनुमति देता है बिना किसी frontend इंटरफ़ेस की आवश्यकता के।
Postman स्थापित करना

Postman डाउनलोड पेज पर जाएँ।
अपने ऑपरेटिंग सिस्टम के अनुकूल संस्करण चुनें।
Postman स्थापित करें और लॉन्च करें।

Swagger दस्तावेजीकरण को Postman में आयात करना

Swagger JSON आयात करें:

Postman खोलें।
Import पर क्लिक करें और आपने पहले जो api-docs.json फ़ाइल सहेजी थी उसे चुनें।
यह आपके सभी API एंडपॉइंट्स के साथ एक Postman कलेक्शन उत्पन्न करेगा।


API एंडपॉइंट्स का परीक्षण करना:

कलेक्शन से एक API एंडपॉइंट चुनें।
अनुरोध निष्पादित करने के लिए Send पर क्लिक करें।
Postman के प्रतिक्रिया पैनल में प्रतिक्रिया देखें।




React के साथ Frontend सेट अप करना
Frontend एप्लिकेशन चलाना
Frontend एप्लिकेशन React का उपयोग करके बनाया गया है, जो यूज़र इंटरफ़ेस बनाने के लिए एक लोकप्रिय JavaScript लाइब्रेरी है।

Frontend डायरेक्टरी में जाएँ:

एक नया टर्मिनल विंडो खोलें।




		
		
			
			
Java
			
			cd frontend
			
				
					
				
					1
				
						cd frontend
					
				
			
		

 का उपयोग करके frontend फ़ोल्डर में डायरेक्टरी बदलें।


Dependencies स्थापित करें:

सभी आवश्यक पैकेज और dependencies स्थापित करने के लिए 



		
		
			
			
Java
			
			npm install
			
				
					
				
					1
				
						npm install
					
				
			
		

 चलाएँ।


Frontend सर्वर शुरू करें:

Frontend एप्लिकेशन लॉन्च करने के लिए 



		
		
			
			
Java
			
			npm start
			
				
					
				
					1
				
						npm start
					
				
			
		

 निष्पादित करें।
एप्लिकेशन डिफ़ॉल्ट रूप से http://localhost:3000 पर चल जाएगा।


Frontend की पुष्टि करना:

अपने ब्राउज़र खोलें और http://localhost:3000 पर जाएँ।
आपको backend से डेटा दिखाते हुए frontend इंटरफ़ेस दिखाई देना चाहिए।



Frontend API कॉल्स को कस्टमाइज़ करना
API URLs को बदलना
प्रारंभ में, frontend प्लेसहोल्डर APIs का उपयोग कर सकता है। अपने स्थानीय backend के साथ कनेक्ट करने के लिए:

अपने frontend प्रोजेक्ट में संबंधित JavaScript फ़ाइलें खोलें।
प्लेसहोल्डर API URLs को http://localhost:8080/api/v1 के साथ बदलें।





		
		
			
			
Java
			
			// उदाहरण: src/config.js
const API_BASE_URL = 'http://localhost:8080/api/v1';
export default API_BASE_URL;
			
				
					
				
					1
2
3
				
						// उदाहरण: src/config.js
const API_BASE_URL = 'http://localhost:8080/api/v1';
export default API_BASE_URL;
					
				
			
		



Frontend सर्वर को पुनः प्रारंभ करें:

परिवर्तनों के बाद, वर्तमान frontend सर्वर को रोकें।
अपडेट्स को लागू करने के लिए फिर से 



		
		
			
			
Java
			
			npm start
			
				
					
				
					1
				
						npm start
					
				
			
		

 चलाएँ।



CORS समस्याओं को संभालना
कृपया CORS को समझें
Cross-Origin Resource Sharing (CORS) एक सुरक्षा विशेषता है जो ब्राउज़रों द्वारा लागू की जाती है ताकि वेब एप्लिकेशनों को उस डोमेन से अलग डोमेन पर अनुरोध भेजने से रोक सके जिससे वेब पेज सर्व किया गया था। जब frontend और backend अलग-अलग पोर्ट्स या डोमेन पर होस्ट किए जाते हैं, तो CORS नीतियां अनुरोधों को ब्लॉक कर सकती हैं, जिससे त्रुटियां उत्पन्न होती हैं।
Frontend में Proxy कॉन्फ़िगर करना
CORS समस्याओं को कम करने का एक तरीका frontend एप्लिकेशन में proxy कॉन्फ़िगर करना है, जिससे frontend बिना किसी बाधा के backend के साथ संवाद कर सके।

package.json में Proxy सेटिंग जोड़ें:

    



		
		
			
			
Java
			
			{
  // ...
  "proxy": "http://localhost:8080"
}
			
				
					
				
					1
2
3
4
				
						{
  // ...
  "proxy": "http://localhost:8080"
}
					
				
			
		


  
Proxy कॉन्फ़िगरेशन का प्रभाव:

इस सेटिंग के साथ, frontend से /api/v1 जैसे पथों पर API कॉल्स को http://localhost:8080/api/v1 पर प्रॉक्सी किया जाएगा, जिससे CORS प्रतिबंधों को पार किया जा सकेगा।



Spring Boot को CORS के लिए संशोधित करना
अगर proxy पर्याप्त नहीं है, तो backend को विशिष्ट origins को अनुमति देकर CORS समस्याओं को हल किया जा सकता है।

Controller एनोतेशंस अपडेट करें:
Backend प्रोजेक्ट में अपने कंट्रोलर फ़ाइलें खोलें। @CrossOrigin एनोतेशंस को frontend URL के साथ जोड़ें।
    




		
		
			
			
Java
			
			// उदाहरण: AlbumController.java
@RestController
@RequestMapping("/api/v1/albums")
@CrossOrigin(origins = "http://localhost:3000")
public class AlbumController {
    // कंट्रोलर मेथड्स
}
			
				
					
				
					1
2
3
4
5
6
7
				
						// उदाहरण: AlbumController.java
@RestController
@RequestMapping("/api/v1/albums")
@CrossOrigin(origins = "http://localhost:3000")
public class AlbumController {
    // कंट्रोलर मेथड्स
}
					
				
			
		


  
वैश्विक CORS कॉन्फ़िगरेशन:
और अधिक स्केलेबल तरीके के लिए, CORS को वैश्विक रूप से कॉन्फ़िगर करें।
    




		
		
			
			
Java
			
			// उदाहरण: SecurityConfig.java
@Configuration
public class SecurityConfig {
    
    @Bean
    public WebMvcConfigurer corsConfigurer() {
        return new WebMvcConfigurer() {
            @Override
            public void addCorsMappings(CorsRegistry registry) {
                registry.addMapping("/api/**")
                        .allowedOrigins("http://localhost:3000")
                        .allowedMethods("GET", "POST", "PUT", "DELETE")
                        .allowCredentials(true);
            }
        };
    }
    
    // अन्य सुरक्षा कॉन्फ़िगरेशन्स
}
			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
				
						// उदाहरण: SecurityConfig.java
@Configuration
public class SecurityConfig {
    
    @Bean
    public WebMvcConfigurer corsConfigurer() {
        return new WebMvcConfigurer() {
            @Override
            public void addCorsMappings(CorsRegistry registry) {
                registry.addMapping("/api/**")
                        .allowedOrigins("http://localhost:3000")
                        .allowedMethods("GET", "POST", "PUT", "DELETE")
                        .allowCredentials(true);
            }
        };
    }
    
    // अन्य सुरक्षा कॉन्फ़िगरेशन्स
}
					
				
			
		


  
Backend सर्वर को पुनः प्रारंभ करें:

परिवर्तनों के बाद, नए CORS सेटिंग्स को लागू करने के लिए backend को पुनः प्रारंभ करें।



CORS कॉन्फ़िगरेशन की पुष्टि करना

नेटवर्क कॉल्स का निरीक्षण करें:

अपने ब्राउज़र के डेवलपर टूल्स खोलें।
Network टैब पर जाएँ।
Frontend पेज को रिफ्रेश करें और API कॉल्स का निरीक्षण करें।


सफल API कॉल्स:

अगर सही तरीके से कॉन्फ़िगर किया गया है, तो API कॉल्स CORS त्रुटियों के बिना सफल होनी चाहिए।
Backend से प्रतिक्रियाएँ frontend द्वारा सफलतापूर्वक प्राप्त हो जाएंगी।



निष्कर्ष
एक स्थानीय विकास पर्यावरण सेट अप करना जो frontend और backend दोनों घटकों को निर्बाध रूप से एकीकृत करता है, कुशल वेब विकास के लिए महत्वपूर्ण है। frontend और backend की भूमिकाओं को समझकर, Spring Boot और React जैसे टूल्स को कॉन्फ़िगर करके, और proxies और backend कॉन्फ़िगरेशन्स के माध्यम से CORS समस्याओं को संभालकर, डेवलपर्स मजबूत और सुरक्षित एप्लिकेशन बना सकते हैं। इन अवधारणाओं में महारत हासिल करने से न केवल विकास प्रक्रिया को सरल बनाया जाता है, बल्कि स्केलेबल और मेंटेनेबल वेब सॉल्यूशन्स बनाने के लिए एक मजबूत आधार भी प्रस्तुत होता है।
SEO Keywords: frontend विकास, backend सेट अप, Spring Boot, React एकीकरण, CORS संभालना, proxy कॉन्फ़िगरेशन, स्थानीय विकास पर्यावरण, Postman के साथ API परीक्षण, Swagger API दस्तावेजीकरण, Java 17 सेट अप, Java के लिए VS Code, CORS नीति, Cross-Origin Resource Sharing, वेब विकास सर्वोत्तम प्रथाएँ
अतिरिक्त संसाधन

Spring Boot दस्तावेज़ीकरण
React आधिकारिक वेबसाइट
Postman लर्निंग सेंटर
CORS को समझना
Swagger UI गाइड
Java के लिए VS Code एक्सटेंशन्स
Java 17 डाउनलोड्स


इस ईबुक ने स्थानीय विकास पर्यावरण सेट अप करने, frontend और backend एप्लिकेशन्स को एकीकृत करने, और proxies द्वारा CORS समस्याओं को प्रभावी ढंग से प्रबंधित करने के लिए एक व्यापक मार्गदर्शिका प्रदान की। दिए गए चरणों का पालन करके, डेवलपर्स अपने वेब विकास प्रोजेक्ट्स में एक सुगम और कुशल वर्कफ़्लो सुनिश्चित कर सकते हैं।
ध्यान दें: यह लेख AI द्वारा उत्पन्न किया गया है।
घटक	Frontend	Backend
भूमिका	यूज़र इंटरफ़ेस और यूज़र अनुभव	डेटा प्रोसेसिंग, बिजनेस लॉजिक, और स्टोरेज
तकनीक	React, Angular, Vue.js, HTML, CSS, JavaScript	Spring Boot, Node.js, Python, Ruby, Java
इंटरैक्शन	अनुरोध भेजता है, प्राप्त डेटा दिखाता है	अनुरोध प्राप्त करता है, डेटा प्रोसेस करता है, प्रतिक्रियाएँ भेजता है