लोकल डेवलपमेंट के लिए एचटीटीपीएस का इस्तेमाल करना

Maud Nalpas

डेवलपमेंट के मकसद से, ज़्यादातर मामलों में http://localhost, एचटीटीपीएस की तरह काम करता है. हालांकि, कुछ खास मामलों में, आपको अपनी डेवलपमेंट साइट को एचटीटीपीएस की तरह काम करने के लिए साफ़ तौर पर सेट अप करना होगा. जैसे, कस्टम होस्टनेम या सभी ब्राउज़र पर सुरक्षित कुकी का इस्तेमाल करना. इससे यह सटीक तरीके से दिखाया जा सकेगा कि आपकी साइट, प्रोडक्शन में कैसे काम करती है. (अगर आपकी प्रोडक्शन वेबसाइट एचटीटीपीएस का इस्तेमाल नहीं करती है, तो इसे एचटीटीपीएस पर स्विच करना आपकी प्राथमिकता होनी चाहिए).

इस पेज पर, एचटीटीपीएस की मदद से अपनी साइट को स्थानीय तौर पर चलाने का तरीका बताया गया है.

ज़्यादा जानकारी के लिए, mkcert quick reference देखें.**

mkcert का इस्तेमाल करके, अपनी साइट को एचटीटीपीएस के साथ स्थानीय तौर पर चलाना (सुझाया गया)

अपनी लोकल डेवलपमेंट साइट के साथ एचटीटीपीएस का इस्तेमाल करने और https://localhost या https://mysite.example (कस्टम होस्टनेम) को ऐक्सेस करने के लिए, आपको TLS सर्टिफ़िकेट की ज़रूरत होगी. इस सर्टिफ़िकेट पर, किसी ऐसी इकाई के हस्ताक्षर होने चाहिए जिस पर आपका डिवाइस और ब्राउज़र भरोसा करता हो. इसे भरोसेमंद सर्टिफ़िकेट देने वाली संस्था (सीए) कहा जाता है. एचटीटीपीएस कनेक्शन बनाने से पहले, ब्राउज़र यह जांच करता है कि आपके डेवलपमेंट सर्वर के सर्टिफ़िकेट पर, किसी भरोसेमंद सीए ने हस्ताक्षर किए हैं या नहीं.

हमारा सुझाव है कि आप अपना सर्टिफ़िकेट बनाने और उस पर हस्ताक्षर करने के लिए, mkcert का इस्तेमाल करें. यह एक क्रॉस-प्लैटफ़ॉर्म सीए है. मदद पाने के अन्य विकल्पों के लिए, एचटीटीपीएस का इस्तेमाल करके अपनी साइट को स्थानीय तौर पर चलाना: अन्य विकल्प देखें.

कई ऑपरेटिंग सिस्टम में सर्टिफ़िकेट बनाने के लिए लाइब्रेरी शामिल होती हैं, जैसे कि openssl. हालांकि, ये mkcert की तुलना में ज़्यादा जटिल और कम भरोसेमंद होते हैं. साथ ही, ज़रूरी नहीं है कि ये क्रॉस-प्लैटफ़ॉर्म हों. इस वजह से, डेवलपर की बड़ी टीमों के लिए इन्हें ऐक्सेस करना मुश्किल हो जाता है.

सेटअप

1. mkcert इंस्टॉल करें (सिर्फ़ एक बार).

   अपने ऑपरेटिंग सिस्टम पर mkcert इंस्टॉल करने के लिए, निर्देशों का पालन करें. उदाहरण के लिए, macOS पर:

   brew install mkcert
   brew install nss # if you use Firefox
   

2. mkcert को अपने लोकल रूट सीए में जोड़ें.

   अपने टर्मिनल में, यह कमांड चलाएं:

   mkcert -install
   

   इससे एक लोकल सर्टिफ़िकेट अथॉरिटी (सीए) जनरेट होती है. mkcert से जनरेट किए गए आपके लोकल सीए पर, सिर्फ़ आपके डिवाइस पर लोकल तौर पर भरोसा किया जाता है.

