Nginx'i konfiguratsioonide genereerimine, ühe pull request'i ajalugu

Tere, sõbrad. Minu võitlussüsteemides on suurepärane nginx toimib alates 2006. aastast ja aastate jooksul olen kogunud palju seadistusi ja malle. Olen palju kiitnud nginxit ja kuidagi nii juhtus, et isegi nginx hubis harb'is asutasin ma, uhked m/
Sõbrad palusid mul luua neile arendaja farm ja selle asemel, et tuua neile oma spetsiifilised mallid, meenutasin ma huvitavat projekti nginxconfig.io, mis jagab seadeid riiulitele ja valmistab kõik ette lets encrypt'i jaoks jne. Ja mõtlesin, miks mitte? Kuid mind häiris see, et nginxconfig pakub mulle zip-aruande alla laadimist brauseris, lubamata seda otse serverisse laadida wgeti/fetchi/curliga. Mis see jumal küll on, miks see mulle brauseris, kui ma tahan seda serverisse konsoolist? Ükskord vihastasin ja läksin githubi, et uurida projekti sisemust, mis viis selle forkimiseks ja järgnevaks pull request'iks. Millest ma ei oleks kirjutanud, kui see ei oleks huvitav 😏

Loomulikult vaatasin enne allika muutma asumist, kust chrome tõmbab genereeritud zip-aruande seadistused, ja seal ootas mind aadress, mis algas „blob:”, oho. Juba sai selgeks, et teenus ei genereeri midagi, tegelikult teeb seda kogu asja js. Tõepoolest, zip-aruande genereerib klient ise, brauser, javascript. St. asi on selles, et projekt nginxconfig.io saab lihtsalt salvestada html-leheküljena, üles laadida mingile narod.ru ja see töötab ) See on väga naljakas ja huvitav lahendus, kuid see on kohutavalt ebamugav serverite seadistamiseks, just selle jaoks, milleks see projekt loodi. Genereeritud aruande allalaadimine brauseriga ja seejärel selle edastamine serverisse nc abil… 2019. aastal? Seadsin endale eesmärgi leida viis, kuidas saada saadud seadistus otse serverisse.
Projekti forkimisega alustasin ma mõtlema, millised on minu võimalused. Ülesanne muutus keeruliseks, kuna ma ei tahtnud devij minna, et projekt peab jääma puhtaks front-end'iks, ilma igasuguse back-end'ita. Loomulikult oleks kõige lihtsam lahendus nodejs sisse tõmmata ja sundida seda genereerima seadistuste arhiveeritud andmed otse linkidele.
Võimalusi ei olnud tegelikult palju. Täpsemalt tuli pähe vaid üks. Peame seadistama seadistused ja saama lingi, mille saame kopeerida serveri konsooli, et saada zip-aruande.
Mõned tekstifailid saadud zip-arhivis olid üsna väikesed, vaid mõned kilobait. Ilmselge lahendus oli genereeritud zip-arhivist saada base64 string ja see panna lõikelauale, samal ajal kui serveris konsoolis käsuga.

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

me oleksime saanud selle zip-faili luua.

nginxconfig.io oli kirjutatud AngularJS-i peale, ma ei kujuta ette, kui palju koodi oleks olnud vajalik, kui autor ei oleks valinud reaktiivset js raamistikku. Samas kujutan hästi ette, kui palju lihtsam ja ilusam oleks seda kõik ellu viia VueJS-i abil, kuigi see on juba hoopis teine teema.
Projektis näeme zip-arhivi genereerimise meetodit:

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

kõik on piisavalt lihtne, kasutades raamatukogu jszip luuakse zip, kuhu pannakse konfiguratsioonifailid. Pärast zip-arhivi loomist annab js selle brauserile raamatukogu FileSaver.js:

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

kus content on saadud blob objekt zip-arhivist.

Okei, kõik, mida ma pidin tegema, oli lisada veel üks nupp kõrval ja selle vajutamisel mitte salvestada saadud zip-arhivi brauserisse, vaid saada sellest base64 kood. Natuke katsetades sain 2 meetodit, mitte üht 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,/, '');
			// muutuja base64 sisaldab vajalikku zip-arhivi base64 stringina
		}
	});

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

Nagu olete juba märganud, on zip-arhiivi genereerimine viidud eraviisilisse meetodisse generateZip. Kuna see on AngularJS ja autor kaldub kasutama tagasisidet, ei rakendanud ma seda lubaduste kaudu. downloadZip jätkab saveAs kasutamist, samas kui downloadBase64 töötab pisut teisiti. Loome FileReader objekti, mis tuli meile html5 kaudu ja on täiesti saadav kasutamiseks. See suudab blobist genereerida base64 stringi, täpsemalt loob see DataURL stringi, kuid see ei ole meile nii oluline, kuna DataURL sisaldab täpselt seda, mida me vajame. Bingole, väike põngus ootas mind, kui proovisin seda kõike lõikelauale panna. Autor kasutas projektis teeki clipboardjs, mis võimaldab töötada lõikelauaga ilma Flash objektideta, põhinedes valitud tekstile. Alguses otsustasin panna oma base64 elemendi sisse, mille display on:none;, kuid sel juhul ei suutnud ma seda lõikepaberisse panna, kuna valikut ei toimunud. Seetõttu, display:none; asemel tegin ma

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

mis võimaldas mul elemendi silmade eest varjata ja tegelikult jätta see lehele. Voilà, ülesanne on täidetud, kui vajutasin oma nuppu, pandi lõikelauale string kujul:

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

mille lihtsalt kleepisin serveri konsooli ja sain kohe zip-arhiivi kõigi seadistustega.
Ja muidugi tegin ma autorile pull requesti, kuna projekt on aktiivne ja elav, soovin näha ka autori uuendusi ja omada oma nuppu. Kui kedagi huvitab, siis siin on minu fork projektist ja ise pull request, kus saab vaadata, mida ma parandas / täiendas.
Igal juhul head arendamist )

Allikas: habr.com