nginx के लिए कॉन्फ़िगरेशन का निर्माण, एक पुल अनुरोध का इतिहास

नमस्कार साथियों. मेरे लड़ाकू सर्वर पर सुंदर nginx 2006 से चल रहा है और इसके प्रशासन के वर्षों में मैंने बहुत सारे कॉन्फ़िगरेशन और टेम्पलेट जमा किए हैं। मैंने nginx की बहुत प्रशंसा की और किसी तरह यह पता चला कि मैंने हब पर एक nginx हब भी शुरू किया, दिखावा m/
दोस्तों ने मुझसे उनके लिए एक विकास फ़ार्म स्थापित करने के लिए कहा, और उन्हें अपने विशिष्ट टेम्पलेट्स में खींचने के बजाय, मुझे एक दिलचस्प परियोजना याद आई nginxconfig.io, जो अलमारियों पर कॉन्फ़िगरेशन को बिखेरता है और एन्क्रिप्ट करने आदि के लिए सब कुछ तैयार करता है। मैंने सोचा, क्यों नहीं? हालाँकि, मैं इस तथ्य से क्रोधित था कि nginxconfig मुझे ज़िप संग्रह को ब्राउज़र में डाउनलोड करने की पेशकश करता है, बिना मुझे wget/fetch/curl का उपयोग करके इसे सीधे सर्वर पर अपलोड करने की अनुमति दिए बिना। क्या बकवास है, मुझे ब्राउज़र में इसकी आवश्यकता क्यों है, मुझे कंसोल से सर्वर पर इसकी आवश्यकता है। गुस्से में, मैं प्रोजेक्ट की गहराई देखने के लिए जीथब पर गया, जिसके कारण इसका कांटा निकल गया और परिणामस्वरूप, एक पुल अनुरोध हुआ। यदि यह दिलचस्प न होता तो मैं इसके बारे में नहीं लिखता 😉

बेशक, स्रोतों की खोज करने से पहले, मैंने देखा कि क्रोम कॉन्फ़िगरेशन के साथ जेनरेट किए गए ज़िप संग्रह को कहां खींचता है, और वहां "ब्लॉब:" से शुरू होने वाला एक पता मेरा इंतजार कर रहा था, उफ़। यह पहले ही स्पष्ट हो चुका है कि सेवा रास्ते में कुछ भी उत्पन्न नहीं करती है, वास्तव में, यह सब js द्वारा किया जाता है। दरअसल, ज़िप आर्काइव क्लाइंट, ब्राउज़र और जावास्क्रिप्ट द्वारा ही तैयार किया जाता है। वे। खूबसूरती यह है कि परियोजना nginxconfig.io इसे केवल एक HTML पेज के रूप में सहेजा जा सकता है, कुछ पर अपलोड किया जा सकता है narad.ru और यह काम करेगा) यह एक बहुत ही मजेदार और दिलचस्प समाधान है, हालांकि, सर्वर स्थापित करने के लिए यह बहुत असुविधाजनक है, वास्तव में, यह प्रोजेक्ट किस लिए बनाया गया था। जेनरेट किए गए संग्रह को ब्राउज़र से डाउनलोड करें, और फिर इसे 2019 में nc... का उपयोग करके सर्वर पर स्थानांतरित करें? मैंने परिणामी कॉन्फ़िगरेशन को सीधे सर्वर पर डाउनलोड करने का तरीका खोजने का कार्य स्वयं निर्धारित किया है।
प्रोजेक्ट छोड़ने के बाद, मैंने सोचना शुरू किया कि मेरे पास क्या विकल्प हैं। कार्य इस तथ्य से जटिल था कि मैं इस शर्त से विचलित नहीं होना चाहता था कि परियोजना बिना किसी बैक-एंड के शुद्ध फ्रंट-एंड बनी रहनी चाहिए। बेशक, सबसे सरल समाधान नोडज को खींचना और सीधे लिंक का उपयोग करके कॉन्फ़िगरेशन के साथ एक संग्रह उत्पन्न करने के लिए मजबूर करना होगा।
दरअसल, ज्यादा विकल्प नहीं थे. अधिक सटीक रूप से, केवल एक ही बात दिमाग में आई। हमें कॉन्फ़िगरेशन सेट करने और एक लिंक प्राप्त करने की आवश्यकता है जिसे हम ज़िप संग्रह प्राप्त करने के लिए सर्वर कंसोल पर कॉपी कर सकते हैं।
परिणामी ज़िप संग्रह में कई टेक्स्ट फ़ाइलों का वजन काफी कम था, वस्तुतः कुछ किलोबाइट। स्पष्ट समाधान यह था कि उत्पन्न ज़िप संग्रह से बेस 64 स्ट्रिंग प्राप्त करें और इसे कंसोल में कमांड के साथ सर्वर पर बफर में फेंक दें

echo 'base64string' | base64 --decode > config.zip

हम यही ज़िप फ़ाइल बना सकते हैं.

nginxconfig.io AngularJS में लिखा गया था, मैं कल्पना भी नहीं कर सकता कि यदि लेखक ने प्रतिक्रियाशील js फ्रेमवर्क नहीं चुना होता तो कितने किलोमीटर कोड की आवश्यकता होती। लेकिन मैं पूरी तरह से कल्पना कर सकता हूं कि VueJS में यह सब कितना सरल और अधिक सुंदर तरीके से लागू किया जा सकता है, हालांकि यह एक पूरी तरह से अलग विषय है।
प्रोजेक्ट संसाधनों में हम ज़िप संग्रह बनाने की एक विधि देखते हैं:

$scope.downloadZip = function() {
	var zip = new JSZip();

	var sourceCodes = $window.document.querySelectorAll('main .file .code.source');

	for (var i = 0; i < sourceCodes.length; i++) {
		var sourceCode = sourceCodes[i];

		var name	= sourceCode.dataset.filename;
		var content	= sourceCode.children[0].children[0].innerText;

		if (!$scope.isSymlink() && name.match(/^sites-available//)) {
			name = name.replace(/^sites-available//, 'sites-enabled/');
		}

		zip.file(name, content);

		if (name.match(/^sites-available//)) {
			zip.file(name.replace(/^sites-available//, 'sites-enabled/'), '../' + name, {
				unixPermissions: parseInt('120755', 8),
			});
		}
	}

	zip.generateAsync({
		type: 'blob',
		platform: 'UNIX',
	}).then(function(content) {
		saveAs(content, 'nginxconfig.io-' + $scope.getDomains().join(',') + '.zip');
	});

	gtag('event', $scope.getDomains().join(','), {
		event_category: 'download_zip',
	});
};

लाइब्रेरी का उपयोग करके सब कुछ काफी सरल है jszip एक ज़िप बनाई जाती है जहां कॉन्फ़िगरेशन फ़ाइलें रखी जाती हैं। ज़िप संग्रह बनाने के बाद, जेएस इसे लाइब्रेरी का उपयोग करके ब्राउज़र में फ़ीड करता है फ़ाइलसेवर.जे.एस:

saveAs(content, 'nginxconfig.io-' + $scope.getDomains().join(',') + '.zip');

जहां सामग्री ज़िप संग्रह का परिणामी ब्लॉब ऑब्जेक्ट है।

ठीक है, मुझे बस इसके आगे एक और बटन जोड़ना था और जब मैंने उस पर क्लिक किया, तो मैं परिणामी ज़िप संग्रह को ब्राउज़र में सहेज नहीं पाऊंगा, लेकिन उससे बेस 64 कोड प्राप्त कर लूंगा। थोड़ा इधर-उधर भटकने के बाद, मुझे केवल एक डाउनलोडज़िप के बजाय 2 विधियाँ मिलीं:

$scope.downloadZip = function() {
	generateZip(function (content) {
		saveAs(content, 'nginxconfig.io-' + $scope.getDomains().join(',') + '.zip');
	});

	gtag('event', $scope.getDomains().join(','), {
		event_category: 'download_zip',
	});
};
$scope.downloadBase64 = function() {
	generateZip(function (content) {
		var reader = new FileReader();
		reader.readAsDataURL(content);
		reader.onloadend = function() {
			var base64 = reader.result.replace(/^data:.+;base64,/, '');
			// в переменной base64 как раз нужный мне zip архив в виде base64 строки
		}
	});

	gtag('event', $scope.getDomains().join(','), {
		event_category: 'download_base64',
	});
};

जैसा कि आपने देखा होगा, मैंने ज़िप संग्रह की पीढ़ी को निजी जेनरेटज़िप विधि में स्थानांतरित कर दिया, इत्यादि। यह AngularJS है, और लेखक स्वयं कॉलबैक पर कायम है और वादों के माध्यम से इसे लागू नहीं किया है। डाउनलोडज़िप ने अभी भी आउटपुट के रूप में सेवएज़ किया, जबकि डाउनलोडबेस64 ने कुछ अलग किया। हम एक FileReader ऑब्जेक्ट बनाते हैं जो html5 में हमारे पास आया है और पहले से ही काफी है उपलब्ध इस्तेमाल के लिए। जो एक समय में एक ब्लॉब से बेस64 स्ट्रिंग बना सकता है, या यूँ कहें कि यह एक DataURL स्ट्रिंग बना सकता है, लेकिन यह हमारे लिए इतना महत्वपूर्ण नहीं है, क्योंकि DataURL में वही मौजूद है जिसकी हमें आवश्यकता है। बिंगो, जब मैंने यह सब बफर में डालने की कोशिश की तो एक छोटी सी दिक्कत मेरा इंतजार कर रही थी। लेखक ने परियोजना में पुस्तकालय का उपयोग किया क्लिपबोर्डjs, जो आपको चयनित पाठ के आधार पर, फ़्लैश ऑब्जेक्ट के बिना क्लिपबोर्ड के साथ काम करने की अनुमति देता है। प्रारंभ में, मैंने अपने बेस64 को डिस्प्ले:कोई नहीं; वाले तत्व में रखने का निर्णय लिया, लेकिन इस मामले में मैं इसे क्लिपबोर्ड पर नहीं रख सका क्योंकि कोई अलगाव नहीं होता. इसलिए, इसके बजाय show:none; मैंने किया

position: absolute;
z-index: -1;
opacity: 0;

जिसने मुझे तत्व को दृश्य से छिपाने और वास्तव में पृष्ठ पर छोड़ने की अनुमति दी। वोइला, कार्य पूरा हो गया, जब मैंने अपने बटन पर क्लिक किया, तो बफर में इस तरह की एक लाइन रखी गई:

echo 'base64string' | base64 --decode > config.zip

जिसे मैंने बस सर्वर पर कंसोल में चिपकाया और तुरंत सभी कॉन्फ़िगरेशन के साथ एक ज़िप संग्रह प्राप्त किया।
और, निःसंदेह, मैंने लेखक को एक पुल अनुरोध भेजा, क्योंकि... परियोजना सक्रिय और जीवंत है, मैं लेखक से अपडेट देखना चाहूंगा और मेरा अपना बटन होगा) रुचि रखने वालों के लिए, यह यहां है मेरा कांटा परियोजना और स्वयं अनुरोध निवेदन करें, जहां आप देख सकते हैं कि मैंने क्या सुधारा/जोड़ा।
सबका विकास मंगलमय हो)

स्रोत: www.habr.com