🥇Penjanaan konfigurasi untuk nginx, sejarah satu permintaan tarik

Salam, kawan-kawan. Cantik pada pelayan tempur saya nginx telah berjalan sejak 2006 dan selama bertahun-tahun pentadbirannya saya telah mengumpulkan banyak konfigurasi dan templat. Saya banyak memuji nginx dan entah bagaimana ternyata saya juga memulakan hab nginx pada hab, juga, menunjukkan m/
Rakan meminta saya untuk menyediakan ladang pembangunan untuk mereka, dan bukannya menyeret mereka templat khusus saya, saya teringat satu projek yang menarik nginxconfig.io, yang menyerakkan konfigurasi pada rak dan menyediakan segala-galanya untuk membolehkan penyulitan, dsb. Saya fikir, kenapa tidak? Walau bagaimanapun, saya berasa marah dengan fakta bahawa nginxconfig menawarkan saya untuk memuat turun arkib zip ke dalam penyemak imbas, tanpa membenarkan saya memuat naiknya terus ke pelayan menggunakan wget/fetch/curl. Apa yang tidak masuk akal, mengapa saya memerlukannya dalam penyemak imbas, saya memerlukannya pada pelayan dari konsol. Marah, saya pergi ke github untuk melihat keberanian projek itu, yang membawa kepada garpu dan, akibatnya, permintaan tarik. Yang saya tidak akan menulis tentang jika ia tidak menarik 😉

Sudah tentu, sebelum menggali sumber, saya melihat tempat Chrome menarik arkib zip yang dijana dengan konfigurasi, dan di sana alamat yang bermula dengan "gumpalan:" sedang menunggu saya, oops. Sudah menjadi jelas bahawa perkhidmatan itu tidak menjana apa-apa di sepanjang jalan, malah, semuanya dilakukan oleh js. Sesungguhnya, arkib zip dijana oleh klien, penyemak imbas dan javascript itu sendiri. Itu. keindahannya ialah projek itu nginxconfig.io hanya boleh disimpan sebagai halaman html, dimuat naik ke beberapa narod.ru dan ia akan berfungsi) Ini adalah penyelesaian yang sangat lucu dan menarik, namun, ia amat menyusahkan untuk menyediakan pelayan, sebenarnya, tepat untuk projek ini dibuat. Muat turun arkib yang dijana dengan penyemak imbas, dan kemudian pindahkannya ke pelayan menggunakan nc... pada 2019? Saya menetapkan sendiri tugas untuk mencari cara untuk memuat turun konfigurasi yang terhasil terus ke pelayan.
Selepas membuat projek, saya mula berfikir tentang pilihan saya. Tugas itu rumit kerana saya tidak mahu menyimpang daripada syarat bahawa projek itu harus kekal sebagai bahagian hadapan yang tulen, tanpa sebarang bahagian belakang. Sudah tentu, penyelesaian yang paling mudah ialah dengan menarik nodej dan memaksanya menjana arkib dengan konfigurasi menggunakan pautan langsung.
Sebenarnya, tidak banyak pilihan. Lebih tepat lagi, hanya satu yang terlintas di fikiran. Kami perlu menyediakan konfigurasi dan mendapatkan pautan yang boleh kami salin ke konsol pelayan untuk mendapatkan arkib zip.
Beberapa fail teks dalam arkib zip yang terhasil mempunyai berat yang agak berat, secara literal beberapa kilobait. Penyelesaian yang jelas adalah untuk mendapatkan rentetan base64 daripada arkib zip yang dihasilkan dan membuangnya ke dalam penimbal, semasa berada di pelayan dengan arahan dalam konsol

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

kita boleh mencipta fail zip yang sama ini.

nginxconfig.io telah ditulis dalam AngularJS, saya tidak dapat membayangkan berapa kilometer kod yang diperlukan jika pengarang tidak memilih rangka kerja js reaktif. Tetapi saya dapat membayangkan dengan sempurna betapa lebih mudah dan lebih indah semua ini boleh dilaksanakan dalam VueJS, walaupun ini adalah topik yang sama sekali berbeza.
Dalam sumber projek kami melihat kaedah untuk menjana arkib 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',
	});
};

semuanya agak mudah, menggunakan perpustakaan jszip Zip dibuat di mana fail konfigurasi diletakkan. Selepas mencipta arkib zip, js menyuapkannya ke penyemak imbas menggunakan perpustakaan FileSaver.js:

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

di mana kandungan ialah objek gumpalan yang terhasil daripada arkib zip.

Ok, apa yang saya perlu lakukan ialah menambah butang lain di sebelahnya dan apabila saya mengklik padanya, saya tidak akan menyimpan arkib zip yang terhasil ke penyemak imbas, tetapi dapatkan kod base64 daripadanya. Selepas bermain-main sedikit, saya mendapat 2 kaedah, bukannya hanya satu muat turunZip:

$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',
	});
};

Seperti yang anda mungkin perasan, saya mengalihkan penjanaan arkib zip itu sendiri kepada kaedah generateZip peribadi, dan seterusnya. Ini adalah AngularJS, dan pengarang sendiri berpegang pada panggilan balik dan tidak melaksanakannya melalui janji. downloadZip masih melakukan saveAs sebagai output, manakala downloadBase64 melakukan sesuatu yang sedikit berbeza. Kami mencipta objek FileReader yang datang kepada kami dalam html5 dan sudah cukup ada untuk kegunaan. Yang, pada satu masa, boleh membuat rentetan base64 daripada gumpalan, atau sebaliknya, ia membuat rentetan DataURL, tetapi ini tidak begitu penting bagi kami, kerana DataURL mengandungi apa yang kami perlukan. Bingo, sedikit halangan menanti saya apabila saya cuba meletakkan semua ini dalam penimbal. Penulis menggunakan perpustakaan dalam projek itu papan keratanjs, yang membolehkan anda bekerja dengan papan keratan tanpa objek kilat, berdasarkan teks yang dipilih. Pada mulanya, saya memutuskan untuk meletakkan base64 saya dalam elemen dengan display:none;, tetapi dalam kes ini saya tidak dapat meletakkannya pada papan keratan kerana tiada perpisahan berlaku. Oleh itu, bukannya paparan: tiada; saya telah lakukan

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

yang membolehkan saya menyembunyikan elemen daripada paparan dan sebenarnya meninggalkannya pada halaman. Voila, tugas itu telah selesai, apabila saya mengklik butang saya, baris seperti ini diletakkan dalam penimbal:

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

yang saya hanya tampalkan ke dalam konsol pada pelayan dan segera menerima arkib zip dengan semua konfigurasi.
Dan, sudah tentu, saya menghantar permintaan tarik kepada pengarang, kerana... projek ini aktif dan meriah, saya ingin melihat kemas kini daripada penulis dan mempunyai butang saya sendiri) Bagi yang berminat, ini dia garpu saya projek dan dirinya sendiri tarik permintaan, di mana anda boleh melihat perkara yang saya betulkan/tambah.
Selamat pembangunan semua)

Sumber: www.habr.com

Penjanaan konfigurasi untuk nginx, sejarah satu permintaan tarik

Tambah komen Batal reply