3. अपनी साइट के लिए एक सर्टिफ़िकेट जनरेट करें, जिस पर mkcert ने हस्ताक्षर किया हो.

   अपने टर्मिनल में, अपनी साइट की रूट डायरेक्ट्री या उस डायरेक्ट्री पर जाएं जिसमें आपको अपना सर्टिफ़िकेट रखना है.

   इसके बाद, यह चलाएं:

   mkcert localhost
   

   अगर mysite.example जैसे किसी कस्टम होस्टनेम का इस्तेमाल किया जा रहा है, तो यह चलाएं:

   mkcert mysite.example
   

   इस निर्देश से दो काम होते हैं:

   • आपके बताए गए होस्टनेम के लिए सर्टिफ़िकेट जनरेट करता है.
   • इससे mkcert को सर्टिफ़िकेट पर हस्ताक्षर करने की अनुमति मिलती है.

   आपका सर्टिफ़िकेट अब तैयार है. इस पर, सर्टिफ़िकेट अथॉरिटी ने हस्ताक्षर कर दिए हैं. आपका ब्राउज़र, इस अथॉरिटी पर भरोसा करता है.

4. अपने सर्वर को एचटीटीपीएस का इस्तेमाल करने के लिए कॉन्फ़िगर करें. इसके लिए, उस टीएलएस सर्टिफ़िकेट का इस्तेमाल करें जिसे आपने अभी-अभी बनाया है.

   ऐसा करने का तरीका आपके सर्वर पर निर्भर करता है. यहां कुछ उदाहरण दिए गए हैं:

   👩🏻‍💻 Node के साथ:

   server.js ({PATH/TO/CERTIFICATE...} और {PORT} को बदलें):

   const https = require('https');
   const fs = require('fs');
   const options = {
     key: fs.readFileSync('{PATH/TO/CERTIFICATE-KEY-FILENAME}.pem'),
     cert: fs.readFileSync('{PATH/TO/CERTIFICATE-FILENAME}.pem'),
   };
   https
     .createServer(options, function (req, res) {
       // server code
     })
     .listen({PORT});
   

   👩🏻‍💻 http-server की मदद से:

   अपने सर्वर को इस तरह शुरू करें ({PATH/TO/CERTIFICATE...} को बदलें):

   http-server -S -C {PATH/TO/CERTIFICATE-FILENAME}.pem -K {PATH/TO/CERTIFICATE-KEY-FILENAME}.pem
   

   -S आपके सर्वर को एचटीटीपीएस के साथ चलाता है. वहीं, -C सर्टिफ़िकेट सेट करता है और -K कुंजी सेट करता है.

   👩🏻‍💻 React डेवलपमेंट सर्वर की मदद से:

   अपने package.json में इस तरह बदलाव करें और {PATH/TO/CERTIFICATE...} को बदलें:

   "scripts": {
   "start": "HTTPS=true SSL_CRT_FILE={PATH/TO/CERTIFICATE-FILENAME}.pem SSL_KEY_FILE={PATH/TO/CERTIFICATE-KEY-FILENAME}.pem react-scripts start"
   

   उदाहरण के लिए, अगर आपने अपनी साइट की रूट डायरेक्ट्री में localhost के लिए कोई सर्टिफ़िकेट बनाया है, तो:

   |-- my-react-app
       |-- package.json
       |-- localhost.pem
       |-- localhost-key.pem
       |--...
   

   इसके बाद, आपकी start स्क्रिप्ट कुछ ऐसी दिखेगी:

   "scripts": {
       "start": "HTTPS=true SSL_CRT_FILE=localhost.pem SSL_KEY_FILE=localhost-key.pem react-scripts start"
   

   👩🏻‍💻 अन्य उदाहरण:

   • Angular डेवलपमेंट सर्वर
   • Python

5. अपने ब्राउज़र में https://localhost या https://mysite.example खोलें, ताकि यह दोबारा जांचा जा सके कि आपकी साइट, एचटीटीपीएस के साथ लोकल सर्वर पर चल रही है या नहीं. आपको ब्राउज़र से जुड़ी कोई चेतावनी नहीं दिखेगी, क्योंकि आपका ब्राउज़र mkcert को स्थानीय सर्टिफ़िकेट अथॉरिटी के तौर पर भरोसेमंद मानता है.

mkcert के बारे में खास जानकारी

mkcert के बारे में खास जानकारी

एचटीटीपीएस के साथ अपनी लोकल डेवलपमेंट साइट को चलाने के लिए:

1. mkcert सेट अप करें.

   अगर आपने अब तक mkcert इंस्टॉल नहीं किया है, तो इसे इंस्टॉल करें. उदाहरण के लिए, macOS पर:

   brew install mkcert
   
   
   

   Windows और Linux के लिए, mkcert इंस्टॉल करें देखें.

   इसके बाद, सर्टिफ़िकेट देने वाली स्थानीय संस्था बनाएं:

   mkcert -install

2. भरोसेमंद सर्टिफ़िकेट बनाना.

   mkcert {YOUR HOSTNAME e.g. localhost or mysite.example}

   इससे एक मान्य सर्टिफ़िकेट बनता है, जिसे mkcert अपने-आप साइन करता है.

3. अपने डेवलपमेंट सर्वर को एचटीटीपीएस और दूसरे चरण में बनाए गए सर्टिफ़िकेट का इस्तेमाल करने के लिए कॉन्फ़िगर करें.

अब अपने ब्राउज़र में https://{YOUR HOSTNAME} को बिना किसी चेतावनी के ऐक्सेस किया जा सकता है

</div>

एचटीटीपीएस की मदद से अपनी साइट को स्थानीय तौर पर चलाना: अन्य विकल्प

सर्टिफ़िकेट सेट अप करने के अन्य तरीके यहां दिए गए हैं. आम तौर पर, ये mkcert का इस्तेमाल करने की तुलना में ज़्यादा मुश्किल या जोखिम भरे होते हैं.

खुद हस्ताक्षर किया हुआ सर्टिफ़िकेट

आपके पास mkcert जैसी स्थानीय सर्टिफ़िकेट अथॉरिटी का इस्तेमाल न करने का विकल्प भी है. इसके बजाय, अपने सर्टिफ़िकेट पर खुद हस्ताक्षर करें. इस तरीके में ये कुछ समस्याएं हैं:

• ब्राउज़र आपको सर्टिफ़िकेट अथॉरिटी के तौर पर भरोसेमंद नहीं मानते. इसलिए, वे चेतावनियां दिखाएंगे जिन्हें आपको मैन्युअल तरीके से बायपास करना होगा. Chrome में, #allow-insecure-localhost फ़्लैग का इस्तेमाल करके, localhost पर इस चेतावनी को अपने-आप बायपास किया जा सकता है.
• अगर असुरक्षित नेटवर्क का इस्तेमाल किया जा रहा है, तो यह सुरक्षित नहीं है.
• यह ज़रूरी नहीं है कि mkcert जैसे लोकल सीए का इस्तेमाल करने के मुकाबले, यह तरीका आसान या तेज़ हो.
• खुद हस्ताक्षर किए हुए सर्टिफ़िकेट, भरोसेमंद सर्टिफ़िकेट की तरह काम नहीं करते.
• अगर ब्राउज़र के संदर्भ में इस तकनीक का इस्तेमाल नहीं किया जा रहा है, तो आपको अपने सर्वर के लिए सर्टिफ़िकेट की पुष्टि करने की सुविधा बंद करनी होगी. प्रोडक्शन में इसे फिर से चालू करना भूल जाने से, सुरक्षा से जुड़ी समस्याएं हो सकती हैं.

अगर आपने कोई सर्टिफ़िकेट नहीं दिया है, तो React और Vue के डेवलपमेंट सर्वर के एचटीटीपीएस विकल्प, बैकग्राउंड में खुद हस्ताक्षर किया हुआ सर्टिफ़िकेट बनाते हैं. यह तरीका आसान है, लेकिन इसमें ब्राउज़र की चेतावनियां और खुद हस्ताक्षर किए हुए सर्टिफ़िकेट की अन्य कमियां शामिल हैं. हालांकि, फ़्रंटएंड फ़्रेमवर्क के पहले से मौजूद एचटीटीपीएस विकल्प का इस्तेमाल किया जा सकता है. साथ ही, mkcert या इससे मिलते-जुलते टूल का इस्तेमाल करके बनाए गए, स्थानीय तौर पर भरोसेमंद सर्टिफ़िकेट की जानकारी दी जा सकती है. ज़्यादा जानकारी के लिए, React के साथ mkcert का उदाहरण देखें.

ब्राउज़र, खुद हस्ताक्षर किए हुए सर्टिफ़िकेट पर भरोसा क्यों नहीं करते?

अगर एचटीटीपीएस का इस्तेमाल करके, ब्राउज़र में स्थानीय तौर पर चल रही साइट को खोला जाता है, तो आपका ब्राउज़र आपके लोकल डेवलपमेंट सर्वर के सर्टिफ़िकेट की जांच करता है. जब उसे पता चलता है कि आपने सर्टिफ़िकेट पर खुद हस्ताक्षर किए हैं, तो वह यह जांच करता है कि आपने भरोसेमंद सर्टिफ़िकेट जारी करने वाली संस्था के तौर पर रजिस्टर किया है या नहीं. ऐसा न होने पर, आपका ब्राउज़र सर्टिफ़िकेट पर भरोसा नहीं कर सकता. साथ ही, वह आपको चेतावनी दिखाता है कि आपका कनेक्शन सुरक्षित नहीं है. अगर आप आगे बढ़ते हैं, तो यह अब भी एचटीटीपीएस कनेक्शन बनाता है. हालांकि, ऐसा करने पर आपको जोखिम उठाना पड़ सकता है.

सर्टिफ़िकेट देने वाली किसी सामान्य संस्था या निकाय से हस्ताक्षर किया गया सर्टिफ़िकेट

किसी आधिकारिक सीए से साइन किए गए सर्टिफ़िकेट का भी इस्तेमाल किया जा सकता है. इसमें ये विजेट शामिल हैं:

• आपको mkcert जैसी लोकल सीए तकनीक का इस्तेमाल करने की तुलना में, सेटअप करने के लिए ज़्यादा काम करना होगा.
• आपको एक ऐसे मान्य डोमेन नेम का इस्तेमाल करना होगा जो आपके कंट्रोल में हो. इसका मतलब है कि आधिकारिक सीए का इस्तेमाल इन कामों के लिए नहीं किया जा सकता:
  • localhost और रिज़र्व किए गए अन्य डोमेन नेम, जैसे कि example या test.
  • ऐसा कोई भी डोमेन नेम जिस पर आपका कंट्रोल नहीं है.
  • अमान्य टॉप-लेवल डोमेन. ज़्यादा जानकारी के लिए, मान्य टॉप-लेवल डोमेन की सूची देखें.

रिवर्स प्रॉक्सी

एचटीटीपीएस के साथ स्थानीय तौर पर चल रही साइट को ऐक्सेस करने का दूसरा विकल्प, रिवर्स प्रॉक्सी का इस्तेमाल करना है. जैसे, ngrok. इससे ये जोखिम जुड़े हैं:

• जिस व्यक्ति के साथ आपने रिवर्स प्रॉक्सी यूआरएल शेयर किया है वह आपकी लोकल डेवलपमेंट साइट को ऐक्सेस कर सकता है. यह सुविधा, क्लाइंट को आपके प्रोजेक्ट का डेमो दिखाने में मददगार हो सकती है. हालांकि, इससे ऐसे लोग भी संवेदनशील जानकारी शेयर कर सकते हैं जिनके पास इसकी अनुमति नहीं है.
• रिवर्स प्रॉक्सी की कुछ सेवाएं, इस्तेमाल के लिए शुल्क लेती हैं. इसलिए, सेवा चुनते समय कीमत एक अहम फ़ैक्टर हो सकती है.
• ब्राउज़र में सुरक्षा के नए तरीकों की वजह से, इन टूल के काम करने के तरीके पर असर पड़ सकता है.

फ़्लैग (इसका सुझाव नहीं दिया जाता)

अगर Chrome में mysite.example जैसे किसी कस्टम होस्टनेम का इस्तेमाल किया जा रहा है, तो फ़्लैग का इस्तेमाल करके ब्राउज़र को mysite.example को सुरक्षित मानने के लिए मजबूर किया जा सकता है. इन वजहों से ऐसा करने से बचें:

• आपको पूरी तरह से पक्का करना होगा कि mysite.example हमेशा किसी लोकल पते पर ले जाए. ऐसा न करने पर, प्रोडक्शन क्रेडेंशियल लीक होने का खतरा रहता है.
• यह फ़्लैग सिर्फ़ Chrome में काम करता है. इसलिए, अलग-अलग ब्राउज़र पर डीबग नहीं किया जा सकता.

समीक्षा करने वाले और योगदान देने वाले सभी लोगों को धन्यवाद. खास तौर पर, रयान स्लीवी, फ़िलिपो वाल्सोर्डा, मिलिका मिहाज्लिजा, और रोवन मीरवूड को धन्यवाद. 🙌