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

Поздрави, другари. Красиво на моите бойни сървъри Nginx работи от 2006 г. и през годините на неговото администриране съм натрупал много конфигурации и темплейти. Много хвалех nginx и някак си се оказа, че дори пуснах nginx хъб и на хъба, покажи се м/
Приятели ме помолиха да създам ферма за разработка за тях и вместо да им влача моите конкретни шаблони, си спомних интересен проект nginxconfig.io, който разпръсква конфигурациите по рафтовете и подготвя всичко за lets encrypt и т.н. Помислих си защо не? Бях вбесен обаче от факта, че nginxconfig ми предлага да изтегля zip архива в браузъра, без да ми позволява да го кача директно на сървъра с помощта на wget/fetch/curl. Що за глупости, защо ми трябва в браузъра, трябва ми на сървъра от конзолата. Ядосан, отидох в github, за да видя вътрешностите на проекта, което доведе до разклонението му и в резултат на това до заявка за изтегляне. За което нямаше да пиша, ако не беше интересно 😉

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

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

бихме могли да създадем същия този 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');

където съдържанието е полученият блоб обект на zip архива.

Добре, всичко, което трябваше да направя, беше да добавя друг бутон до него и когато щракна върху него, нямаше да запазя получения 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',
	});
};

Както може би сте забелязали, преместих генерирането на самия zip архив към метода private generateZip и т.н. Това е AngularJS и самият автор се придържа към обратните извиквания и не го е внедрил чрез обещания. downloadZip все още направи saveAs като изход, докато downloadBase64 направи нещо малко по-различно. Създаваме обект FileReader, който дойде при нас в html5 и вече е доста на разположение за използване. Което в един момент може да направи base64 низ от blob, или по-скоро прави DataURL низ, но това не е толкова важно за нас, т.к. DataURL съдържа точно това, от което се нуждаем. Бинго, малко ме чакаше, когато се опитах да сложа всичко това в буфера. Авторът използва библиотеката в проекта клипбордjs, което ви позволява да работите с клипборда без флаш обекти, въз основа на избрания текст. Първоначално реших да поставя своя base64 в елемент с display:none;, но в този случай не можах да го поставя в клипборда, защото не настъпва раздяла. Следователно, вместо display:none; направих

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

което ми позволи едновременно да скрия елемента от изглед и всъщност да го оставя на страницата. Воала, задачата беше изпълнена, когато щракнах върху моя бутон, в буфера беше поставен ред като този:

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

който просто поставих в конзолата на сървъра и веднага получих zip архив с всички конфигурации.
И, разбира се, изпратих заявка за изтегляне на автора, защото... проектът е активен и оживен, бих искал да виждам актуализации от автора и да имам собствен бутон) За тези, които се интересуват, ето го моята вилица проект и себе си pull request, където можете да видите какво коригирах/добавих.
Честито развитие на всички)

Източник: www.habr.com