Nginx-ի կոնֆիգուրացիաների ստեղծում, մեկ ձգման հարցումի պատմություն

Ողջույններ, ընկերներ։ Գեղեցիկ իմ մարտական ​​սերվերների վրա nginx գործում է 2006 թվականից և դրա կառավարման տարիների ընթացքում ես կուտակել եմ բազմաթիվ կոնֆիգուրացիաներ և կաղապարներ: Ես շատ գովեցի nginx-ը և ինչ-որ կերպ պարզվեց, որ նույնիսկ hub-ի վրա nginx hub եմ սկսել, նույնպես, ցույց տուր մ/
Ընկերներն ինձ խնդրեցին ստեղծել զարգացման ֆերմա իրենց համար, և իմ կոնկրետ կաղապարները քաշելու փոխարեն, ես հիշեցի մի հետաքրքիր նախագիծ. nginxconfig.io, որը ցրում է կոնֆիգուրացիաները դարակների վրա և ամեն ինչ պատրաստում թույլտվությունների գաղտնագրման համար և այլն։ Մտածեցի՝ ինչո՞ւ ոչ։ Այնուամենայնիվ, ինձ զայրացրեց այն փաստը, որ nginxconfig-ն ինձ առաջարկում է ներբեռնել zip արխիվը բրաուզերի մեջ՝ թույլ չտալով այն վերբեռնել անմիջապես սերվերում՝ օգտագործելով wget/fetch/curl: Ինչ հիմարություն, ինչի՞ն է պետք բրաուզերում, կոնսոլից սերվերի վրա է պետք։ Զայրացած՝ ես գնացի github՝ տեսնելու նախագծի խորքը, որը հանգեցրեց դրա պատառաքաղին և արդյունքում՝ ձգման հարցում: Ինչի մասին չէի գրի, եթե հետաքրքիր չլիներ

Իհարկե, մինչ աղբյուրները փորփրելը, ես նայեցի, թե Chrome-ը որտեղ է քաշում ստեղծված zip-արխիվը կոնֆիգներով, և այնտեղ ինձ սպասում էր «blob:»-ով սկսվող հասցե, օպ: Արդեն պարզ է դարձել, որ ծառայությունը ճանապարհին ոչինչ չի առաջացնում, իրականում այդ ամենը կատարվում է js-ի կողմից։ Իրոք, zip արխիվը ստեղծվում է հաճախորդի, բրաուզերի և հենց javascript-ի կողմից: Նրանք. գեղեցկությունն այն է, որ նախագիծը nginxconfig.io կարող է պարզապես պահպանվել որպես html էջ, վերբեռնվել որոշների վրա narod.ru և կաշխատի) Սա շատ զվարճալի և հետաքրքիր լուծում է, այնուամենայնիվ, ահավոր անհարմար է սերվերներ տեղադրելու համար, իրականում հենց այն բանի համար, ինչ ստեղծվել է այս նախագիծը: Ներբեռնեք ստեղծված արխիվը զննարկիչով, այնուհետև փոխանցեք այն սերվերին՝ օգտագործելով nc... 2019թ. Ես ինքս ինձ խնդիր դրեցի գտնել մի միջոց՝ ստացված կոնֆիգուրն անմիջապես սերվեր ներբեռնելու համար:
Նախագիծը ճեղքելուց հետո ես սկսեցի մտածել, թե որոնք են իմ տարբերակները: Խնդիրը բարդանում էր նրանով, որ ես չէի ուզում շեղվել այն պայմանից, որ նախագիծը պետք է մնա մաքուր ֆրոնտ-end, առանց որևէ հետնամասի։ Իհարկե, ամենապարզ լուծումը կլինի nodej-ներ հավաքելը և ստիպել նրան ստեղծել արխիվ կոնֆիգուրացիաներով՝ օգտագործելով ուղղակի հղումներ:
Իրականում շատ տարբերակներ չկային։ Ավելի ճիշտ՝ մտքիս միայն մեկն է եկել. Մենք պետք է կարգավորենք կոնֆիգուրացիաները և ստանանք հղում, որը կարող ենք պատճենել սերվերի վահանակին՝ 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 արխիվի սերունդը տեղափոխեցի մասնավոր generateZip մեթոդ և այլն: Սա AngularJS-ն է, և հեղինակն ինքը հավատարիմ է մնում զանգերին և չի իրականացրել այն խոստումների միջոցով։ downloadZip-ը դեռևս saveAs-ն արեց որպես ելք, մինչդեռ downloadBase64-ը մի փոքր այլ բան արեց: Մենք ստեղծում ենք FileReader օբյեկտ, որը եկել է մեզ html5-ով և արդեն բավականին է մատչելի օգտագործման համար։ Որը, մի ժամանակ, կարող է բլբից ստեղծել base64 տող, ավելի ճիշտ՝ ստեղծում է DataURL տող, բայց դա մեզ համար այնքան էլ կարևոր չէ, քանի որ. DataURL-ը պարունակում է հենց այն, ինչ մեզ անհրաժեշտ է: Բինգո, մի փոքր խայթոց էր սպասում ինձ, երբ ես փորձեցի այս ամենը դնել բուֆերի մեջ: Հեղինակը նախագծում օգտագործել է գրադարանը clipboardjs, որը թույլ է տալիս աշխատել clipboard-ի հետ առանց ֆլեշ օբյեկտների՝ հիմնվելով ընտրված տեքստի վրա։ Ի սկզբանե, ես որոշեցի իմ base64-ը տեղադրել display:none; տարրի մեջ, բայց այս դեպքում ես չէի կարող այն տեղադրել clipboard-ում, քանի որ բաժանում չի լինում. Հետևաբար, ցուցադրման փոխարեն:none; Ես արել եմ

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

ինչը թույլ տվեց ինձ և՛ թաքցնել տարրը տեսադաշտից, և՛ իրականում թողնել այն էջում: Voila, առաջադրանքը ավարտվեց, երբ ես սեղմեցի իմ կոճակը, բուֆերում տեղադրվեց այսպիսի տող.

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

որը ես պարզապես տեղադրեցի սերվերի վահանակի մեջ և անմիջապես ստացա zip արխիվ՝ բոլոր կոնֆիգուրացիաներով:
Եվ, իհարկե, ես հեղինակին խնդրանք եմ ուղարկել, քանի որ... նախագիծը ակտիվ է և աշխույժ, ես կցանկանայի տեսնել հեղինակի թարմացումները և ունենալ իմ սեփական կոճակը) Հետաքրքրվողների համար այստեղ է իմ պատառաքաղը նախագիծը և ես քաշեք խնդրանքը, որտեղ կարող եք տեսնել, թե ինչ եմ ուղղել/ավելացրել։
Բարի զարգացում բոլորին)

Source: www.habr.com