एक सार्वजनिक पते से सुलभ एक स्थानीय सर्वर बनाना

मैं 10 वर्षों के बेहतर हिस्से के लिए वेबसाइट विकसित कर रहा हूं और मेरा सबसे बड़ा मुद्दा हमेशा स्थानीय विकास था और स्थानीय साइटों को लाइव परीक्षणों के लिए समन्वयित करना था। स्थानीय वातावरण का उपयोग करना बहुत अच्छा है क्योंकि यह तेज़ है, लेकिन यह दूर से देखने योग्य नहीं है और कहीं और स्थानांतरित करने का मतलब है डेटाबेस ऑपरेशन, टेबल्स, मानों का नाम बदलना इत्यादि।.

इस लेख में, मैं आपको एक आसान तरीका दिखाऊंगा एक स्थानीय सर्वर चलाएं जो आप कर सकते हैं अपने फोन और अन्य मोबाइल उपकरणों से पहुंच मूल रूप से, और इंटरनेट पर भी प्रसारित किया जाता है, जिसका मतलब है कि ग्राहकों के साथ अपने काम को साझा करना, बिना अच्छे 'ओएलएच' के लोकलहोस्ट के.

एक स्थानीय वातावरण बनाने के लिए वैग्रंट का उपयोग करना

थोड़ी देर पहले मैंने यहां पर एक लेख लिखा था कि हॉन्गकैट पर वैग्रंट का उपयोग करने के बारे में इसलिए मैं केवल यहां की मूल बातें पर जाऊंगा। अधिक जानकारी के लिए, लेख पर एक नज़र डालें!

आरंभ करने के लिए, आपको VirtualBox और Vagrant को पकड़ना और स्थापित करना होगा। दोनों स्वतंत्र हैं और एक वर्चुअल मशीन बनाने के लिए उपयोग किया जाता है जो आपके सर्वर को चलाएगा.

अब, अपनी वेबसाइटों को संग्रहीत करने के लिए एक फ़ोल्डर बनाएँ। आइए एक निर्देशिका का उपयोग करें “वेबसाइटें” हमारे मुख्य उपयोगकर्ता निर्देशिका के भीतर। यह होगा / उपयोगकर्ताओं / [उपयोगकर्ता नाम] / वेबसाइटें ओएस एक्स पर और सी: / उपयोगकर्ताओं / [उपयोगकर्ता नाम] / वेबसाइटें विंडोज पर.

नाम से एक नया फ़ोल्डर बनाएँ वर्डप्रेस. यह वह जगह है जहाँ मैं वर्चुअल मशीन बनाऊँगा। विचार यह है कि प्रत्येक फ़ोल्डर के भीतर वेबसाइटें एक अलग वर्चुअल मशीन है। जब तुम कर सकते हैं एक वर्चुअल मशीन पर जितनी चाहें उतनी वेबसाइटें डाल दें, मैं उन्हें प्लेटफार्मों द्वारा समूहबद्ध करना पसंद करता हूं - जैसे: वर्डप्रेस, लार्वा, कस्टम

इस ट्यूटोरियल के प्रयोजनों के लिए मैं एक वर्डप्रेस वेबसाइट बना रहा हूँ.

के अंदर वर्डप्रेस फ़ोल्डर हमें दो फ़ाइलें बनाने की आवश्यकता होगी, Vagrantfile तथा install.sh. इनका उपयोग हमारी आभासी मशीनों को स्थापित करने के लिए किया जाएगा। जेफरी वे ने दो महान स्टार्टर फाइलें बनाई हैं; आप उसकी Vagrantfile और install.sh फाइलें पकड़ सकते हैं.

अगला, टर्मिनल का उपयोग करके, पर नेविगेट करें वर्डप्रेस निर्देशिका और प्रकार ऊपर उठना. इसमें कुछ समय लगेगा, क्योंकि बॉक्स को डाउनलोड करना होगा और फिर इंस्टॉल करना होगा। एक कप कॉफी पकड़ो और प्रतीक्षा करते समय 50 वर्डप्रेस युक्तियों पर इस पोस्ट को देखें.

एक बार प्रक्रिया पूरी हो जाने के बाद आपको इसमें जाने में सक्षम होना चाहिए 192.168.33.21 और एक अच्छी तरह से परोसा गया पृष्ठ देखें। आप सामग्री फ़ोल्डर वर्डप्रेस निर्देशिका के भीतर HTML फ़ोल्डर होना चाहिए। अब आप फ़ाइलों को जोड़ना शुरू कर सकते हैं, वर्डप्रेस स्थापित कर सकते हैं, या कुछ और जो आप चाहते हैं.

