ການສ້າງ configs ສໍາລັບ nginx, ປະຫວັດການຮ້ອງຂໍການດຶງຫນຶ່ງ

ຊົມເຊີຍ, ສະຫາຍ. ສວຍງາມໃນເຊີບເວີການຕໍ່ສູ້ຂອງຂ້ອຍ nginx ໄດ້ດໍາເນີນການນັບຕັ້ງແຕ່ 2006 ແລະໃນໄລຍະປີຂອງການບໍລິຫານຂອງຕົນຂ້າພະເຈົ້າໄດ້ສະສົມຫຼາຍ configs ແລະແມ່ແບບ. ຂ້າພະເຈົ້າໄດ້ຍົກຍ້ອງ nginx ຢ່າງຫຼວງຫຼາຍແລະບາງທີມັນໄດ້ຫັນອອກວ່າຂ້ອຍກໍ່ເລີ່ມ nginx hub ຢູ່ໃນສູນ, ເຊັ່ນດຽວກັນ, ສະແດງໃຫ້ເຫັນ m /
ໝູ່ໄດ້ຂໍໃຫ້ຂ້ອຍຕັ້ງຟາມພັດທະນາໃຫ້ເຂົາເຈົ້າ, ແລະແທນທີ່ຈະລາກແມ່ແບບສະເພາະຂອງຂ້ອຍ, ຂ້ອຍຈື່ໄດ້ໂຄງການທີ່ໜ້າສົນໃຈ. nginxconfig.io, ເຊິ່ງກະແຈກກະຈາຍ configs ໃນ shelves ແລະກະກຽມທຸກສິ່ງທຸກຢ່າງສໍາລັບການອະນຸຍາດໃຫ້ເຂົ້າລະຫັດ, ແລະອື່ນໆ. ຂ້າພະເຈົ້າຄິດວ່າ, ເປັນຫຍັງບໍ່? ຢ່າງໃດກໍ່ຕາມ, ຂ້ອຍຮູ້ສຶກຄຽດແຄ້ນກັບຄວາມຈິງທີ່ວ່າ nginxconfig ສະເຫນີໃຫ້ຂ້ອຍດາວໂຫລດ zip archive ເຂົ້າໄປໃນຕົວທ່ອງເວັບ, ໂດຍບໍ່ມີການອະນຸຍາດໃຫ້ຂ້ອຍອັບໂຫລດໂດຍກົງກັບເຄື່ອງແມ່ຂ່າຍໂດຍໃຊ້ wget/fetch/curl. ສິ່ງທີ່ໄຮ້ສາລະ, ເປັນຫຍັງຂ້ອຍຕ້ອງການມັນຢູ່ໃນຕົວທ່ອງເວັບ, ຂ້ອຍຕ້ອງການມັນຢູ່ໃນເຄື່ອງແມ່ຂ່າຍຈາກ console. ໃຈຮ້າຍ, ຂ້າພະເຈົ້າໄດ້ໄປຫາ github ເພື່ອເບິ່ງຄວາມກ້າຫານຂອງໂຄງການ, ເຊິ່ງນໍາໄປສູ່ສ້ອມຂອງມັນແລະ, ດັ່ງນັ້ນ, ການຮ້ອງຂໍດຶງ. ທີ່ຂ້ອຍຈະບໍ່ຂຽນຖ້າມັນບໍ່ຫນ້າສົນໃຈ 😉

