Nginx-д зориулсан тохиргоог үүсгэх, нэг татах хүсэлтийн түүх

Сайн байцгаана уу, нөхдүүд. Миний байлдааны серверүүд дээр үзэсгэлэнтэй nginx 2006 оноос хойш ажиллаж байгаа бөгөөд түүний удирдлагын жилүүдэд би маш олон тохиргоо, загваруудыг хуримтлуулсан. Би nginx-ийг маш их магтдаг байсан, ямар нэгэн байдлаар би hub дээр nginx hub эхлүүлсэн, бас шоудсан m/
Найзууд надаас өөрсдөдөө зориулж хөгжлийн ферм байгуулахыг хүссэн бөгөөд би тэдэнд өөрийн загваруудаа чирэхийн оронд нэгэн сонирхолтой төслийг санав. nginxconfig.io, тохиргоонуудыг тавиур дээр тарааж, шифрлэхэд бүгдийг бэлддэг гэх мэт. Би яагаад болохгүй гэж? Гэсэн хэдий ч, nginxconfig нь намайг wget/fetch/curl ашиглан сервер рүү шууд оруулахыг зөвшөөрөхгүйгээр zip архивыг хөтөч рүү татаж авахыг санал болгож байгаа нь миний уурыг хүргэсэн. Ямар утгагүй юм бэ, яагаад хөтөч дээр хэрэгтэй байна вэ, консолоос сервер дээр хэрэгтэй байна. Уур хүрээд би github руу орж төслийнхөө санааг харахаар очсон бөгөөд энэ нь түүний салаа, үр дүнд нь татах хүсэлтэд хүргэсэн. Сонирхолтой биш байсан бол би бичихгүй байсан 😉

Мэдээжийн хэрэг, эх сурвалжийг судлахын өмнө би Chrome үүсгэсэн зип архивыг тохиргоотой хаана татаж байгааг харвал тэнд "blob:" гэж эхэлсэн хаяг намайг хүлээж байсан. Энэ үйлчилгээ нь замдаа юу ч үүсгэдэггүй нь аль хэдийн тодорхой болсон, үнэндээ бүгдийг js хийдэг. Үнэн хэрэгтээ зип архивыг үйлчлүүлэгч, хөтөч болон javascript өөрөө үүсгэнэ. Тэдгээр. гоо сайхан нь төсөл юм nginxconfig.io Үүнийг зүгээр л html хуудас хэлбэрээр хадгалж, заримд нь байршуулж болно narod.ru бөгөөд энэ нь ажиллах болно) Энэ бол маш инээдтэй, сонирхолтой шийдэл боловч серверийг тохируулахад үнэхээр тохиромжгүй, үнэндээ энэ төслийг яг юу бүтээсэн юм. Үүсгэсэн архивыг хөтчөөр татаж аваад 2019 онд nc... ашиглан сервер рүү шилжүүлэх үү? Үүссэн тохиргоог серверт шууд татаж авах арга замыг хайж олох зорилтыг би өөртөө тавьсан.
Төслийг гацаасны дараа би ямар сонголт хийх талаар бодож эхэлсэн. Төсөл нь ямар ч арын хэсэггүй, цэвэр урд тал хэвээр байх ёстой гэсэн нөхцлөөс хазайхыг хүсээгүй учраас даалгавар нь төвөгтэй байсан. Мэдээжийн хэрэг, хамгийн энгийн шийдэл бол nodej-уудыг татаж аваад шууд холбоос ашиглан тохиргоотой архив үүсгэх явдал юм.
Үнэндээ тийм ч олон сонголт байгаагүй. Бүр тодруулбал нэг л санаанд орж ирсэн. Бид тохиргоог хийж, зип архив авахын тулд серверийн консол руу хуулж болох холбоосыг авах хэрэгтэй.
Үүссэн зип архивын хэд хэдэн текст файлууд нь нэлээд жинтэй буюу хэдхэн килобайт жинтэй байв. Хамгийн ойлгомжтой шийдэл бол консол дээрх командын тусламжтайгаар сервер дээр байх үед үүсгэсэн зип архиваас base64 мөрийг авч буфер руу хаях явдал байв.

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