वर्चुअल होस्ट बनाने, डोमेन जैसे मैपिंग के बारे में अधिक जानकारी के लिए पूर्ण वैग्रंट गाइड पढ़ना न भूलें mytest.dev और इसी तरह.

एक ही नेटवर्क पर स्थानीय साइटों को खोलना गुल का उपयोग करना

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

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

इसे पूरा करने के लिए हम Gulp और Browserync का उपयोग करेंगे। गुल, विकास के स्वचालन के लिए एक उपकरण है, ब्राउजरसंक एक महान उपकरण है जो न केवल एक स्थानीय सर्वर बना सकता है, बल्कि स्क्रॉलिंग, क्लिक, फ़ॉर्म और अधिक संपूर्ण उपकरणों को सिंक्रनाइज़ कर सकता है।.

गुल की स्थापना

गुलप को स्थापित करना बहुत आसान है। निर्देशों के लिए प्रारंभ पृष्ठ पर जाएं। एक पूर्व-आवश्यकता एनपीएम (नोड पैकेज मैनेजर) है। इसे प्राप्त करने का सबसे आसान तरीका स्वयं नोड स्थापित करना है। निर्देशों के लिए नोड वेबसाइट पर नीचे जाएं.

एक बार आपने उपयोग कर लिया npm स्थापित --global gulp विश्व स्तर पर स्थापित करने के लिए कमांड, आपको इसे अपनी परियोजना में जोड़ने की आवश्यकता है। ऐसा करने का तरीका है दौड़ना npm स्थापित - save-dev gulp अपने प्रोजेक्ट के रूट फ़ोल्डर में, फिर a जोड़ें gulpfile.js वहां फाइल करें.

फिलहाल उस फ़ाइल के अंदर कोड की एक पंक्ति जोड़ते हैं जो इंगित करता है कि हम खुद ही गुल का उपयोग करेंगे.

var gulp = आवश्यकता ('gulp');

यदि आप सभी ठंडी चीजों में रुचि रखते हैं, तो गुप्‍प कॉन्‍सेप्टिंग स्क्रिप्ट्स की तरह कर सकते हैं, सैस और लेस को कंपेयर कर सकते हैं, इमेजेस को ऑप्टिमाइज़ कर सकते हैं और हमारे गाइड टू गल्प को पढ़ सकते हैं। इस लेख में हम एक सर्वर बनाने पर ध्यान केंद्रित करेंगे.

ब्राउजरसिंक का उपयोग करना

ब्राउजरसिंक में एक गुल्प एक्सटेंशन है जिसे हम दो चरणों में स्थापित कर सकते हैं। सबसे पहले, इसे डाउनलोड करने के लिए npm का उपयोग करते हैं, फिर हम इसे अपने गुलफिले में जोड़ते हैं.

जारी करें npm ब्राउज़र-सिंक gulp - save-dev स्थापित करें टर्मिनल में प्रोजेक्ट रूट में कमांड; यह एक्सटेंशन डाउनलोड करेगा। फिर, गुलफ़िले को खोलें और इसमें निम्नलिखित पंक्ति जोड़ें:

var BrowserSync = आवश्यकता ('ब्राउज़र-सिंक'); क्रिएट ();

इससे हमें पता चलता है कि हम ब्राउज़र्स का उपयोग कर रहे हैं। आगे हम एक कार्य को परिभाषित करेंगे जो यह नियंत्रित करता है कि ब्राउजरसिंक कैसे काम करेगा.