ແນ່ນອນ, ກ່ອນທີ່ຈະຂຸດຄົ້ນແຫຼ່ງຂໍ້ມູນ, ຂ້າພະເຈົ້າໄດ້ເບິ່ງບ່ອນທີ່ Chrome ດຶງແຟ້ມ zip ທີ່ສ້າງຂຶ້ນດ້ວຍການຕັ້ງຄ່າ, ແລະມີທີ່ຢູ່ເລີ່ມຕົ້ນດ້ວຍ "blob:" ລໍຖ້າຂ້ອຍ, oops. ມັນໄດ້ກາຍເປັນທີ່ຊັດເຈນແລ້ວວ່າການບໍລິການບໍ່ໄດ້ສ້າງສິ່ງໃດຕາມທາງ, ໃນຄວາມເປັນຈິງ, ມັນທັງຫມົດແມ່ນເຮັດໂດຍ js. ແທ້ຈິງແລ້ວ, zip archive ແມ່ນສ້າງຂຶ້ນໂດຍລູກຄ້າ, ຕົວທ່ອງເວັບ, ແລະ javascript ຕົວຂອງມັນເອງ. ເຫຼົ່ານັ້ນ. ຄວາມງາມແມ່ນວ່າໂຄງການ nginxconfig.io ສາມາດໄດ້ຮັບການບັນທຶກໄວ້ພຽງແຕ່ເປັນຫນ້າ html, ອັບໂຫຼດກັບບາງ narod.ru ແລະມັນຈະເຮັດວຽກ) ນີ້ແມ່ນການແກ້ໄຂຕະຫລົກແລະຫນ້າສົນໃຈຫຼາຍ, ຢ່າງໃດກໍຕາມ, ມັນບໍ່ສະດວກຫຼາຍສໍາລັບການຕັ້ງເຄື່ອງແມ່ຂ່າຍ, ໃນຄວາມເປັນຈິງ, ແນ່ນອນວ່າໂຄງການນີ້ຖືກສ້າງຂຶ້ນ. ດາວໂຫຼດແຟ້ມຈັດເກັບທີ່ສ້າງຂຶ້ນດ້ວຍຕົວທ່ອງເວັບ, ແລະຫຼັງຈາກນັ້ນໂອນມັນໄປຫາເຄື່ອງແມ່ຂ່າຍໂດຍໃຊ້ nc... ໃນປີ 2019? ຂ້ອຍຕັ້ງຕົວເອງເປັນວຽກງານຂອງການຊອກຫາວິທີທີ່ຈະດາວໂຫລດ config ຜົນໄດ້ຮັບໂດຍກົງກັບເຄື່ອງແມ່ຂ່າຍ.
ຫຼັງຈາກ forking ໂຄງການ, ຂ້າພະເຈົ້າໄດ້ເລີ່ມຕົ້ນຄິດກ່ຽວກັບສິ່ງທີ່ທາງເລືອກຂອງຂ້າພະເຈົ້າແມ່ນ. ວຽກງານແມ່ນສັບສົນໂດຍຄວາມຈິງທີ່ວ່າຂ້ອຍບໍ່ຕ້ອງການທີ່ຈະ deviate ຈາກເງື່ອນໄຂທີ່ໂຄງການຄວນຈະຍັງຄົງເປັນທາງຫນ້າບໍລິສຸດ, ໂດຍບໍ່ມີການ back-end ໃດ. ແນ່ນອນ, ການແກ້ໄຂທີ່ງ່າຍດາຍທີ່ສຸດແມ່ນການດຶງ nodejs ແລະບັງຄັບໃຫ້ມັນສ້າງບ່ອນເກັບມ້ຽນທີ່ມີການຕັ້ງຄ່າໂດຍໃຊ້ການເຊື່ອມຕໍ່ໂດຍກົງ.
ໃນຄວາມເປັນຈິງ, ບໍ່ມີທາງເລືອກຫຼາຍ. ຫຼາຍທີ່ຊັດເຈນ, ມີພຽງແຕ່ຫນຶ່ງມາໃນໃຈ. ພວກເຮົາຈໍາເປັນຕ້ອງໄດ້ຕັ້ງຄ່າ configs ແລະໄດ້ຮັບການເຊື່ອມຕໍ່ທີ່ພວກເຮົາສາມາດຄັດລອກໄປທີ່ server console ເພື່ອໃຫ້ໄດ້ຮັບ zip archive.
ໄຟລ໌ຂໍ້ຄວາມຫຼາຍອັນໃນແຟ້ມ zip ທີ່ເປັນຜົນອອກມາມີນໍ້າໜັກໜ້ອຍໜຶ່ງ, ເທົ່າກັບສອງສາມກິໂລໄບ. ການແກ້ໄຂທີ່ຊັດເຈນແມ່ນໄດ້ຮັບສາຍ base64 ຈາກແຟ້ມ zip ທີ່ສ້າງຂຶ້ນແລະຖິ້ມມັນເຂົ້າໄປໃນ buffer, ໃນຂະນະທີ່ຢູ່ໃນເຄື່ອງແມ່ຂ່າຍທີ່ມີຄໍາສັ່ງໃນ console.

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

