ایجاد تنظیمات برای nginx، تاریخچه یک درخواست کشش

با سلام خدمت رفقا روی سرورهای رزمی من زیباست انجیناکس از سال 2006 در حال اجرا است و در طول سال های مدیریت آن، تنظیمات و قالب های زیادی را جمع آوری کرده ام. من خیلی از nginx تعریف کردم و یه جورایی معلوم شد که حتی یک nginx hub رو روی هاب هم راه اندازی کردم، show off m/
دوستان از من خواستند که یک مزرعه توسعه برای آنها راه اندازی کنم و به جای اینکه قالب های خاص خود را برای آنها بکشم، به یاد یک پروژه جالب افتادم. nginxconfig.io، که پیکربندی ها را در قفسه ها پراکنده می کند و همه چیز را برای اجازه رمزگذاری و غیره آماده می کند. فکر کردم چرا که نه؟ با این حال، از این واقعیت که nginxconfig به من پیشنهاد می کند که آرشیو فشرده را در مرورگر بارگیری کنم، بدون اینکه به من اجازه دهد آن را مستقیماً با استفاده از wget/fetch/curl روی سرور آپلود کنم، عصبانی شدم. چه مزخرفی، چرا به آن در مرورگر نیاز دارم، من آن را در سرور از کنسول نیاز دارم. با عصبانیت به github رفتم تا جرات پروژه را ببینم که منجر به فورک آن و در نتیجه درخواست کشش شد. که اگر جالب نبود در موردش نمی نوشتم 😉

البته، قبل از کاوش در منابع، به جایی که کروم بایگانی فشرده تولید شده را با تنظیمات می کشد، نگاه کردم و در آنجا آدرسی که با "blob:" شروع می شود، منتظر من بود، اوه. قبلاً مشخص شده است که این سرویس در طول مسیر چیزی تولید نمی کند، در واقع همه این کارها توسط js انجام می شود. در واقع، آرشیو zip توسط خود مشتری، مرورگر و جاوا اسکریپت ایجاد می شود. آن ها زیبایی این است که پروژه nginxconfig.io را می توان به سادگی به عنوان یک صفحه html ذخیره کرد و در برخی از آنها آپلود کرد narod.ru و کار خواهد کرد) این یک راه حل بسیار خنده دار و جالب است، با این حال، برای راه اندازی سرورها بسیار ناخوشایند است، در واقع دقیقاً برای آنچه این پروژه ایجاد شده است. آرشیو تولید شده را با مرورگر دانلود و سپس با استفاده از nc... در سال 2019 به سرور منتقل کنید؟ من وظیفه پیدا کردن راهی برای دانلود پیکربندی به دست آمده را مستقیماً روی سرور قرار دادم.
بعد از اتمام پروژه، شروع کردم به فکر کردن در مورد گزینه های من. کار با این واقعیت پیچیده بود که من نمی خواستم از این شرط منحرف شوم که پروژه باید یک فرانت اند خالص و بدون هیچ بک اند باقی بماند. البته، ساده‌ترین راه‌حل این است که nodejs را بالا بکشید و آن را مجبور کنید که بایگانی با تنظیمات با استفاده از پیوندهای مستقیم ایجاد کند.
در واقع، گزینه های زیادی وجود نداشت. به عبارت دقیق تر، فقط یکی به ذهنم رسید. ما باید تنظیمات را تنظیم کنیم و پیوندی دریافت کنیم که بتوانیم آن را در کنسول سرور کپی کنیم تا یک آرشیو فشرده دریافت کنیم.
چندین فایل متنی در آرشیو فشرده به دست آمده وزن کمی داشتند، به معنای واقعی کلمه چند کیلوبایت. راه حل واضح این بود که رشته base64 را از آرشیو zip تولید شده دریافت کنید و آن را به بافر بیندازید، در حالی که در سرور با دستور در کنسول هستید.

echo 'base64string' | base64 --decode > config.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 یک فایل فشرده در جایی که فایل های پیکربندی قرار می گیرند ایجاد می شود. پس از ایجاد آرشیو فشرده، js آن را با استفاده از کتابخانه به مرورگر می‌دهد FileSaver.js:

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

که در آن محتوا شیء حباب حاصل از آرشیو فشرده است.

خوب، تنها کاری که باید انجام می دادم این بود که یک دکمه دیگر را در کنار آن اضافه کنم و وقتی روی آن کلیک کردم، آرشیو zip حاصل را در مرورگر ذخیره نکردم، اما کد 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 است و خود نویسنده به callback ها پایبند است و آن را از طریق قول اجرا نکرده است. downloadZip همچنان saveAs را به عنوان خروجی انجام می‌دهد، در حالی که downloadBase64 کار کمی متفاوت انجام می‌دهد. ما یک شی FileReader ایجاد می کنیم که در html5 برای ما آمده است و در حال حاضر کاملاً است در دسترس برای استفاده. که در یک زمان، می تواند یک رشته base64 از یک حباب بسازد، یا بهتر بگوییم، یک رشته DataURL می سازد، اما این برای ما چندان مهم نیست، زیرا DataURL دقیقاً همان چیزی است که ما نیاز داریم. یکنوع بازی شبیه لوتو، وقتی سعی کردم همه اینها را در بافر قرار دهم، کمی مشکل در انتظارم بود. نویسنده در پروژه از کتابخانه استفاده کرده است clipboardjs، که به شما امکان می دهد بر اساس متن انتخاب شده با کلیپ بورد بدون اشیاء فلش کار کنید. در ابتدا، تصمیم گرفتم base64 خود را در عنصری با display:none; قرار دهم، اما در این مورد نمی‌توانستم آن را در کلیپ بورد قرار دهم زیرا جدایی رخ نمی دهد بنابراین، به جای display:none; من کردم

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

که به من اجازه داد هم عنصر را از دید پنهان کنم و هم آن را در صفحه بگذارم. Voila، کار تکمیل شد، وقتی روی دکمه خود کلیک کردم، خطی مانند این در بافر قرار گرفت:

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

که من به سادگی در کنسول روی سرور قرار دادم و بلافاصله یک آرشیو فشرده با تمام تنظیمات دریافت کردم.
و البته من یک درخواست کشش برای نویسنده ارسال کردم، زیرا ... پروژه فعال و پر جنب و جوش است، من می خواهم به روز رسانی های نویسنده را ببینم و دکمه خودم را داشته باشم) برای علاقه مندان، اینجاست چنگال من پروژه و خودم درخواست را بکشید، جایی که می توانید آنچه را که اصلاح کردم/اضافه کردم را ببینید.
پیشرفت همگی مبارک)

منبع: www.habr.com