Генерирање на конфигурации за nginx, историја на едно барање за повлекување

Поздрав, другари. Прекрасно на моите борбени сервери nginx работи од 2006 година и во текот на годините на неговата администрација имам акумулирано многу конфигурации и шаблони. Многу го пофалив nginx и некако испадна дека дури и почнав nginx hub на хабот, покажи се м/
Пријателите ме замолија да им поставам развојна фарма и наместо да им ги влечам моите специфични шаблони, се сетив на еден интересен проект nginxconfig.io, кој ги расфрла конфигурациите на полиците и подготвува сè за шифрирање, итн. Мислев, зошто да не? Сепак, ме налути фактот што nginxconfig ми нуди да ја преземам zip архивата во прелистувачот, без да ми дозволи да ја подигнам директно на серверот користејќи wget/fetch/curl. Какви глупости, зошто ми треба во прелистувачот, ми треба на серверот од конзолата. Лут, отидов во github за да ги видам храброста на проектот, што доведе до неговата вилушка и, како резултат на тоа, барање за повлекување. За што не би пишувал да не е интересно 😉

Се разбира, пред да копам во изворите, погледнав каде Chrome ја влече генерираната зип архива со конфигурации, а таму ме чекаше адресата што почнува со „blob:“, опа. Веќе стана јасно дека услугата не генерира ништо на патот, всушност, сето тоа го прави js. Навистина, зип архивата е генерирана од клиентот, прелистувачот и самиот javascript. Оние. убавината е во тоа што проектот nginxconfig.io може едноставно да се зачува како html страница, поставена на некои narod.ru и ќе работи) Ова е многу смешно и интересно решение, сепак, ужасно е незгодно за поставување сервери, всушност, токму за она што е создаден овој проект. Преземете ја генерираната архива со прелистувач, а потоа префрлете ја на серверот користејќи nc... во 2019 година? Си поставив задача да најдам начин да ја преземам добиената конфигурација директно на серверот.
Откако го завршив проектот, почнав да размислувам кои се моите опции. Задачата беше комплицирана од тоа што не сакав да отстапам од условот проектот да остане чист фронт-енд, без никаков бек-енд. Се разбира, наједноставното решение би било да се повлечат nodejs и да се принудат да генерира архива со конфигурации користејќи директни врски.
Всушност, немаше многу опции. Поточно, само еден ми падна на памет. Треба да ги поставиме конфигурациите и да добиеме врска што можеме да ја копираме на серверската конзола за да добиеме зип архива.
Неколку текстуални датотеки во добиената зип архива тежеа прилично малку, буквално неколку килобајти. Очигледното решение беше да се добие низата base64 од генерираната zip архива и да се фрли во баферот, додека на серверот со командата во конзолата

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

би можеле да ја креираме истата зип-датотека.

nginxconfig.io беше напишано во AngularJS, не можам ни да замислам колку километри код би биле потребни доколку авторот не избрал реактивна js рамка. Но, совршено можам да замислам колку поедноставно и поубаво сето ова би можело да се имплементира во VueJS, иако ова е сосема друга тема.
Во ресурсите на проектот гледаме метод за генерирање на zip архива:

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

сè е прилично едноставно, користејќи ја библиотеката jszip Се креира zip каде што се поставени конфигурациските датотеки. По креирањето на zip архивата, js ја доставува до прелистувачот користејќи ја библиотеката FileSaver.js:

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

каде што содржината е добиениот објект од цип архивата.

Ок, сè што требаше да направам е да додадам уште едно копче до него и кога ќе кликнам на него, нема да ја зачувам добиената поштенска архива во прелистувачот, туку да го земам кодот base64 од него. Откако малку се зафркавав, добив 2 методи, наместо само едно преземање Zip:

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

Како што можеби забележавте, ја префрлив генерацијата на самата зип архива на методот приватен generateZip итн. Ова е AngularJS, а самиот автор се држи до повиците и не го спроведе преку ветувања. downloadZip сепак направи saveAs како излез, додека downloadBase64 направи нешто малку поинаку. Ние креираме објект FileReader кој ни дојде во html5 и веќе е доста достапен за употреба. Која, во еден момент, може да направи низа base64 од blob, или подобро кажано, прави низа DataURL, но тоа не е толку важно за нас, бидејќи DataURL го содржи токму она што ни треба. Бинго, ме чекаше мала финта кога се обидов да го ставам сето ова во тампон. Авторот ја искористи библиотеката во проектот таблата со исечоци, што ви овозможува да работите со таблата со исечоци без блиц објекти, врз основа на избраниот текст. Првично, решив да го ставам мојот base64 во елемент со display:none;, но во овој случај не можев да го ставам на таблата со исечоци бидејќи не се случува разделување. Затоа, наместо приказ: нема; јас направив

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

што ми овозможи и да го сокријам елементот од поглед и всушност да го оставам на страницата. Voila, задачата беше завршена, кога кликнав на моето копче, во баферот беше ставена ваква линија:

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

што едноставно го залепив во конзолата на серверот и веднаш добив зип архива со сите конфигурации.
И, се разбира, испратив барање за повлекување до авторот, бидејќи ... проектот е активен и жив, би сакал да видам ажурирања од авторот и да имам свое копче) За заинтересираните, еве го мојата вилушка проектот и самиот тој барање за повлекување, каде што можете да видите што корегирав/додадов.
Среќен развој на сите)

Извор: www.habr.com