Nginx үшін конфигурацияларды жасау, бір тарту сұрауының тарихы

Сәлеметсіздер ме, жолдастар. Менің жауынгерлік серверлерімде әдемі nginx 2006 жылдан бері жұмыс істеп келеді және оны басқару жылдарында мен көптеген конфигурациялар мен шаблондарды жинадым. Мен nginx-ті көп мақтадым, әйтеуір мен хабта nginx хабын да бастағаным белгілі болды.
Достарым маған олар үшін даму фермасын құруды өтінді, мен оларға өз үлгілерімді сүйреп апарудың орнына қызықты жоба есіме түсті. nginxconfig.io, ол сөрелерде конфигурацияларды шашыратады және бәрін шифрлауға мүмкіндік береді және т.б. Мен ойладым, неге жоқ? Дегенмен, nginxconfig маған wget/fetch/curl арқылы серверге тікелей жүктеп салуға мүмкіндік бермей, браузерге zip мұрағатын жүктеп алуды ұсынатыны мені ашуландырды. Не деген ақымақтық, ол маған браузерде не үшін керек, консольден серверде керек. Ашуланып, мен github-қа бардым, бұл жобаның ашылуына және нәтижесінде тарту сұрауына әкелді. Ол туралы қызық болмаса жазбас едім😉

Әрине, дереккөздерді зерттемес бұрын, мен Chrome құрастырылған zip мұрағатын конфигурациялармен қай жерде шығаратынын қарадым, сонда мені «blob:» деп басталатын мекенжай күтіп тұрды, ау. Қызмет жол бойында ештеңе жасамайтыны белгілі болды, іс жүзінде мұның бәрін JS жасайды. Шынында да, zip мұрағатын клиент, браузер және JavaScript өзі жасайды. Анау. сұлулық сол жоба nginxconfig.io жай ғана html беті ретінде сақтауға болады, кейбіреулеріне жүктеледі narod.ru және ол жұмыс істейді) Бұл өте күлкілі және қызықты шешім, дегенмен серверлерді орнату үшін өте ыңғайсыз, шын мәнінде, дәл осы жоба жасалған үшін. Жасалған мұрағатты браузер арқылы жүктеп алып, 2019 жылы nc... арқылы серверге тасымалдайсыз ба? Мен өзіме алынған конфигурацияны тікелей серверге жүктеп алудың жолын табу міндетін қойдым.
Жобаны аяқтағаннан кейін мен өзімнің нұсқаларым туралы ойлана бастадым. Тапсырманы қиындатып жібердім, себебі мен жобаның ешқандай артқы жағы жоқ, таза фронтальды болып қалуы керек деген шарттан ауытқығым келмеді. Әрине, ең қарапайым шешім түйіндерді шығарып, оны тікелей сілтемелерді пайдаланып конфигурациялары бар мұрағатты құруға мәжбүрлеу болады.
Шындығында, көптеген нұсқалар болған жоқ. Дәлірек айтсақ, есіме біреу ғана түсті. Біз конфигурацияларды орнатуымыз керек және zip мұрағатын алу үшін сервер консоліне көшіруге болатын сілтемені алуымыз керек.
Алынған zip мұрағатындағы бірнеше мәтіндік файлдардың салмағы біршама, сөзбе-сөз бірнеше килобайт болды. Анық шешім консольдегі пәрменмен серверде болған кезде жасалған zip мұрағатынан base64 жолын алу және оны буферге тастау болды.

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 мұрағатының нәтижелі blob нысаны болып табылады.

Жарайды, оның қасына тағы бір түймені қосу керек болды және оны басқан кезде мен алынған zip мұрағатын браузерге сақтамай, одан base64 кодын аламын. Біраз қозғалғаннан кейін мен бір downloadZip орнына 2 әдіс алдым:

$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 мұрағатының генерациясын жеке generZip әдісіне ауыстырдым және т.б. Бұл AngularJS және автордың өзі кері қоңырауларды ұстанады және оны уәделер арқылы жүзеге асырмады. downloadZip әлі де шығыс ретінде saveA жасады, ал downloadBase64 сәл басқаша әрекет жасады. Біз html5-те бізге келген FileReader нысанын жасаймыз және қазірдің өзінде бар қол жетімді пайдалану үшін. Ол бір уақытта блобтан base64 жолын жасай алады, дәлірек айтсақ, ол DataURL жолын жасайды, бірақ бұл біз үшін соншалықты маңызды емес, өйткені DataURL бізге қажет нәрсені қамтиды. Бинго, мұның барлығын буферге салуға тырысқанда, мені кішкене тосқауыл күтіп тұрды. Автор жобада кітапхананы пайдаланды clipboardjs, ол таңдалған мәтінге негізделген флэш-объектілерсіз алмасу буферімен жұмыс істеуге мүмкіндік береді. Бастапқыда мен base64-ті display:none; бар элементке қоюды шештім, бірақ бұл жағдайда оны алмасу буферіне қоя алмадым, өйткені бөліну болмайды. Сондықтан, орнына display:none; мен істедім

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

бұл элементті көріністен жасыруға және оны бетте қалдыруға мүмкіндік берді. Voila, тапсырма орындалды, мен түймені басқан кезде буферге келесідей жол орналастырылды:

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

Мен оны жай ғана сервердегі консольге қойдым және бірден барлық конфигурациялары бар zip мұрағатын алдым.
Және, әрине, мен авторға тарту сұрауын жібердім, өйткені... жоба белсенді және жанды, мен автордан жаңартуларды көргім келеді және өзімнің түймем бар) Қызығушылық танытқандар үшін бұл менің шанышқым жоба және өзі сұраныс сұрау, онда сіз менің түзеткенімді/қосқанымды көре аласыз.
Бақытты даму баршаңызға)

Ақпарат көзі: www.habr.com