nginx માટે રૂપરેખાઓનું નિર્માણ, એક પુલ વિનંતીનો ઇતિહાસ

શુભેચ્છાઓ, સાથીઓ. મારા કોમ્બેટ સર્વર્સ પર સુંદર nginx 2006 થી ચાલી રહ્યું છે અને તેના વહીવટના વર્ષોમાં મેં ઘણા બધા રૂપરેખાઓ અને નમૂનાઓ એકઠા કર્યા છે. મેં nginx ની ખૂબ પ્રશંસા કરી અને કોઈક રીતે એવું બહાર આવ્યું કે મેં હબ પર nginx હબ પણ શરૂ કર્યું છે, પણ, બતાવો m/
મિત્રોએ મને તેમના માટે ડેવલપમેન્ટ ફાર્મ બનાવવાનું કહ્યું, અને તેમને મારા ચોક્કસ નમૂનાઓ ખેંચવાને બદલે, મને એક રસપ્રદ પ્રોજેક્ટ યાદ આવ્યો. nginxconfig.io, જે છાજલીઓ પર રૂપરેખાઓને વેરવિખેર કરે છે અને lets encrypt વગેરે માટે બધું તૈયાર કરે છે. મેં વિચાર્યું, કેમ નહીં? જો કે, હું એ હકીકતથી ગુસ્સે થયો હતો કે nginxconfig મને wget/fetch/curl નો ઉપયોગ કરીને તેને સીધા સર્વર પર અપલોડ કરવાની મંજૂરી આપ્યા વિના, બ્રાઉઝરમાં ઝિપ આર્કાઇવ ડાઉનલોડ કરવાની ઑફર કરે છે. શું નોનસેન્સ, મને બ્રાઉઝરમાં શા માટે તેની જરૂર છે, મને કન્સોલમાંથી સર્વર પર તેની જરૂર છે. ગુસ્સામાં, હું પ્રોજેક્ટની હિંમત જોવા માટે ગીથબ પર ગયો, જેના કારણે તેનો કાંટો થયો અને પરિણામે, ખેંચવાની વિનંતી. જે રસપ્રદ ન હોત તો હું તેના વિશે લખીશ નહીં 😉

અલબત્ત, સ્ત્રોતોમાં ખોદતા પહેલા, મેં જોયું કે ક્રોમ જનરેટ કરેલ ઝિપ આર્કાઇવને કન્ફિગ્સ સાથે ક્યાં ખેંચે છે, અને ત્યાં “બ્લોબ:” થી શરૂ થતું સરનામું મારી રાહ જોઈ રહ્યું હતું, અરે. તે પહેલેથી જ સ્પષ્ટ થઈ ગયું છે કે સેવા રસ્તામાં કંઈપણ જનરેટ કરતી નથી, હકીકતમાં, તે બધું js દ્વારા કરવામાં આવ્યું છે. ખરેખર, ઝિપ આર્કાઇવ ક્લાયંટ, બ્રાઉઝર અને જાવાસ્ક્રિપ્ટ દ્વારા જ જનરેટ થાય છે. તે. સૌંદર્ય એ છે કે પ્રોજેક્ટ nginxconfig.io કેટલાક પર અપલોડ કરીને HTML પૃષ્ઠ તરીકે ફક્ત સાચવી શકાય છે narod.ru અને તે કાર્ય કરશે) આ એક ખૂબ જ રમુજી અને રસપ્રદ ઉકેલ છે, જો કે, સર્વર્સ સેટ કરવા માટે તે ખૂબ જ અસુવિધાજનક છે, હકીકતમાં, આ પ્રોજેક્ટ શું બનાવવામાં આવ્યો હતો તે માટે. બ્રાઉઝર વડે જનરેટ કરેલ આર્કાઇવ ડાઉનલોડ કરો અને પછી તેને nc નો ઉપયોગ કરીને સર્વર પર ટ્રાન્સફર કરો... 2019 માં? પરિણામી રૂપરેખાને સીધા સર્વર પર ડાઉનલોડ કરવાનો માર્ગ શોધવાનું કાર્ય મેં મારી જાતને સેટ કર્યું છે.
પ્રોજેક્ટને ફોર્ક કર્યા પછી, મેં મારા વિકલ્પો શું છે તે વિશે વિચારવાનું શરૂ કર્યું. કાર્ય એ હકીકતથી જટિલ હતું કે હું એવી શરતથી વિચલિત થવા માંગતો ન હતો કે પ્રોજેક્ટ કોઈ પણ બેક-એન્ડ વિના, શુદ્ધ ફ્રન્ટ-એન્ડ રહેવો જોઈએ. અલબત્ત, સૌથી સરળ ઉકેલ નોડજને ખેંચવાનો અને તેને ડાયરેક્ટ લિંક્સનો ઉપયોગ કરીને રૂપરેખાઓ સાથે આર્કાઇવ જનરેટ કરવા દબાણ કરવાનો છે.
ખરેખર, ત્યાં ઘણા બધા વિકલ્પો ન હતા. વધુ સ્પષ્ટ રીતે, ફક્ત એક જ ધ્યાનમાં આવ્યું. અમારે રૂપરેખાઓ સુયોજિત કરવાની અને એક લિંક મેળવવાની જરૂર છે જેને અમે ઝિપ આર્કાઇવ મેળવવા માટે સર્વર કન્સોલ પર કૉપિ કરી શકીએ છીએ.
પરિણામી ઝિપ આર્કાઇવમાં કેટલીક ટેક્સ્ટ ફાઇલોનું વજન થોડુંક હતું, શાબ્દિક રીતે થોડા કિલોબાઇટ. સ્પષ્ટ ઉકેલ એ હતો કે જનરેટ કરેલ ઝિપ આર્કાઇવમાંથી બેઝ 64 સ્ટ્રિંગ મેળવવી અને તેને બફરમાં ફેંકી દેવી, જ્યારે કન્સોલમાં આદેશ સાથે સર્વર પર

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

