Famoronana configs ho an'ny nginx, tantaran'ny fangatahana fisintonana iray

Miarahaba ry namana. Tsara tarehy amin'ny mpizara ady amiko nginx efa nanomboka tamin'ny 2006 ary nandritra ny taona maro nitantanana azy dia nanangona configs sy templates maro aho. Nidera an'i nginx be aho ary toa nanombohako ny hub nginx teo amin'ny hub koa, mampiseho m/
Nangataka ahy ny namako mba hanangana toeram-pambolena fampandrosoana ho azy ireo, ary raha tokony hisintona azy ireo ny môdely manokana dia tadidiko ny tetikasa iray mahaliana. nginxconfig.io, izay manaparitaka ny configs eo amin'ny talantalana ary manomana ny zava-drehetra ho an'ny lets encryption, sns. Nieritreritra aho hoe nahoana? Na izany aza, tezitra aho noho ny nanoloran'ny nginxconfig ahy hisintona ny arisiva zip ao amin'ny navigateur, nefa tsy mamela ahy hampiditra azy mivantana amin'ny mpizara mampiasa wget/fetch/curl. Inona no tsy misy dikany, nahoana aho no mila izany amin'ny navigateur, mila izany amin'ny mpizara avy amin'ny console aho. Tezitra aho, nandeha tany amin'ny github mba hijery ny tsinain'ilay tetikasa, izay nitarika ho amin'ny fiforonany ary, vokatr'izany, fangatahana fisintonana. Izay tsy ho soratako raha tsy mahaliana 😉

Famoronana configs ho an'ny nginx, tantaran'ny fangatahana fisintonana iray

Mazava ho azy, alohan'ny handinihana ireo loharano, dia nijery ny toerana nisintonan'i Chrome ny arsiva zip misy configs aho, ary misy adiresy manomboka amin'ny "blob:" niandry ahy, oops. Efa hita mazava fa ny serivisy dia tsy miteraka na inona na inona eny an-dalana, raha ny marina, ny js rehetra dia manao izany. Eny tokoa, ny arsiva zip dia novokarin'ny mpanjifa, navigateur ary javascript mihitsy. Ireo. ny hatsarana dia ny tetikasa nginxconfig.io azo tehirizina fotsiny ho pejy html, ampidirina amin'ny sasany narod.ru ary hahomby izany) Vahaolana tena mahatsikaiky sy mahaliana ity, na izany aza, dia tsy dia mahasosotra loatra amin'ny fametrahana mpizara, raha ny marina, ho an'ny namoronana ity tetikasa ity. Ampidino miaraka amin'ny navigateur ny arisiva novokarina, ary avy eo afindra amin'ny mpizara mampiasa nc... amin'ny 2019? Nametraka ny tenako aho hitady fomba hisintonana mivantana ny config vokatr'izany mankany amin'ny mpizara.
Taorian'ny nandraisako ilay tetikasa dia nanomboka nieritreritra izay safidiko aho. Sarotra ny asa satria tsy te hivily amin'ny fepetra aho fa ny tetikasa dia tokony hijanona ho eo anoloana, tsy misy ambadika. Mazava ho azy fa ny vahaolana tsotra indrindra dia ny misintona nodejs ary manery azy hamorona arisiva misy configs mampiasa rohy mivantana.
Raha ny marina, tsy nisy safidy maro. Raha ny marimarina kokoa dia iray ihany no tonga tao an-tsaina. Mila manangana ny configs isika ary mahazo rohy azo adika amin'ny console server mba hahazoana arsiva zip.
Somary lanja kely ny rakitra an-tsoratra maromaro ao amin'ny arisiva zip, ara-bakiteny kilobytes vitsivitsy. Ny vahaolana mazava dia ny maka ny tady base64 avy amin'ny arsiva zip noforonina ary manipy izany ao anaty buffer, raha eo amin'ny mpizara miaraka amin'ny baiko ao amin'ny console.

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

afaka mamorona io rakitra zip io ihany izahay.