Бид энэ zip файлыг үүсгэж болно.

nginxconfig.io AngularJS дээр бичигдсэн, хэрэв зохиогч реактив js хүрээг сонгоогүй бол хэдэн км код шаардагдахыг төсөөлж ч чадахгүй байна. Гэхдээ энэ бүхэн VueJS-д хичнээн энгийн, илүү үзэсгэлэнтэй хэрэгжиж болохыг би төгс төсөөлж байна, гэхдээ энэ нь огт өөр сэдэв юм.
Төслийн нөөцөөс бид зип архив үүсгэх аргыг харж байна.

$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 архивыг үүсгэсний дараа js үүнийг номын санг ашиглан хөтөч рүү оруулдаг FileSaver.js:

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

Энд контент нь зип архивын үүссэн blob объект юм.

За, миний хийх ёстой зүйл бол хажууд нь өөр товчлуур нэмж, дээр нь дарахад үүссэн зип архивыг хөтөч рүү хадгалахгүй, харин тэндээс base64 кодыг авах болно. Би жаахан эргэлзсэний эцэст ганц татаж авах Zip-ын оронд 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 архивын үеийг өөрөө private generateZip арга руу шилжүүлсэн гэх мэт. Энэ бол AngularJS бөгөөд зохиогч өөрөө дуудлагыг дагаж мөрдөж, амлалтаар дамжуулан хэрэгжүүлээгүй. downloadZip нь saveA-г гаралт болгон хийсэн хэвээр байхад downloadBase64 нь арай өөр зүйл хийсэн. Бид html5-д ирсэн FileReader объектыг үүсгэсэн бөгөөд аль хэдийн бүрэн болсон хүртээмжтэй ашиглах. Энэ нь нэгэн зэрэг blob-оос base64 стринг хийж чаддаг, эс тэгвээс DataURL мөрийг хийдэг ч энэ нь бидний хувьд тийм ч чухал биш, учир нь DataURL нь бидэнд яг хэрэгтэй зүйлийг агуулдаг. Бинго, би энэ бүгдийг буферт оруулах гэж оролдоход намайг бага зэрэг гацаа хүлээж байсан. Зохиогч уг төсөлд номын санг ашигласан clipboardjs, энэ нь сонгосон текст дээр тулгуурлан санах ойд флаш объектгүйгээр ажиллах боломжийг олгодог. Эхэндээ би base64-ээ display:none; бүхий элементэд оруулахаар шийдсэн боловч энэ тохиолдолд санах ойн санах ойд байрлуулж чадсангүй. салалт үүсэхгүй. Тиймээс дэлгэцийн оронд:none; би хийсэн

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

Энэ нь элементийг харагдахаас нууж, хуудсан дээр үлдээх боломжийг надад олгосон. Voila, даалгавар дууслаа, би товчлуур дээр дарахад буферт ийм мөр тавигдсан:

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

Үүнийг би зүгээр л сервер дээрх консол руу буулгаж, бүх тохиргоотой zip архивыг шууд хүлээн авлаа.
Мэдээжийн хэрэг, би зохиогч руу татах хүсэлт илгээсэн, учир нь ... Төсөл идэвхтэй бөгөөд идэвхтэй байна, би зохиогчоос шинэчлэлтүүдийг харахыг хүсч, өөрийн гэсэн товчлууртай байхыг хүсч байна) Сонирхсон хүмүүст зориулж энд байна миний сэрээ төсөл болон өөрөө татах хүсэлт, та миний зассан/нэмсэн зүйлийг харах боломжтой.
Бүгдэд нь хөгжил цэцэглэлтийг хүсье)

Эх сурвалж: www.habr.com