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

Maud Nalpas

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

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

छोटे निर्देशों के लिए, mkcert का क्विक रेफ़रंस देखें.**

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

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

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

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

सेटअप

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

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

   brew install mkcert
   brew install nss # if you use Firefox
   

2. अपने लोकल रूट CA सर्टिफ़िकेट में mkcert जोड़ें.

   अपने टर्मिनल में, नीचे दिया गया निर्देश चलाएं:

   mkcert -install
   

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

3. अपनी साइट के लिए mkcert से मिला सर्टिफ़िकेट जनरेट करें.

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

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

   mkcert localhost
   

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

   mkcert mysite.example
   

   यह निर्देश दो काम करता है:

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

   अब आपका सर्टिफ़िकेट तैयार है और इस पर उस सर्टिफ़िकेट देने वाली संस्था ने हस्ताक्षर किया है ब्राउज़र स्थानीय रूप से भरोसेमंद होता है.

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

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

   PLAN🏻 💻 नोड के साथ:

   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 कुंजी सेट करता है.

   ⟏ थीम रिऐक्ट डेवलपमेंट सर्वर की मदद से:

   अपने 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"
   

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

   • ऐंगुलर डेवलपमेंट सर्वर
   • Python

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

mkcert के लिए झटपट रेफ़रंस की सुविधा

mkcert के लिए झटपट रेफ़रंस की सुविधा

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

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

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

   brew install mkcert
   
   
   

   install mkcert की जांच करें Windows और Linux निर्देशों के लिए.

   फिर, एक स्थानीय प्रमाणपत्र प्राधिकरण बनाएं:

   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 जैसे किसी स्थानीय CA के इस्तेमाल से ज़्यादा आसान या तेज़ हो.
• खुद हस्ताक्षर किए हुए सर्टिफ़िकेट, उस तरह काम नहीं करेंगे जैसा भरोसेमंद माना जाता है सर्टिफ़िकेट.
• अगर इस तकनीक का इस्तेमाल ब्राउज़र में नहीं किया जा रहा है, तो आपको इसे बंद करना होगा सर्टिफ़िकेट की पुष्टि करें. इसमें फिर से सक्षम करना भूल जाना प्रोडक्शन के दौरान सुरक्षा से जुड़ी समस्याएं होती हैं.

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

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

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

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

आप किसी आधिकारिक सीए के हस्ताक्षर वाले सर्टिफ़िकेट का भी इस्तेमाल कर सकते हैं. यह फ़ैसला लेने के साथ-साथ Android घड़ी के विजेट से:

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

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

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

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

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

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

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

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

Unस्प्लैश पर @anandu की हीरो इमेज के बैकग्राउंड में बदलाव किया गया.