इस पेज का अनुवाद Cloud Translation API से किया गया है.

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

Maud Nalpas

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

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

ध्यान दें: इस पोस्ट में, localhost के बारे में दिए गए स्टेटमेंट 127.0.0.1 के साथ-साथ [::1] के लिए भी मान्य हैं. ऐसा इसलिए है, क्योंकि ये दोनों ही कंप्यूटर के लोकल पते (जिसे लूपबैक पता भी कहा जाता है) के बारे में जानकारी देते हैं. चीज़ों को आसान बनाए रखने के लिए, ये निर्देश पोर्ट नंबर नहीं बताते हैं. इसलिए, जब आपको http://localhost दिखे, तो उसे http://localhost:{PORT} या http://127.0.0.1:{PORT} के तौर पर पढ़ें.

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

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

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

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

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

चेतावनी:

जब आप mkcert -install चलाते हैं, तो mkcertification से अपने-आप बनी फ़ाइल rootCA-key.pem को कभी एक्सपोर्ट या शेयर न करें. इस फ़ाइल पर रोक लगाने वाला हमलावर, आपकी विज़िट की गई किसी भी साइट पर पाथ पर हमला कर सकता है. वे आपकी मशीन से किसी भी साइट पर किए गए सुरक्षित अनुरोधों को बीच में रोक सकते हैं—जैसे कि आपका बैंक, स्वास्थ्य सेवाएं देने वाला संगठन या सोशल नेटवर्क. अगर आपको यह जानना है कि rootCA-key.pem किस जगह पर मौजूद है, तो mkcert -CAROOT चलाएं.
mkcert का इस्तेमाल सिर्फ़ डेवलपमेंट के मकसद से करें—और एक्सटेंशन के ज़रिए, असली उपयोगकर्ताओं को mkcert निर्देश चलाने के लिए कभी न कहें.
डेवलपमेंट टीम: आपकी टीम के सभी सदस्यों को mkcert को अलग से इंस्टॉल और चलाना चाहिए. उपयोगकर्ताओं को सीए और सर्टिफ़िकेट की जानकारी सेव और शेयर नहीं करनी चाहिए.

सेटअप

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

अपने ऑपरेटिंग सिस्टम पर mkcert इंस्टॉल करने के instructions का पालन करें. उदाहरण के लिए, macOS पर:
```
brew install mkcert
brew install nss # if you use Firefox
```
अपने स्थानीय रूट CAs में mkcert जोड़ें.

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

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

इसके बाद, चलाएं:
```
mkcert localhost
```
अगर mysite.example जैसे कस्टम होस्टनेम का इस्तेमाल किया जा रहा है, तो इसे चलाएं:
```
mkcert mysite.example
```
यह निर्देश दो काम करता है:
- आपके तय किए गए होस्टनेम के लिए सर्टिफ़िकेट जनरेट करता है.
- mkcert को सर्टिफ़िकेट पर हस्ताक्षर करने दें.
आपका सर्टिफ़िकेट अब तैयार है और उस पर हस्ताक्षर करने वाली ऐसी संस्था है जो आपके ब्राउज़र पर स्थानीय तौर पर भरोसा करती है.
अभी बनाए गए TLS सर्टिफ़िकेट का इस्तेमाल करने के लिए, अपना सर्वर कॉन्फ़िगर करें.

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

events🏻 † नोड के साथ:

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});
```
✘🏻 events http-server की मदद से:

अपना सर्वर इस तरह शुरू करें ({PATH/TO/CERTIFICATE...} को बदलें):
```
http-server -S -C {PATH/TO/CERTIFICATE-FILENAME}.pem -K {PATH/TO/CERTIFICATE-KEY-FILENAME}.pem
```
-S आपके सर्वर को एचटीटीपीएस से चलाता है. वहीं, -C सर्टिफ़िकेट सेट करता है और -K कुंजी सेट करता है.

Asset🏻 † रिऐक्ट डेवलपमेंट सर्वर की मदद से:

अपने 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"
```
Contacts🏻 अन्य उदाहरण:
- एंगुलर डेवलपमेंट सर्वर
- Python
इस बात की दोबारा जांच करने के लिए कि आपकी साइट, एचटीटीपीएस पर चलाया जा रहा है या नहीं, अपने ब्राउज़र में https://localhost या https://mysite.example खोलें. आपको ब्राउज़र से जुड़ी कोई चेतावनी नहीं दिखेगी, क्योंकि आपका ब्राउज़र mkcert को लोकल सर्टिफ़िकेट देने वाली संस्था के तौर पर भरोसेमंद है.

mkcert क्विक रेफ़रंस

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

mkcert सेट अप करें.

अगर आपने अभी तक mkcert इंस्टॉल नहीं किया है, तो उदाहरण के लिए macOS पर:
```
brew install mkcert
```
Windows और Linux के निर्देशों के लिए, mkcert देखें.

इसके बाद, एक स्थानीय सर्टिफ़िकेट देने वाली संस्था बनाएं:
```
mkcert -install
```
एक भरोसेमंद प्रमाणपत्र बनाएं.
```
mkcert {YOUR HOSTNAME e.g. localhost or mysite.example}
```
इससे एक मान्य सर्टिफ़िकेट बनता है. इसे mkcert में अपने-आप साइन कर दिया जाता है.
एचटीटीपीएस और दूसरे चरण में बनाए गए सर्टिफ़िकेट का इस्तेमाल करने के लिए, अपना डेवलपमेंट सर्वर कॉन्फ़िगर करें.

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

चेतावनी: ऐसा सिर्फ़ डेवलपमेंट के लिए करें और फ़ाइल को न तो एक्सपोर्ट या शेयर न करेंrootCA-key.pem. अगर आपको यह जानना है कि यह फ़ाइल सुरक्षित है या नहीं, तो mkcert -CAROOT चलाएं.

</div>

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

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

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

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

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

खुद हस्ताक्षर किए गए सर्टिफ़िकेट का इस्तेमाल करने पर, चेतावनियों वाले ब्राउज़र के स्क्रीनशॉट दिखते हैं. — चेतावनी वाले ब्राउज़र तब दिखते हैं, जब खुद हस्ताक्षर किए गए सर्टिफ़िकेट का इस्तेमाल किया जाता है.

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

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

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

ब्राउज़र, खुद हस्ताक्षर किए गए सर्टिफ़िकेट पर भरोसा क्यों नहीं करते हैं: इस डायग्राम में दिखाया गया है. — ब्राउज़र, खुद हस्ताक्षर किए गए सर्टिफ़िकेट पर भरोसा क्यों नहीं करते.

किसी सामान्य सर्टिफ़िकेट अथॉरिटी का हस्ताक्षर किया हुआ सर्टिफ़िकेट

आप किसी आधिकारिक सीए के हस्ताक्षर वाले सर्टिफ़िकेट का भी इस्तेमाल कर सकते हैं. इसमें, नीचे बताई गई चीज़ों से जुड़ी समस्याएं होती हैं:

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

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

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

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

फ़्लैग करें (हम इसका सुझाव नहीं देते)

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

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

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

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