આપણે આ જ 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');

જ્યાં સામગ્રી એ ઝિપ આર્કાઇવનું પરિણામી બ્લોબ ઑબ્જેક્ટ છે.

ઠીક છે, મારે બસ તેની બાજુમાં બીજું બટન ઉમેરવાનું હતું અને જ્યારે મેં તેના પર ક્લિક કર્યું, ત્યારે હું પરિણામી ઝિપ આર્કાઇવને બ્રાઉઝરમાં સાચવીશ નહીં, પરંતુ તેમાંથી 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',
	});
};

જેમ તમે નોંધ્યું હશે, મેં ઝિપ આર્કાઇવની જનરેશનને ખાનગી જનરેટ ઝિપ પદ્ધતિમાં ખસેડી છે, વગેરે. આ AngularJS છે, અને લેખક પોતે કૉલબૅક્સને વળગી રહે છે અને વચનો દ્વારા તેનો અમલ કર્યો નથી. downloadZip એ હજુ પણ આઉટપુટ તરીકે saveAs કર્યું છે, જ્યારે downloadBase64 એ થોડું અલગ કર્યું છે. અમે એક FileReader ઑબ્જેક્ટ બનાવીએ છીએ જે અમારી પાસે html5 માં આવ્યું છે અને પહેલેથી જ એકદમ છે સુલભ ઉપયોગ માટે. જે, એક સમયે, બ્લોબમાંથી બેઝ 64 સ્ટ્રિંગ બનાવી શકે છે, અથવા તેના બદલે, તે DataURL સ્ટ્રિંગ બનાવે છે, પરંતુ આ આપણા માટે એટલું મહત્વનું નથી, કારણ કે DataURL માં આપણને જે જોઈએ છે તે બરાબર છે. બિન્ગો, જ્યારે મેં આ બધું બફરમાં મૂકવાનો પ્રયાસ કર્યો ત્યારે થોડી મુશ્કેલી મારી રાહ જોતી હતી. લેખકે પ્રોજેક્ટમાં પુસ્તકાલયનો ઉપયોગ કર્યો ક્લિપબોર્ડજેએસ, જે તમને પસંદ કરેલ ટેક્સ્ટના આધારે ફ્લેશ ઑબ્જેક્ટ વિના ક્લિપબોર્ડ સાથે કામ કરવાની મંજૂરી આપે છે. શરૂઆતમાં, મેં ડિસ્પ્લે:કોઈ નહીં; સાથેના તત્વમાં મારો base64 મૂકવાનું નક્કી કર્યું, પરંતુ આ કિસ્સામાં હું તેને ક્લિપબોર્ડ પર મૂકી શક્યો નહીં કારણ કે કોઈ વિભાજન થતું નથી. તેથી, પ્રદર્શનને બદલે:none; મેં કર્યું

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

જેણે મને તત્વને દૃશ્યમાંથી છુપાવવા અને વાસ્તવમાં તેને પૃષ્ઠ પર છોડી દેવાની મંજૂરી આપી. વોઇલા, કાર્ય પૂર્ણ થયું, જ્યારે મેં મારા બટન પર ક્લિક કર્યું, ત્યારે બફરમાં આની જેમ એક લાઇન મૂકવામાં આવી હતી:

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

જે મેં સર્વર પરના કન્સોલમાં ખાલી પેસ્ટ કર્યું અને તરત જ તમામ રૂપરેખાઓ સાથે ઝિપ આર્કાઇવ પ્રાપ્ત કર્યું.
અને, અલબત્ત, મેં લેખકને પુલ વિનંતી મોકલી, કારણ કે... પ્રોજેક્ટ સક્રિય અને જીવંત છે, હું લેખક તરફથી અપડેટ્સ જોવા માંગુ છું અને મારું પોતાનું બટન છે) રસ ધરાવતા લોકો માટે, તે અહીં છે મારો કાંટો પ્રોજેક્ટ અને હું વિનંતી ખેંચો, જ્યાં તમે જોઈ શકો છો કે મેં શું સુધાર્યું/ ઉમેર્યું છે.
સૌને વિકાસની શુભકામનાઓ)

સોર્સ: www.habr.com