nginx को लागि कन्फिगहरू को उत्पादन, एक पुल अनुरोध को इतिहास

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

अवश्य पनि, स्रोतहरूमा खन्ने अघि, मैले क्रोमले कन्फिगहरूका साथ उत्पन्न जिप संग्रहलाई कहाँ तान्दछ, र त्यहाँ "ब्लब:" बाट सुरु हुने ठेगाना मेरो लागि पर्खिरहेको थियो, उफ्। यो पहिले नै स्पष्ट भएको छ कि सेवाले बाटोमा केहि उत्पन्न गर्दैन, वास्तवमा, यो सबै js द्वारा गरिएको छ। वास्तवमा, zip अभिलेख ग्राहक, ब्राउजर, र जाभास्क्रिप्ट आफैले उत्पन्न गरेको छ। ती। सुन्दरता यो परियोजना हो nginxconfig.io केवल html पृष्ठको रूपमा बचत गर्न सकिन्छ, केहिमा अपलोड narod.ru र यसले काम गर्नेछ) यो एक धेरै हास्यास्पद र चाखलाग्दो समाधान हो, तथापि, सर्भरहरू सेटअप गर्नको लागि यो अत्यन्तै असुविधाजनक छ, वास्तवमा, वास्तवमा यो परियोजना सिर्जना गरिएको थियो। ब्राउजरको साथ उत्पन्न अभिलेख डाउनलोड गर्नुहोस्, र त्यसपछि 2019 मा nc प्रयोग गरेर सर्भरमा स्थानान्तरण गर्नुहोस्? मैले नतिजा कन्फिगरेसन सिधै सर्भरमा डाउनलोड गर्ने तरिका खोज्ने काम आफैलाई सेट गरें।
प्रोजेक्ट फोर्क गरेपछि, मैले मेरा विकल्पहरू के हुन् भनेर सोच्न थालें। कुनै पनि ब्याक-एन्ड बिना परियोजना शुद्ध फ्रन्ट-एन्ड रहनुपर्छ भन्ने शर्तबाट म विचलित हुन चाहन्नँ भन्ने तथ्यले गर्दा काम जटिल थियो। निस्सन्देह, सरल समाधान भनेको नोडजहरू तान्नु र यसलाई प्रत्यक्ष लिङ्कहरू प्रयोग गरेर कन्फिगरेसनहरूसँग सङ्ग्रह उत्पन्न गर्न बाध्य पार्नु हो।
वास्तवमा, त्यहाँ धेरै विकल्पहरू थिएनन्। अझ स्पष्ट रूपमा, केवल एक दिमागमा आयो। हामीले कन्फिगहरू सेट अप गर्न र zip संग्रह प्राप्त गर्न सर्भर कन्सोलमा प्रतिलिपि गर्न सक्ने लिङ्क प्राप्त गर्न आवश्यक छ।
परिणामस्वरूप zip अभिलेखमा धेरै पाठ फाइलहरू एकदम थोरै, शाब्दिक रूपमा केही किलोबाइट तौलिए। स्पष्ट समाधान उत्पन्न गरिएको zip संग्रहबाट base64 स्ट्रिङ प्राप्त गर्न र यसलाई बफरमा फ्याँक्नु थियो, सर्भरमा कन्सोलमा आदेशको साथमा।

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

हामी यो समान zip फाइल बनाउन सक्छौं।

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

$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 एउटा जिप सिर्जना गरिएको छ जहाँ कन्फिगरेसन फाइलहरू राखिएको छ। zip संग्रह सिर्जना गरेपछि, js ले लाइब्रेरी प्रयोग गरेर ब्राउजरमा फिड गर्दछ FileSaver.js:

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

जहाँ सामग्री zip अभिलेखको परिणामस्वरूप ब्लब वस्तु हो।

ठीक छ, मैले त्यसको छेउमा अर्को बटन थप्नु पर्ने थियो र जब मैले यसमा क्लिक गरें, मैले नतिजाको जिप संग्रह ब्राउजरमा बचत गर्ने छैन, तर यसबाट बेस64 कोड प्राप्त गर्ने थिएँ। अलिकति फिल्डिङ गरिसकेपछि, मैले एउटा डाउनलोड जिपको सट्टामा २ वटा विधि पाएँ:

$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',
	});
};

तपाईंले याद गर्नुभएको हुनसक्छ, मैले zip अभिलेखको पुस्तालाई निजी generateZip विधिमा सारियो, र यस्तै। यो AngularJS हो, र लेखक आफैं कलब्याकहरूमा टाँसिन्छन् र यसलाई वाचाहरू मार्फत कार्यान्वयन गर्दैनन्। downloadZip ले अझै पनि आउटपुटको रूपमा saveAs गर्यो, जबकि downloadBase64 ले केहि फरक गर्यो। हामीले एउटा FileReader वस्तु सिर्जना गर्छौं जुन हामीलाई html5 मा आयो र पहिले नै पर्याप्त छ सुलभ प्रयोगको लागि। जुन, एक समयमा, ब्लबबाट बेस64 स्ट्रिङ बनाउन सक्छ, वा बरु, यसले DataURL स्ट्रिङ बनाउँछ, तर यो हाम्रो लागि त्यति महत्त्वपूर्ण छैन, किनभने DataURL ले हामीलाई चाहिने कुरा समावेश गर्दछ। बिंगो, मैले यो सबै बफरमा राख्ने प्रयास गर्दा एउटा सानो स्न्यागले मलाई पर्खिरहेको थियो। लेखकले यस परियोजनामा ​​पुस्तकालय प्रयोग गर्नुभयो clipboardjs, जसले तपाइँलाई चयन गरिएको पाठमा आधारित फ्ल्यास वस्तुहरू बिना क्लिपबोर्डसँग काम गर्न अनुमति दिन्छ। सुरुमा, मैले मेरो base64 लाई डिस्प्ले: कुनै पनि तत्वमा राख्ने निर्णय गरें, तर यस अवस्थामा मैले यसलाई क्लिपबोर्डमा राख्न सकिन किनभने कुनै पृथक्करण हुँदैन। त्यसकारण, प्रदर्शनको सट्टा: कुनै पनि छैन; मैले गरेँ

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

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

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

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

स्रोत: www.habr.com