nginxconfig.io dia nosoratana tao amin'ny AngularJS, tsy azoko an-tsaina akory hoe firy kilometatra ny kaody notakiana raha tsy nisafidy framework js reactive ny mpanoratra. Saingy azoko an-tsaina tsara hoe hatraiza ny fomba tsotra sy tsara kokoa azo ampiharina amin'ny VueJS, na dia lohahevitra hafa tanteraka aza izany.
Ao amin'ny loharanon'ny tetikasa dia mahita fomba hamoronana arisiva zip isika:

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

ny zava-drehetra dia tena tsotra, mampiasa ny trano famakiam-boky jszip Ny zip dia noforonina izay ametrahana ny rakitra fikirakirana. Rehefa avy namorona ny zip archive, js dia mamahana azy amin'ny navigateur mampiasa ny tranomboky FileSaver.js:

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

izay ny votoaty dia ny zavatra blob vokatry ny rakitra zip.

Ok, ny hany tsy maintsy nataoko dia ny manisy bokotra iray hafa eo akaikiny ary rehefa manindry azy aho dia tsy ho voatahiry ao amin'ny navigateur ny arsiva zipo, fa alao ny code base64. Rehefa avy nivezivezy kely aho dia nahazo fomba 2 fa tsy downloadZip iray monja:

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

Araka ny mety ho tsikaritrareo dia nafindrako tamin'ny fomba manokana generateZip ny famoronana ny arsiva zip, sy ny sisa. Ity no AngularJS, ary ny mpanoratra mihitsy no mifikitra amin'ny antso an-tariby ary tsy nampihatra izany tamin'ny alàlan'ny fampanantenana. downloadZip dia mbola nanao saveAs ho toy ny vokatra, raha ny downloadBase64 dia nanao zavatra hafa kely. Mamorona zavatra FileReader izay tonga taminay tao amin'ny html5 izahay ary efa tena azo idirana ho ampiasaina. Izay, amin'ny fotoana iray, dia afaka manamboatra tady base64 avy amin'ny blob, na ny marimarina kokoa, manao tady DataURL, saingy tsy dia zava-dehibe ho antsika izany, satria DataURL dia mirakitra izay tena ilaintsika. Bingo, nisy snag kely niandry ahy rehefa nanandrana nametraka izany rehetra izany tao amin'ny buffer aho. Nampiasa ny tranomboky tamin'ny tetikasa ny mpanoratra clipboardjs, izay ahafahanao miasa miaraka amin'ny clipboard tsy misy zavatra tselatra, mifototra amin'ny lahatsoratra voafantina. Tany am-boalohany dia nanapa-kevitra ny hametraka ny base64 aho amin'ny singa iray misy display: none;, saingy tamin'ity tranga ity dia tsy afaka nametraka izany tao amin'ny takelaka aho satria tsy misy fisarahana mitranga. Noho izany, raha tokony aseho: tsy misy; nataoko

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

izay nahafahako nanafina ilay singa tsy ho hitan'ny maso ary tena namela azy teo amin'ny pejy. Voila, vita ny asa, rehefa nanindry ny bokotra aho dia nisy tsipika toy izao napetraka tao amin'ny buffer:

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

izay napetako fotsiny tao amin'ny console tao amin'ny server ary avy hatrany dia nahazo arsiva zip miaraka amin'ny config rehetra.
Ary, mazava ho azy, nandefa fangatahana misintona ho an'ny mpanoratra aho, satria ... mavitrika sy mavitrika ny tetikasa, te-hahita fanavaozana avy amin'ny mpanoratra aho ary hanana ny bokotra manokana) Ho an'ireo liana dia indro ary ny fitrebako tetikasa sy ny tenako mangataka fangatahana, izay ahitanao izay nahitsy/nampiako.
Mirary soa ho antsika rehetra)

Famoronana configs ho an'ny nginx, tantaran'ny fangatahana fisintonana iray

Source: www.habr.com

Add a comment