การสร้างการกำหนดค่าสำหรับ nginx ประวัติคำขอดึงหนึ่งครั้ง

สวัสดีสหาย สวยงามบนเซิร์ฟเวอร์ต่อสู้ของฉัน Nginx เปิดให้บริการมาตั้งแต่ปี 2006 และตลอดหลายปีที่ผ่านมาของการบริหาร ฉันได้สะสมการกำหนดค่าและเทมเพลตมากมาย ฉันชื่นชม nginx มาก แต่กลับกลายเป็นว่าฉันได้เริ่มศูนย์กลาง nginx บนฮับด้วยซ้ำ อวด m/
เพื่อนขอให้ฉันสร้างฟาร์มพัฒนาให้พวกเขา และแทนที่จะลากเทมเพลตเฉพาะของฉันไปให้พวกเขา ฉันจำโปรเจ็กต์ที่น่าสนใจได้ nginxconfig.ioซึ่งกระจายการกำหนดค่าบนชั้นวางและเตรียมทุกอย่างเพื่อให้เข้ารหัส ฯลฯ ฉันคิดว่าทำไมไม่? อย่างไรก็ตาม ฉันโกรธมากที่ nginxconfig เสนอให้ฉันดาวน์โหลดไฟล์ zip ลงในเบราว์เซอร์ โดยไม่อนุญาตให้ฉันอัปโหลดมันไปยังเซิร์ฟเวอร์โดยตรงโดยใช้ wget/fetch/curl ไร้สาระทำไมฉันถึงต้องการมันในเบราว์เซอร์ฉันต้องการมันบนเซิร์ฟเวอร์จากคอนโซล ด้วยความโกรธ ฉันไปที่ GitHub เพื่อดูความกล้าของโปรเจ็กต์ ซึ่งนำไปสู่การแยกและเป็นผลให้มีการดึงคำขอ ซึ่งฉันจะไม่เขียนถึงถ้ามันไม่น่าสนใจ😉

แน่นอน ก่อนที่จะเจาะลึกแหล่งที่มา ฉันดูว่า Chrome ดึงไฟล์ zip ที่สร้างขึ้นพร้อมการกำหนดค่าไปที่ใด และมีที่อยู่ที่ขึ้นต้นด้วย "blob:" กำลังรอฉันอยู่ อ๊ะ เป็นที่ชัดเจนแล้วว่าบริการไม่ได้สร้างอะไรเลย ที่จริงแล้ว ทั้งหมดนี้ทำโดย js แท้จริงแล้วไฟล์ zip นั้นถูกสร้างขึ้นโดยไคลเอนต์ เบราว์เซอร์ และจาวาสคริปต์เอง เหล่านั้น. ความสวยงามก็คือโครงการ 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');

โดยที่ content เป็นวัตถุหยดผลลัพธ์ของไฟล์ zip

ตกลง สิ่งที่ฉันต้องทำคือเพิ่มปุ่มอีกปุ่มหนึ่งข้างๆ และเมื่อฉันคลิกมัน ฉันจะไม่บันทึกไฟล์ zip ที่เป็นผลลัพธ์ลงในเบราว์เซอร์ แต่จะรับโค้ด 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 เองไปยังเมธอด GenerateZip ส่วนตัว และอื่นๆ นี่คือ AngularJS และผู้เขียนเองก็ยึดติดกับการโทรกลับและไม่ได้นำไปใช้ผ่านคำสัญญา downloadZip ยังคงทำ saveAs เป็นเอาต์พุต ในขณะที่ downloadBase64 ทำสิ่งที่แตกต่างออกไปเล็กน้อย เราสร้างวัตถุ FileReader ที่มาหาเราใน html5 และค่อนข้างแล้ว ใช้ได้ สำหรับการใช้งาน ซึ่งในคราวเดียวสามารถสร้างสตริง base64 จาก blob หรือค่อนข้างจะสร้างสตริง DataURL แต่สิ่งนี้ไม่สำคัญสำหรับเราเพราะว่า DataURL มีสิ่งที่เราต้องการอย่างแน่นอน บิงโก อุปสรรค์เล็กๆ น้อยๆ รอฉันอยู่ เมื่อฉันพยายามจะใส่ทั้งหมดนี้ลงในบัฟเฟอร์ ผู้เขียนใช้ห้องสมุดในโครงการ คลิปบอร์ดjsซึ่งช่วยให้คุณทำงานกับคลิปบอร์ดได้โดยไม่ต้องใช้วัตถุแฟลช โดยขึ้นอยู่กับข้อความที่เลือก ในตอนแรก ฉันตัดสินใจใส่ base64 ของฉันในองค์ประกอบที่มี display:none; แต่ในกรณีนี้ ฉันไม่สามารถวางมันลงบนคลิปบอร์ดได้เพราะ ไม่มีการแยกเกิดขึ้น ดังนั้น แทนที่จะแสดง:none; ฉันทำ

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

ซึ่งทำให้ฉันสามารถซ่อนองค์ประกอบจากมุมมองและปล่อยมันไว้บนหน้าได้ Voila งานเสร็จสมบูรณ์แล้ว เมื่อฉันคลิกที่ปุ่ม บรรทัดแบบนี้ถูกวางไว้ในบัฟเฟอร์:

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

ซึ่งฉันเพิ่งวางลงในคอนโซลบนเซิร์ฟเวอร์และได้รับไฟล์ zip พร้อมการกำหนดค่าทั้งหมดทันที
และแน่นอน ฉันส่งคำขอดึงไปยังผู้เขียน เพราะ... โครงการมีความกระตือรือร้นและมีชีวิตชีวาฉันต้องการเห็นการอัปเดตจากผู้เขียนและมีปุ่มของตัวเอง) สำหรับผู้ที่สนใจนี่คือ ส้อมของฉัน โครงการและตัวเขาเอง ดึงคำขอซึ่งคุณสามารถดูสิ่งที่ฉันแก้ไข/เพิ่มได้
มีความสุขในการพัฒนาทุกคน)

ที่มา: will.com