🥇Generatioun vu Konfiguratiounen fir nginx, d'Geschicht vun enger Pull Ufro

Gréiss, Komeroden. Schéin op menger Kampfserver nginx leeft zënter 2006 an iwwer d'Jore vu senger Administratioun hunn ech vill Konfiguratiounen a Template gesammelt. Ech hunn den nginx vill gelueft an iergendwéi huet et sech erausgestallt datt ech och en nginx hub um hub ugefaang hunn, weisen m/
D'Frënn hunn mech gefrot fir en Entwécklungsbauerenhaff fir si opzestellen, an amplaz se meng spezifesch Templates ze zéien, hunn ech mech un en interessante Projet erënnert. nginxconfig.io, déi Konfiguratiounen op de Regaler verdeelt an alles virbereet fir d'Verschlësselung etc. Ech hu geduecht, firwat net? Wéi och ëmmer, ech war rosen vun der Tatsaach datt nginxconfig mir bitt den Zip-Archiv an de Browser erofzelueden, ouni datt ech et direkt op de Server eropluede mat wget/fetch/curl. Wat Blödsinn, firwat brauch ech et am Browser, Ech brauch et op de Server vun der Konsol. Angry, ech sinn op Github gaang fir d'Darm vum Projet ze gesinn, wat zu senger Gabel gefouert huet an als Resultat eng Pull-Ufro. Wat ech net géif schreiwen wann et net interessant wier 😉

Natierlech, ier ech an d'Quellen gegruewen hunn, hunn ech gekuckt wou Chrome de generéierten Zip-Archiv mat Konfiguratiounen zitt, an do waart eng Adress, déi mat "blob:" fänkt, op mech, ops. Et ass scho kloer ginn datt de Service näischt laanscht de Wee generéiert, tatsächlech gëtt alles vum js gemaach. Tatsächlech gëtt den Zip-Archiv vum Client, de Browser a Javascript selwer generéiert. Déi. der Schéinheet ass, datt de Projet nginxconfig.io kann einfach als HTML Säit gespäichert ginn, op e puer eropgelueden narod.ru an et wäert funktionnéieren) Dëst ass eng ganz witzeg an interessant Léisung, awer et ass schrecklech onbequem fir Serveren opzestellen, tatsächlech, genau fir wat dëse Projet erstallt gouf. Luet de generéierten Archiv mat engem Browser erof, an iwwerdroe se dann op de Server mat nc ... am Joer 2019? Ech hunn mir d'Aufgab gesat fir e Wee ze fannen fir déi resultéierend Konfiguratioun direkt op de Server erofzelueden.
Nodeems ech de Projet forcéiert hunn, hunn ech ugefaang ze denken wat meng Optiounen waren. D'Aufgab war komplizéiert doduerch, datt ech net vun der Bedingung ofwäiche wollt, datt de Projet e pure Frontend bleift, ouni Backend. Natierlech wier déi einfachst Léisung d'Nodejs opzezéien an ze zwéngen fir en Archiv mat Konfiguratiounen ze generéieren mat direkte Linken.
Eigentlech waren et net vill Méiglechkeeten. Méi präzis koum nëmmen een an de Kapp. Mir mussen d'Konfiguratioun opsetzen an e Link kréien, dee mir op d'Serverkonsole kopéiere kënnen fir en Zip-Archiv ze kréien.
Verschidde Textdateien am resultéierende Zip-Archiv hunn zimmlech e bësse gewien, wuertwiertlech e puer Kilobytes. Déi offensichtlech Léisung war d'Base64 String aus dem generéierten Zip-Archiv ze kréien an en an de Puffer ze werfen, wärend um Server mam Kommando an der Konsole

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

mir kéinten déi selwecht Zip-Datei erstellen.

nginxconfig.io gouf an AngularJS geschriwwen, ech ka mir net emol virstellen wat Kilometer vum Code erfuerderlech wier wann den Auteur net e reaktive js Kader gewielt hätt. Mee ech ka mir perfekt virstellen wéi vill méi einfach a méi schéin dat alles an VueJS ëmgesat ka ginn, obwuel dëst e ganz anert Thema ass.
An de Projet Ressourcen gesi mir eng Method fir en Zip-Archiv ze generéieren:

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

alles ass ganz einfach, mat der Bibliothéik jszip en Zip gëtt erstallt wou d'Konfiguratiounsdateien plazéiert sinn. Nodeems Dir den Zip-Archiv erstallt huet, fiddert js et an de Browser mat der Bibliothéik FileSaver.js:

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

wou Inhalt de resultéierende Blobobjekt vum Zip-Archiv ass.

Ok, alles wat ech maache muss war en anere Knäppchen niewendrun derbäi a wann ech drop geklickt hunn, géif ech dat resultéierend Zip-Archiv net an de Browser späicheren, awer de Base64 Code dovunner kréien. Nodeems ech e bëssen ëmgedréint hunn, krut ech 2 Methoden, amplaz nëmmen een 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',
	});
};

Wéi Dir vläicht gemierkt hutt, hunn ech d'Generatioun vum Zip-Archiv selwer op d'private GenerateZip Method geplënnert, a sou weider. Dëst ass AngularJS, an den Auteur selwer hält sech un Callbacks an huet et net duerch Verspriechen ëmgesat. downloadZip huet nach ëmmer SaveAs als Ausgang gemaach, wärend den DownloadBase64 eppes liicht anescht gemaach huet. Mir erstellen e FileReader Objet deen eis an html5 komm ass a scho ganz ass zougänglech fir benotzen. Wat gläichzäiteg e Base64 String aus engem Blob ka maachen, oder éischter, et mécht en DataURL String, awer dëst ass net sou wichteg fir eis, well DataURL enthält genau dat wat mir brauchen. Bingo, e klenge Schnëtt waart op mech wéi ech probéiert hunn dat alles an de Puffer ze setzen. Den Auteur huet d'Bibliothéik am Projet benotzt clipboardjs, wat Iech erlaabt mat der Clipboard ouni Flashobjekter ze schaffen, baséiert op dem gewielten Text. Am Ufank hunn ech decidéiert meng base64 an en Element mat Display:none; ze setzen, awer an dësem Fall konnt ech et net op de Clipboard setzen, well keng Trennung geschitt. Dofir, amplaz Display:none; Ech hu gemaach

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

wat mir erlaabt huet souwuel d'Element aus der Siicht ze verstoppen an et tatsächlech op der Säit ze loossen. Voila, d'Aufgab war ofgeschloss, wéi ech op mäi Knäppchen geklickt hunn, gouf eng Zeil wéi dës an de Puffer gesat:

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

déi ech einfach an d'Konsole um Server gepecht hunn an direkt en Zip-Archiv mat all de Configuratioune krut.
An natierlech hunn ech den Auteur eng Pull-Ufro geschéckt, well ... de Projet ass aktiv a lieweg, ech géif gären Updates vum Auteur gesinn an hunn en eegene Knäppchen) Fir déi interesséiert, hei ass et meng Gabel Projet a selwer zéien Ufro, wou Dir kënnt gesinn wat ech korrigéiert / dobäigesat hunn.
Glécklech Entwécklung jiddereen)

Source: will.com

Generatioun vu Konfiguratiounen fir nginx, Geschicht vun enger Pull Ufro

Setzt e Commentaire annuléieren reply