יצירת הגדרות עבור nginx, היסטוריה של בקשת משיכה אחת

שלום, חברים. יפה על שרתי הקרב שלי nginx פועל מאז 2006 ובמהלך שנות הניהול שלו צברתי הרבה הגדרות ותבניות. שיבחתי מאוד את nginx ואיכשהו יצא שאפילו התחלתי nginx hub גם ברכזת, השוויץ ב-m/
חברים ביקשו ממני להקים עבורם חוות פיתוח, ובמקום לגרור להם את התבניות הספציפיות שלי, נזכרתי בפרויקט מעניין nginxconfig.io, שמפזר תצורות על המדפים ומכין הכל לאפשר להצפין וכו'. חשבתי, למה לא? עם זאת, התרגזתי מהעובדה ש-nginxconfig מציע לי להוריד את ארכיון ה-zip לדפדפן, מבלי לאפשר לי להעלות אותו ישירות לשרת באמצעות wget/fetch/curl. איזה שטויות, למה אני צריך את זה בדפדפן, אני צריך את זה בשרת מהקונסול. כועס, הלכתי ל-github לראות את האומץ של הפרויקט, מה שהוביל למזלג שלו, וכתוצאה מכך, בקשת משיכה. מה שלא הייתי כותב עליו אם זה לא היה מעניין 😉

כמובן, לפני שחפרתי במקורות, הסתכלתי היכן כרום מושך את ארכיון ה-zip שנוצר עם הגדרות, ושם חיכתה לי כתובת שמתחילה ב-"blob:", אופס. כבר התברר שהשירות לא מייצר שום דבר בדרך, למעשה, הכל נעשה על ידי js. ואכן, ארכיון ה-zip נוצר על ידי הלקוח, הדפדפן וה-Javascript עצמו. הָהֵן. היופי הוא שהפרויקט nginxconfig.io ניתן פשוט לשמור כדף HTML, להעלות לחלק narod.ru וזה יעבוד) זה פתרון מאוד מצחיק ומעניין, עם זאת, הוא נורא לא נוח להגדיר שרתים, למעשה, בדיוק בשביל מה שהפרויקט הזה נוצר. להוריד את הארכיון שנוצר עם דפדפן, ולאחר מכן להעביר אותו לשרת באמצעות nc... בשנת 2019? הצבתי לעצמי את המשימה למצוא דרך להוריד את התצורה שנוצרה ישירות לשרת.
לאחר שחילקתי את הפרויקט, התחלתי לחשוב מה האפשרויות שלי. המשימה הסתבכה בשל העובדה שלא רציתי לחרוג מהתנאי שהפרויקט יישאר חזית טהורה, ללא כל אחורי. כמובן, הפתרון הפשוט ביותר יהיה למשוך את ה-nodejs ולהכריח אותו ליצור ארכיון עם הגדרות באמצעות קישורים ישירים.
למעשה, לא היו הרבה אפשרויות. ליתר דיוק, רק אחד עלה בראש. אנחנו צריכים להגדיר את ההגדרות ולקבל קישור שנוכל להעתיק לקונסולת השרת כדי לקבל ארכיון zip.
כמה קבצי טקסט בארכיון ה-zip שהתקבל שקלו לא מעט, ממש כמה קילובייטים. הפתרון הברור היה לקבל את המחרוזת base64 מארכיון ה-zip שנוצר ולזרוק אותה לתוך המאגר, תוך כדי השרת עם הפקודה במסוף

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

נוכל ליצור את אותו קובץ zip.

nginxconfig.io נכתב ב-AngularJS, אני אפילו לא יכול לדמיין איזה קילומטרים של קוד היו נדרשים אם המחבר לא היה בוחר במסגרת js reactive. אבל אני יכול לדמיין בצורה מושלמת כמה פשוט ויפה יותר אפשר ליישם את כל זה ב-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');

כאשר התוכן הוא אובייקט הכתם שנוצר של ארכיון ה-zip.

אוקיי, כל מה שהייתי צריך לעשות זה להוסיף כפתור נוסף לידו וכאשר לחצתי עליו, לא הייתי שומר את ארכיון ה-zip שהתקבל בדפדפן, אלא אקבל ממנו את קוד base64. אחרי שהתעסקתי קצת, קיבלתי 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 עצמו לשיטת privategenerZip, וכן הלאה. זהו AngularJS, והמחבר עצמו דבק בהתקשרות חוזרת ולא יישם זאת באמצעות הבטחות. downloadZip עדיין עשה saveAs כפלט, בעוד ש-downloadBase64 עשה משהו מעט שונה. אנחנו יוצרים אובייקט FileReader שהגיע אלינו ב-html5 והוא כבר די זמין לשימוש. אשר, בבת אחת, יכול ליצור מחרוזת base64 מ-blob, או ליתר דיוק, היא מייצרת מחרוזת DataURL, אבל זה לא כל כך חשוב עבורנו, כי DataURL מכיל בדיוק את מה שאנחנו צריכים. בינגו, חיכה לי תקלה קטנה כשניסיתי להכניס את כל זה למאגר. המחבר השתמש בספרייה בפרויקט clipboardjs, המאפשר לך לעבוד עם הלוח ללא אובייקטי פלאש, בהתבסס על הטקסט שנבחר. בתחילה, החלטתי לשים את ה-base64 שלי באלמנט עם display:none;, אבל במקרה הזה לא יכולתי לשים אותו על הלוח כי לא מתרחשת הפרדה. לכן, במקום display:none; אני עשיתי

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

מה שאפשר לי גם להסתיר את האלמנט מהעין וגם להשאיר אותו בדף. וואלה, המשימה הושלמה, כאשר לחצתי על הכפתור שלי, שורה כזו הוצבה במאגר:

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

שפשוט הדבקתי לקונסולה בשרת ומיד קיבלתי ארכיון zip עם כל ההגדרות.
וכמובן, שלחתי בקשת משיכה למחבר, כי... הפרויקט פעיל ותוסס, אשמח לראות עדכונים מהמחבר ויש לי כפתור משלי) למעוניינים, הנה הוא המזלג שלי הפרויקט ואני בקשת משיכה, שם תוכל לראות מה תיקנתי/הוספתי.
התפתחות נעימה לכולם)

מקור: www.habr.com