Generasie van konfigurasies vir nginx, geskiedenis van een trekversoek

Groete, kamerade. Pragtig op my gevegsbedieners nginx loop al sedert 2006 en oor die jare van sy administrasie het ek baie konfigurasies en sjablone opgehoop. Ek het nginx baie geprys en op een of ander manier het dit geblyk dat ek selfs 'n nginx-hub op die hub begin het, pronk m/
Vriende het my gevra om 'n ontwikkelingsplaas vir hulle op te rig, en in plaas daarvan om vir hulle my spesifieke sjablone te sleep, het ek 'n interessante projek onthou nginxconfig.io, wat konfigurasies op die rakke verstrooi en alles voorberei vir laat enkripteer, ens. Ek het gedink, hoekom nie? Ek was egter woedend oor die feit dat nginxconfig my bied om die zip-argief in die blaaier af te laai, sonder om my toe te laat om dit direk na die bediener op te laai deur wget/fetch/curl te gebruik. Watse nonsens, hoekom het ek dit in die blaaier nodig, ek het dit op die bediener van die konsole nodig. Ek het kwaad, ek het na github gegaan om die ingewande van die projek te sien, wat gelei het tot sy vurk en gevolglik 'n trekversoek. Waaroor ek nie sou skryf as dit nie interessant was nie 😉

Natuurlik, voordat ek in die bronne gegrawe het, het ek gekyk na waar Chrome die gegenereerde zip-argief met configs trek, en daar het 'n adres wat begin met "blob:" vir my gewag, oops. Dit het reeds duidelik geword dat die diens niks op die pad genereer nie, eintlik word dit alles deur js gedoen. Die zip-argief word inderdaad deur die kliënt, blaaier en javascript self gegenereer. Dié. die skoonheid is dat die projek nginxconfig.io kan eenvoudig gestoor word as 'n HTML-bladsy, na sommige opgelaai narod.ru en dit sal werk) Dit is 'n baie snaakse en interessante oplossing, maar dit is verskriklik ongerieflik om bedieners op te stel, in werklikheid presies vir wat hierdie projek geskep is. Laai die gegenereerde argief af met 'n blaaier, en dra dit dan oor na die bediener met behulp van nc... in 2019? Ek het myself die taak gestel om 'n manier te vind om die gevolglike konfigurasie direk na die bediener af te laai.
Nadat ek die projek gevurk het, het ek begin dink oor wat my opsies was. Die taak is bemoeilik deur die feit dat ek nie wou afwyk van die voorwaarde dat die projek 'n suiwer voorkant, sonder enige agterkant, moes bly nie. Natuurlik sal die eenvoudigste oplossing wees om nodejs op te trek en dit te dwing om 'n argief te genereer met konfigurasies deur direkte skakels te gebruik.
Eintlik was daar nie baie opsies nie. Meer presies, net een het by my opgekom. Ons moet die konfigurasies opstel en 'n skakel kry wat ons na die bedienerkonsole kan kopieer om 'n zip-argief te kry.
Verskeie tekslêers in die resulterende zip-argief het nogal 'n bietjie geweeg, letterlik 'n paar kilogrepe. Die voor die hand liggende oplossing was om die base64-string uit die gegenereerde zip-argief te kry en dit in die buffer te gooi terwyl dit op die bediener is met die opdrag in die konsole

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

ons kan dieselfde zip-lêer skep.

nginxconfig.io in AngularJS geskryf is, kan ek nie eers dink watter kilometers se kode nodig sou wees as die skrywer nie 'n reaktiewe js-raamwerk gekies het nie. Maar ek kan my perfek voorstel hoeveel eenvoudiger en mooier dit alles in VueJS geïmplementeer kan word, hoewel dit 'n heeltemal ander onderwerp is.
In die projekbronne sien ons 'n metode om 'n zip-argief te genereer:

$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 is redelik eenvoudig, met behulp van die biblioteek jszip 'n zip word geskep waar die konfigurasielêers geplaas word. Nadat die zip-argief geskep is, voer js dit na die blaaier met behulp van die biblioteek FileSaver.js:

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

waar inhoud die gevolglike blob-voorwerp van die zip-argief is.

Ok, al wat ek moes doen was om nog 'n knoppie langsaan by te voeg en wanneer ek daarop klik, sou ek nie die resulterende zip-argief in die blaaier stoor nie, maar die base64-kode daaruit kry. Nadat ek 'n bietjie rondgevroetel het, het ek 2 metodes gekry, in plaas van net 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',
	});
};

Soos u dalk opgemerk het, het ek die generasie van die zip-argief self na die private genereerZip-metode geskuif, ensovoorts. Dit is AngularJS, en die skrywer self hou by terugbelopings en het dit nie deur beloftes geïmplementeer nie. downloadZip het steeds saveAs as 'n uitvoer gedoen, terwyl downloadBase64 iets effens anders gedoen het. Ons skep 'n FileReader-voorwerp wat in html5 na ons toe gekom het en reeds redelik is toeganklike vir gebruik. Wat op een slag 'n base64-string van 'n blob kan maak, of liewer, dit maak 'n DataURL-string, maar dit is nie so belangrik vir ons nie, want DataURL bevat presies wat ons nodig het. Bingo, 'n klein haakplek het op my gewag toe ek dit alles in die buffer probeer plaas het. Die skrywer het die biblioteek in die projek gebruik knipbordjs, wat jou toelaat om met die knipbord te werk sonder flitsvoorwerpe, gebaseer op die geselekteerde teks. Ek het aanvanklik besluit om my base64 in 'n element met display:none; te plaas, maar in hierdie geval kon ek dit nie op die knipbord plaas nie, want geen skeiding vind plaas nie. Daarom, in plaas van vertoon:geen; ek het

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

wat my in staat gestel het om die element te versteek en dit eintlik op die bladsy te laat. Voila, die taak is voltooi, toe ek op my knoppie klik, is 'n reël soos hierdie in die buffer geplaas:

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

wat ek eenvoudig in die konsole op die bediener geplak het en dadelik 'n zip-argief met al die configs ontvang het.
En natuurlik het ek 'n trekversoek aan die skrywer gestuur, want... die projek is aktief en lewendig, ek wil graag opdaterings van die skrywer sien en my eie knoppie hê) Vir diegene wat belangstel, hier is dit my vurk projek en myself trekversoek, waar jy kan sien wat ek reggestel/bygevoeg het.
Gelukkige ontwikkeling almal)

Bron: will.com