ພວກເຮົາສາມາດສ້າງໄຟລ໌ zip ດຽວກັນນີ້.

nginxconfig.io ຖືກຂຽນໄວ້ໃນ AngularJS, ຂ້ອຍບໍ່ສາມາດຈິນຕະນາການໄດ້ວ່າລະຫັດໃດຈະຕ້ອງການຖ້າຜູ້ຂຽນບໍ່ໄດ້ເລືອກກອບ js ທີ່ມີປະຕິກິລິຍາ. ແຕ່ຂ້ອຍສາມາດຈິນຕະນາການຢ່າງສົມບູນວ່າສິ່ງທີ່ງ່າຍດາຍແລະສວຍງາມກວ່າທັງຫມົດນີ້ສາມາດຖືກປະຕິບັດຢູ່ໃນ VueJS, ເຖິງແມ່ນວ່ານີ້ແມ່ນຫົວຂໍ້ທີ່ແຕກຕ່າງກັນຫມົດ.
ໃນຊັບພະຍາກອນຂອງໂຄງການພວກເຮົາເຫັນວິທີການສ້າງ zip archive:

$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 archive, js feeds ມັນໄປຫາຕົວທ່ອງເວັບໂດຍໃຊ້ຫ້ອງສະຫມຸດ FileSaver.js:

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

ບ່ອນທີ່ເນື້ອຫາແມ່ນວັດຖຸ blob ຜົນໄດ້ຮັບຂອງການເກັບ zip.

ຕົກລົງ, ທັງຫມົດທີ່ຂ້ອຍຕ້ອງເຮັດຄືການເພີ່ມປຸ່ມອື່ນທີ່ຢູ່ຂ້າງມັນແລະເມື່ອຂ້ອຍຄລິກໃສ່ມັນ, ຂ້ອຍຈະບໍ່ບັນທຶກ zip archive ຜົນໄດ້ຮັບໄປຫາຕົວທ່ອງເວັບ, ແຕ່ໄດ້ຮັບລະຫັດ base64 ຈາກມັນ. ຫຼັງ​ຈາກ​ທີ່​ບໍ່​ພໍ​ໃຈ​ເລັກ​ນ້ອຍ​, ຂ້າ​ພະ​ເຈົ້າ​ໄດ້​ຮັບ 2 ວິ​ທີ​ການ​, ແທນ​ທີ່​ຈະ​ເປັນ​ພຽງ​ແຕ່​ຫນຶ່ງ downloadZip​:

