კონფიგურაციის გენერაცია nginx-ისთვის, ერთი მოთხოვნის ისტორია

მოგესალმებით, ამხანაგებო. ლამაზია ჩემს საბრძოლო სერვერებზე nginx მუშაობს 2006 წლიდან და მისი ადმინისტრირების წლების განმავლობაში დამიგროვდა უამრავი კონფიგურაცია და შაბლონი. nginx-ს ბევრი ვაქებდი და რატომღაც აღმოჩნდა, რომ ჰაბზეც კი დავიწყე nginx hub, აჩვენე მ/
მეგობრებმა მთხოვეს მათთვის დეველოპერული ფერმა დამეყენებინა და იმის ნაცვლად, რომ ჩემი კონკრეტული შაბლონები გადამეტანა, საინტერესო პროექტი გამახსენდა. nginxconfig.io, რომელიც ავრცელებს კონფიგურაციებს თაროებზე და ამზადებს ყველაფერს დაშიფვრისთვის და ა.შ. ვიფიქრე, რატომაც არა? თუმცა, გამაბრაზა იმ ფაქტმა, რომ nginxconfig მთავაზობს ჩამოტვირთოს zip არქივი ბრაუზერში, ისე რომ არ მაძლევს უფლებას ავტვირთო იგი პირდაპირ სერვერზე wget/fetch/curl-ის გამოყენებით. რა სისულელეა, რაში მჭირდება ბრაუზერში, სერვერზე მჭირდება კონსოლიდან. გაბრაზებული მივედი github-ში, რათა მენახა პროექტის არსება, რამაც გამოიწვია მისი ჩანგალი და, შედეგად, დახევის მოთხოვნა. რაზეც არ დავწერდი რომ არ იყოს საინტერესო 😉

რა თქმა უნდა, სანამ წყაროებს ჩავუღრმავდი, გადავხედე, საიდან იღებს Chrome გენერირებულ zip-არქივს კონფიგურაციებით და იქ „blob:“-ით დაწყებული მისამართი მელოდა, უფ. უკვე ცხადი გახდა, რომ სერვისი გზაზე არაფერს წარმოქმნის, ფაქტობრივად, ეს ყველაფერი კეთდება js-ის მიერ. მართლაც, zip არქივი გენერირებულია კლიენტის, ბრაუზერის და თავად Javascript-ის მიერ. იმათ. სილამაზე იმაშია, რომ პროექტი nginxconfig.io შეიძლება უბრალოდ შენახული იყოს როგორც html გვერდი, ატვირთული ზოგიერთში narod.ru და იმუშავებს) ეს ძალიან სასაცილო და საინტერესო გამოსავალია, თუმცა საშინლად მოუხერხებელია სერვერების დასაყენებლად, ფაქტობრივად, ზუსტად რისთვის შეიქმნა ეს პროექტი. ჩამოტვირთეთ გენერირებული არქივი ბრაუზერით და შემდეგ გადაიტანეთ სერვერზე nc... 2019 წელს? მე ჩემს თავს დავალება დავადგინე, რომ მეპოვა გზა მიღებული კონფიგურაციის პირდაპირ სერვერზე გადმოსაწერად.
პროექტის განხორციელების შემდეგ დავიწყე ფიქრი იმაზე, თუ რა ვარიანტები მქონდა. დავალებას ის ართულებდა, რომ არ მინდოდა გადავუხვიო იმ პირობას, რომ პროექტი უნდა დარჩეს სუფთა ფრონტ-ენდ, ყოველგვარი ბექ-ენდის გარეშე. რა თქმა უნდა, უმარტივესი გამოსავალი იქნება 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 არქივის შედეგად მიღებული blob ობიექტი.

კარგი, რაც უნდა გამეკეთებინა, იყო მის გვერდით კიდევ ერთი ღილაკის დამატება და როცა მასზე დავაწკაპუნებდი, მიღებულ 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-ში და უკვე საკმაოდ ხელმისაწვდომი გამოყენებისთვის. რომელსაც ერთ დროს შეუძლია blob-დან base64 სტრიქონის შექმნა, უფრო სწორად, DataURL სტრიქონს, მაგრამ ეს ჩვენთვის არც ისე მნიშვნელოვანია, რადგან DataURL შეიცავს ზუსტად იმას, რაც ჩვენ გვჭირდება. ბინგო, პატარა ნაკლი მელოდა, როცა ამ ყველაფრის ბუფერში ჩადებას ვცდილობდი. ავტორმა პროექტში გამოიყენა ბიბლიოთეკა ბუფერში, რომელიც საშუალებას გაძლევთ იმუშაოთ ბუფერთან ფლეშ ობიექტების გარეშე, შერჩეული ტექსტის საფუძველზე. თავდაპირველად, გადავწყვიტე, ჩემი base64 ჩამეყენებინა ელემენტში display:none;, მაგრამ ამ შემთხვევაში მე ვერ მოვახერხე მისი განთავსება ბუფერში, რადგან არ ხდება განცალკევება. ამიტომ, ჩვენების ნაცვლად:none; მე გავაკეთე

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

რამაც საშუალება მომცა, ელემენტი დამემალა მხედველობიდან და რეალურად დამეტოვებინა იგი გვერდზე. Voila, დავალება დასრულებულია, როცა ჩემს ღილაკს დავაჭირე, ბუფერში მოთავსდა ასეთი ხაზი:

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

რომელიც უბრალოდ ჩასვით კონსოლში სერვერზე და მაშინვე მივიღე zip არქივი ყველა კონფიგურაციით.
და, რა თქმა უნდა, გავუგზავნე თხოვნა ავტორს, რადგან... პროექტი აქტიური და ცოცხალია, მსურს ვნახო განახლებები ავტორისგან და მქონდეს ჩემი ღილაკი) დაინტერესებულთათვის აქ არის ჩემი ჩანგალი პროექტი და საკუთარი თავი თხოვნა, სადაც შეგიძლიათ იხილოთ რა გავასწორე/დავამატე.
ყველას ბედნიერი განვითარება)

წყარო: www.habr.com