gulp.task ('ब्राउज़र-सिंक', फ़ंक्शन () browserSync.init (प्रॉक्सी: "192.168.33.21";);

एक बार जोड़ने के बाद, आप टाइप कर सकते हैं gulp ब्राउज़र-सिंक सर्वर शुरू करने के लिए टर्मिनल में। आपको नीचे दी गई छवि की तरह कुछ देखना चाहिए.

वहाँ चार अलग-अलग URL हैं, यहाँ उनका मतलब है:

• स्थानीय: स्थानीय URL वह जगह है जहाँ आप उस मशीन पर सर्वर तक पहुँच सकते हैं जिस पर आप उसे चला रहे हैं। हमारे मामलों में आप उपयोग कर सकते हैं 192.168.33.21 या आप Borwsersync द्वारा दिए गए एक का उपयोग कर सकते हैं.
• बाहरी: यह वह URL है जिसका उपयोग आप वेबसाइट तक पहुंचने के लिए नेटवर्क से जुड़े किसी भी उपकरण पर कर सकते हैं। यह आपके स्थानीय मशीन, आपके फोन, टैबलेट आदि पर काम करेगा.
• यूआई: यह URL वर्तमान में चल रहे सर्वर के विकल्पों की ओर इशारा करता है। आप कनेक्शन देख सकते हैं, नेटवर्क थ्रॉटलिंग सेट कर सकते हैं, इतिहास या सिंक विकल्प देख सकते हैं.
• बाहरी यूआई: यह यूआई के समान है, लेकिन नेटवर्क पर किसी भी डिवाइस से सुलभ है.

ब्राउजरसिंक का उपयोग क्यों करें?

अब जब हम इस चरण के साथ काम कर रहे हैं तो आप सोच रहे होंगे: क्यों ब्राउजर्सकंट का उपयोग करें? URL 192.168.33.21 भी किसी भी डिवाइस से पहुँचा जा सकता है। जबकि ऐसा है, तो आपको इस URL पर वर्डप्रेस इंस्टॉल करना होगा.

मैं आमतौर पर virtualhosts का उपयोग करता हूँ और wordpress.local या myproject.dev जैसे डोमेन रखता हूँ। ये स्थानीय रूप से हल होते हैं इसलिए आप अपने मोबाइल फोन पर wordpress.local पर नहीं जा सकते हैं और अपने स्थानीय कंप्यूटर पर उसी परिणाम को देख सकते हैं.

अब तक अच्छा है, अब हमारे पास एक परीक्षण साइट है जिसे नेटवर्क पर किसी भी डिवाइस से एक्सेस किया जा सकता है। अब यह वैश्विक स्तर पर जाने और इंटरनेट पर हमारे काम को प्रसारित करने का समय है.

हमारे लोकलहोस्ट को साझा करने के लिए एनक्रोच का उपयोग करना

ngrok एक उपकरण है जिसका उपयोग आप अपने स्थानीयहोस्ट को सुरक्षित सुरंग बनाने के लिए कर सकते हैं। यदि आप साइन अप (अभी भी मुफ्त) करते हैं तो आपको पासवर्ड संरक्षित सुरंग, टीसीपी और कई एक साथ सुरंगें मिलती हैं.

एनक्रोच स्थापित करना

Ngrok डाउनलोड पृष्ठ पर जाएं और आपको आवश्यक संस्करण को पकड़ो। आप इसे उस फ़ोल्डर से चला सकते हैं जो इसमें है या इसे किसी ऐसे स्थान पर ले जाएं जो आपको इसे कहीं से भी चलाने की अनुमति देता है। Mac / Linux पर आप निम्न कमांड चला सकते हैं:

sudo mv ngrok / usr / लोकल / बिन / ngrok

यदि आपको कोई त्रुटि मिलती है कि यह स्थान मौजूद नहीं है, तो बस गायब फ़ोल्डर बनाएँ.

Ngrok का उपयोग करना

शुक्र है कि यह हिस्सा बेहद सरल है। एक बार जब आप अपने सर्वर को गुलप के माध्यम से चला रहे हैं, तो उस पोर्ट पर एक नज़र डालें जिसका वह उपयोग कर रहा है। ऊपर के उदाहरण में, स्थानीय सर्वर चल रहा है http: // localhost: 3000 जिसका अर्थ है कि यह पोर्ट 3000 का उपयोग कर रहा है। एक नए टर्मिनल टैब में, निम्न कमांड चलाएँ:

http 3000 एनरोकॉक

इससे आपकी लोकलहोस्ट के लिए एक सुलभ सुरंग बनेगी, परिणाम कुछ इस तरह होना चाहिए:

आप जिस URL को देखते हैं “अग्रेषित करना” आप अपनी वेबसाइट को कहीं से भी एक्सेस करने के लिए उपयोग कर सकते हैं.

निष्कर्ष

दिन के अंत में हम अब तीन काम कर सकते हैं:

• हमारी परियोजना पर स्थानीय स्तर पर देखें और काम करें
• नेटवर्क पर किसी भी डिवाइस के माध्यम से हमारी वेबसाइट देखें
• दूसरों को एक सरल लिंक के साथ कहीं भी हमारे काम को देखने दें

यह आपको स्थानीय और परीक्षण सर्वर को सिंक, माइग्रेट करने वाले डेटाबेस और अन्य चिंताजनक कार्यों के लिए रेसिंग के बजाय विकास पर ध्यान केंद्रित करने की अनुमति देगा.

यदि आपके पास स्थानीय रूप से काम करने और परिणाम साझा करने का एक अलग तरीका है, तो हमें बताएं!