Pagmugna sa mga config para sa nginx, kasaysayan sa usa ka hangyo sa pagbitad

Kumusta, mga kauban. Nindot sa akong combat servers nginx Nagdagan na sukad pa sa 2006 ug sa mga katuigan sa pagdumala niini daghan kog natigom nga mga config ug templates. Gidayeg ko pag-ayo ang nginx ug sa usa ka paagi nahimo nga nagsugod pa ako usa ka hub sa nginx sa hub, usab, ipakita ang m/
Gihangyo ako sa mga higala nga magtukod usa ka umahan sa pag-uswag alang kanila, ug imbis nga i-drag sila sa akong piho nga mga template, nahinumduman nako ang usa ka makapaikag nga proyekto. nginxconfig.io, nga nagsabwag sa mga config sa mga estante ug nag-andam sa tanan alang sa lets encrypt, etc. Naghunahuna ko, nganong dili? Bisan pa, nasuko ako sa kamatuoran nga ang nginxconfig nagtanyag kanako nga i-download ang zip archive sa browser, nga wala ako gitugotan nga i-upload kini direkta sa server gamit ang wget/fetch/curl. Unsa ang kabuang, nganong kinahanglan nako kini sa browser, kinahanglan nako kini sa server gikan sa console. Nasuko, miadto ko sa github aron tan-awon ang guts sa proyekto, nga misangpot sa tinidor niini ug, isip resulta, usa ka hangyo sa pagbitad. Nga dili nako isulat kung dili kini makapaikag 😉

Siyempre, sa wala pa magkalot sa mga tinubdan, akong gitan-aw kung diin gibira sa Chrome ang namugna nga zip archive nga adunay mga config, ug adunay usa ka adres nga nagsugod sa "blob:" naghulat kanako, oops. Nahimo na nga tin-aw nga ang serbisyo wala makamugna bisan unsa sa dalan, sa tinuud, kini tanan gihimo sa js. Sa tinuud, ang zip archive gihimo sa kliyente, browser, ug javascript mismo. Mga. ang kanindot kay ang project nginxconfig.io pwede ra ma-save isip html page, i-upload sa uban narod.ru ug kini molihok) Kini usa ka kataw-anan ug makapaikag nga solusyon, bisan pa, kini dili kaayo kombenyente alang sa pag-set up sa mga server, sa tinuud, eksakto kung unsa kini nga proyekto gibuhat. I-download ang namugna nga archive gamit ang browser, ug dayon ibalhin kini sa server gamit ang nc... sa 2019? Gibutang nako ang akong kaugalingon sa tahas sa pagpangita og paagi aron ma-download ang resulta nga config direkta sa server.
Pagkahuman sa pag-forking sa proyekto, nagsugod ako sa paghunahuna kung unsa ang akong mga kapilian. Ang buluhaton komplikado tungod sa kamatuoran nga dili ko gusto nga motipas gikan sa kondisyon nga ang proyekto kinahanglan magpabilin nga usa ka lunsay nga front-end, nga walay bisan unsang back-end. Siyempre, ang pinakasimple nga solusyon mao ang pagbitad sa mga nodej ug pugson kini sa paghimo og archive nga adunay mga config gamit ang direktang mga link.
Sa tinuud, wala’y daghang kapilian. Sa mas tukma, usa ra ang nahunahunaan. Kinahanglan namon nga i-set up ang mga config ug makakuha usa ka link nga mahimo namon kopyahon sa console sa server aron makakuha usa ka archive sa zip.
Pipila ka mga text file sa resulta nga zip archive medyo mitimbang, literal nga pipila ka kilobytes. Ang klaro nga solusyon mao ang pagkuha sa base64 string gikan sa namugna nga zip archive ug ihulog kini sa buffer, samtang sa server nga adunay command sa console

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

mahimo namon kini nga parehas nga zip file.

nginxconfig.io gisulat sa AngularJS, dili nako mahunahuna kung unsa nga mga kilometro sa code ang gikinahanglan kung ang tagsulat wala magpili usa ka reaktibo nga js nga balangkas. Apan hingpit nakong mahanduraw kon unsa ka mas simple ug mas nindot kining tanan nga mapatuman sa VueJS, bisan tuod kini usa ka hingpit nga lahi nga hilisgutan.
Sa mga kapanguhaan sa proyekto atong makita ang usa ka pamaagi sa paghimo og zip archive:

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

ang tanan yano ra, gamit ang librarya jszip Gibuhat ang usa ka zip diin gibutang ang mga file sa pag-configure. Pagkahuman sa paghimo sa zip archive, gipakaon kini ni js sa browser gamit ang librarya FileSaver.js:

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

diin ang sulod mao ang resulta nga blob nga butang sa zip archive.

Ok, ang kinahanglan nakong buhaton mao ang pagdugang og laing buton sunod niini ug sa dihang akong gi-klik kini, dili nako i-save ang resulta nga zip archive sa browser, apan kuhaa ang base64 code gikan niini. Pagkahuman sa gamay nga paglitok, nakakuha ako 2 nga mga pamaagi, imbis usa ra nga pag-downloadZip:

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

Sama sa imong namatikdan, akong gibalhin ang henerasyon sa zip archive mismo sa pribadong pamaagi sa generateZip, ug uban pa. Kini ang AngularJS, ug ang tagsulat mismo nagpabilin sa mga callback ug wala kini gipatuman pinaagi sa mga saad. Ang downloadZip nakahimo gihapon sa saveAs isip usa ka output, samtang ang downloadBase64 nakahimo og gamay nga kalainan. Naghimo kami usa ka butang nga FileReader nga miabot kanamo sa html5 ug naa na maabut para gamiton. Nga, sa usa ka higayon, makahimo sa usa ka base64 string gikan sa usa ka blob, o hinoon, kini naghimo sa usa ka DataURL string, apan kini dili kaayo importante alang kanato, tungod kay Ang DataURL naglangkob sa eksakto kung unsa ang among gikinahanglan. Bingo, usa ka gamay nga snag naghulat kanako sa dihang gisulayan nako nga ibutang kining tanan sa buffer. Gigamit sa tagsulat ang librarya sa proyekto clipboardjs, nga nagtugot kanimo sa pagtrabaho uban sa clipboard nga walay flash nga mga butang, base sa pinili nga teksto. Sa sinugdanan, nakahukom ko nga ibutang ang akong base64 sa usa ka elemento nga adunay display: none;, apan sa kini nga kaso dili nako kini ibutang sa clipboard tungod kay walay panagbulag mahitabo. Busa, imbes nga ipakita:wala; akong gibuhat

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

nga nagtugot kanako sa pagtago sa elemento gikan sa pagtan-aw ug sa tinuod ibilin kini sa panid. Voila, nahuman ang buluhaton, sa dihang gi-klik nako ang akong buton, usa ka linya nga sama niini ang gibutang sa buffer:

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

nga akong gi-paste lang sa console sa server ug nakadawat dayon og zip archive uban sa tanang configs.
Ug, siyempre, nagpadala ko og pull request sa tagsulat, tungod kay... aktibo ug buhi ang proyekto, gusto nako nga makita ang mga update gikan sa tagsulat ug adunay akong kaugalingon nga buton) Alang sa mga interesado, ania kini akong tinidor project ug akong kaugalingon paghangyo hangyo, diin makita nimo kung unsa ang akong gitul-id/gidugang.
Happy development sa tanan)

Source: www.habr.com