Generering av konfigurationer för nginx, historien om en pull request

Välkomna, kamrater. På mina stridsservrar är det utmärkt nginx som har funnits sedan 2006 och under åren som jag har administrerat det har jag samlat många konfigurationer och mallar. Jag har ofta hyllat nginx och av någon anledning hade jag till och med startat en nginx-hub på Habré, gillar att skryta/
Mina vänner bad mig att sätta upp en utvecklingsfarm för dem och istället för att släpa med mig mina specifika mallar kom jag ihåg ett intressant projekt nginxconfig.io, som delar ut konfigurationer och förbereder allt för lets encrypt och så vidare. Så jag tänkte, varför inte? Men jag stördes av det faktum att nginxconfig ber mig att ladda ner en zip-arkiv i webbläsaren, utan att låta mig ladda ner det direkt på servern med wget/fetch/curl. Vad är det för dumhet, varför behöver jag det i webbläsaren, jag behöver det på servern från kommandoraden. Jag blev irriterad, så jag gick in på github för att kolla projektets inre, vilket ledde till en fork och därmed en pull request. Som jag inte skulle ha skrivit om det inte var intressant 😉

Självklart, innan jag började gräva i källkoden, kollade jag varifrån Chromium laddar ner det genererade zip-arkivet med konfigurationerna, och där väntade en adress som började med "blob:", oops. Det blev redan klart att tjänsten inte genererar något, för faktiskt gör js allt detta. Det är verkligen så att zip-arkivet genereras av klienten, webbläsaren, javascript. Så det fina med projektet nginxconfig.io kan helt enkelt sparas som en html-sida, laddas upp på någon narod.ru och det kommer att fungera ) Det är en mycket rolig och intressant lösning, men det är också helt opraktiskt för serverinställningar, just för det ändamål som detta projekt skapades. Att ladda ner det genererade arkivet via webbläsaren och sedan föra över det till servern med hjälp av nc… år 2019? Jag satte mig för att hitta ett sätt att ladda ner den erhållna konfigurationen direkt till servern.
Efter att ha gjort en fork av projektet började jag tänka på vilka alternativ jag har. Utmaningen blev svårare eftersom jag inte ville avvika från kravet att projektet skulle förbli en ren front-end, utan någon back-end. Självklart skulle den enklaste lösningen vara att dra in nodejs och få det att generera arkivet med konfigurationerna enligt direkta länkar.
Det fanns egentligen inte många alternativ. Snarare kom jag bara på en. Vi måste konfigurera konfigurationerna och få en länk som vi kan kopiera till serverns konsol för att få zip-arkivet.
Några textfiler i den mottagna zip-arkivet vägde väldigt lite, bokstavligen några kilobyte. En uppenbar lösning var att få en base64-sträng från den skapade zip-arkivet och klistra in den i urklippet, medan på servern utfördes en kommando i konsolen

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

vi skulle kunna skapa just den zip-filen.

nginxconfig.io skrevs med AngularJS, jag kan inte ens föreställa mig hur många kilometer kod som skulle behövas om författaren inte valt ett reaktivt js-ramverk. Men jag kan tydligt föreställa mig hur mycket enklare och vackrare detta skulle kunna implementeras med VueJS, även om det är ett helt annat ämne.
I projektets källkod ser vi metoden för att generera zip-arkivet:

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

det är ganska enkelt, med hjälp av biblioteket jszip skapas en zip där konfigurationsfiler placeras. Efter att zip-arkivet skapats, matar js det till webbläsaren med hjälp av biblioteket FileSaver.js:

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

där content är det erhållna blob-objektet för zip-arkivet.

Okej, allt jag behövde göra var att lägga till en knapp bredvid och när den trycktes skulle jag inte spara den mottagna zip-arkivet i webbläsaren, utan få base64-koden från den. Efter lite fixande fick jag 2 metoder istället för en: 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\/, '');
			// i variabeln base64 finns just det zip-arkivet som en base64-sträng
		}
	});

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

Som ni kanske har märkt har jag flyttat genereringen av själva zip-arkivet till en privat metod som heter generateZip, och eftersom det är AngularJS och författaren själv håller sig till callbacks, valde jag att inte implementera det genom promises. downloadZip gjorde fortfarande saveAs i utdata, medan downloadBase64 gjorde något lite annat. Vi skapar ett FileReader-objekt som kom till oss i html5 och som är ganska åtkomlig för användning. Detta objekt är, för sin tid, kapabelt att konvertera blob till en base64-sträng, mer exakt gör det en DataURL-sträng, men det är inte så viktigt för oss, eftersom DataURL innehåller precis det vi behöver. Bingo, en liten fälla väntade mig vid försöket att lägga allt detta i urklipp. Författaren använde biblioteken clipboardjs, vilket gör att man kan arbeta med urklipp utan flash-objekt, baserat på den markerade texten. I början beslutade jag mig för att lägga min base64 i ett element med display:none;, men i det fallet lyckades jag inte lägga det i urklipp, eftersom ingen markering sker. Så istället för display:none; gjorde jag

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

, vilket gjorde att jag kunde dölja elementet för ögonen men ändå behålla det på sidan. Voilà, uppgiften är slutförd, när jag tryckte på min knapp, placerades strängen i urklipp som såg ut så här:

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

som jag helt enkelt klistrade in i konsolen på servern och omedelbart fick zip-arkivet med alla konfigurationer.
Och självklart skickade jag en pull request till författaren, eftersom projektet är aktivt och levande, jag vill se uppdateringar från författaren och ha min knapp ) För den som är intresserad, här är min fork av projektet och självt pull request, där man kan se vad jag har åtgärdat/lagt till.
Önskar alla en produktiv utveckling )

Källa: habr.com