$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 archive ຕົວມັນເອງໄປຫາວິທີການ generateZip ສ່ວນຕົວ, ແລະອື່ນໆ. ນີ້ແມ່ນ AngularJS, ແລະຜູ້ຂຽນເອງຍຶດຫມັ້ນກັບການເອີ້ນຄືນແລະບໍ່ໄດ້ປະຕິບັດມັນຜ່ານຄໍາສັນຍາ. downloadZip ຍັງເຮັດ saveAs ເປັນຜົນຜະລິດ, ໃນຂະນະທີ່ downloadBase64 ເຮັດບາງສິ່ງບາງຢ່າງທີ່ແຕກຕ່າງກັນເລັກນ້ອຍ. ພວກເຮົາສ້າງວັດຖຸ FileReader ທີ່ເຂົ້າມາຫາພວກເຮົາໃນ html5 ແລະຂ້ອນຂ້າງແລ້ວ ສາມາດເຂົ້າເຖິງໄດ້ ສໍາລັບການນໍາໃຊ້. ເຊິ່ງ, ໃນເວລາດຽວ, ສາມາດເຮັດໃຫ້ສາຍ base64 ຈາກ blob, ຫຼືແທນທີ່ຈະ, ມັນເຮັດໃຫ້ DataURL string, ແຕ່ນີ້ບໍ່ສໍາຄັນຫຼາຍສໍາລັບພວກເຮົາ, ເພາະວ່າ. DataURL ປະກອບດ້ວຍສິ່ງທີ່ພວກເຮົາຕ້ອງການ. Bingo, snag ເລັກນ້ອຍລໍຖ້າຂ້ອຍເມື່ອຂ້ອຍພະຍາຍາມເອົາສິ່ງທັງຫມົດນີ້ໄວ້ໃນ buffer. ຜູ້ຂຽນໃຊ້ຫ້ອງສະຫມຸດໃນໂຄງການ clipboardjs, ເຊິ່ງອະນຸຍາດໃຫ້ທ່ານສາມາດເຮັດວຽກຮ່ວມກັບ clipboard ໂດຍບໍ່ມີການວັດຖຸ flash, ໂດຍອີງໃສ່ຂໍ້ຄວາມທີ່ເລືອກ. ໃນເບື້ອງຕົ້ນ, ຂ້າພະເຈົ້າໄດ້ຕັດສິນໃຈເອົາ base64 ຂອງຂ້ອຍຢູ່ໃນອົງປະກອບທີ່ມີການສະແດງຜົນ: ບໍ່ມີ; ແຕ່ໃນກໍລະນີນີ້ຂ້ອຍບໍ່ສາມາດໃສ່ມັນໃສ່ clipboard ໄດ້ເພາະວ່າ ບໍ່ມີການແຍກກັນເກີດຂຶ້ນ. ດັ່ງນັ້ນ, ແທນທີ່ຈະສະແດງ: none; ຂ້ອຍ​ເຮັດ

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

ເຊິ່ງອະນຸຍາດໃຫ້ຂ້ອຍທັງສອງເຊື່ອງອົງປະກອບຈາກການເບິ່ງແລະຕົວຈິງແລ້ວປ່ອຍໃຫ້ມັນຢູ່ໃນຫນ້າ. Voila, ວຽກງານໄດ້ຖືກສໍາເລັດ, ໃນເວລາທີ່ຂ້າພະເຈົ້າຄລິກໃສ່ປຸ່ມຂອງຂ້າພະເຈົ້າ, ເສັ້ນເຊັ່ນນີ້ໄດ້ຖືກຈັດໃສ່ໃນ buffer:

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

ທີ່ຂ້ອຍພຽງແຕ່ວາງລົງໃນ console ໃນເຊີບເວີແລະທັນທີໄດ້ຮັບການເກັບ zip ກັບ config ທັງຫມົດ.
ແລະ, ແນ່ນອນ, ຂ້າພະເຈົ້າໄດ້ສົ່ງຄໍາຮ້ອງຂໍດຶງກັບຜູ້ຂຽນ, ເພາະວ່າ ... ໂຄງການດັ່ງກ່າວແມ່ນມີການເຄື່ອນໄຫວແລະມີຊີວິດຊີວາ, ຂ້າພະເຈົ້າຢາກເຫັນການປັບປຸງຈາກຜູ້ຂຽນແລະມີປຸ່ມຂອງຂ້ອຍເອງ) ສໍາລັບຜູ້ທີ່ສົນໃຈ, ນີ້ແມ່ນ ສ້ອມຂອງຂ້ອຍ ໂຄງ​ການ​ແລະ​ຕົນ​ເອງ​ ດຶງການຮ້ອງຂໍ, ບ່ອນທີ່ທ່ານສາມາດເບິ່ງສິ່ງທີ່ຂ້ອຍແກ້ໄຂ / ເພີ່ມ.
ສຸກສັນການພັດທະນາທຸກຄົນ)

ແຫຼ່ງຂໍ້ມູນ: www.habr.com