Generasi configs pikeun nginx, sajarah hiji pamundut tarikan

Salam, sobat. Éndah dina server tempur kuring nginx geus ngajalankeun saprak 2006 sarta leuwih taun administrasi na Kuring geus akumulasi loba configs na template. Kuring muji nginx pisan jeung kumaha bae tétéla yén kuring malah ngamimitian hub nginx on hub, teuing, pamer m /
Babaturan naroskeun kuring pikeun nyetél kebon pangembangan pikeun aranjeunna, sareng tibatan nyered témplat khusus kuring, kuring émut proyék anu pikaresepeun. nginxconfig.io, nu scatters configs dina rak jeung prepares sagalana pikeun ngidinan encrypt, jsb. Teu sangka, naha henteu? Najan kitu, kuring ieu infuriated ku kanyataan yén nginxconfig nawarkeun kuring pikeun ngundeur arsip pos kana browser nu, tanpa sahingga kuring unggah eta langsung ka server maké wget / fetch / curl. Naon omong kosong, naha Abdi peryogi eta dina browser nu, Abdi peryogi eta dina server ti konsol nu. Ambek, kuring indit ka github ningali nyali proyek, nu ngarah ka garpu na, salaku hasilna, pamundut tarikan. Anu kuring moal nyerat upami éta henteu pikaresepeun 😉

Tangtosna, sateuacan ngali sumberna, kuring ningali dimana Chrome narik arsip pos anu dibangkitkeun kalayan konfigurasi, sareng aya alamat anu dimimitian ku "blob:" ngantosan kuring, oops. Parantos jelas yén jasa éta henteu ngahasilkeun nanaon sapanjang jalan, kanyataanna, éta sadayana dilakukeun ku js. Mémang, arsip pos dihasilkeun ku klien, browser, sareng JavaScript sorangan. Jelema. kageulisan éta proyék nginxconfig.io ngan saukur bisa disimpen salaku kaca html, diunggah ka sababaraha narod.ru sarta eta bakal dianggo) Ieu leyuran pisan lucu jeung metot, kumaha oge, éta pisan merenah pikeun nyetél server, kanyataanna, persis keur naon proyék ieu dijieun. Unduh arsip anu dibangkitkeun nganggo browser, teras transfer ka server nganggo nc... dina 2019? Kuring nangtukeun sorangan tugas manggihan cara pikeun ngundeur config hasilna langsung ka server.
Saatos ngajalin proyek, kuring mimiti mikir ngeunaan naon pilihan kuring. Tugasna pajeulit ku kanyataan yén kuring henteu hoyong nyimpang tina kaayaan yén proyék éta kedah tetep payun-tungtung murni, tanpa tonggong-tungtung. Tangtosna, solusi pangbasajanna nyaéta narik nodejs sareng maksakeun pikeun ngahasilkeun arsip kalayan konfigurasi nganggo tautan langsung.
Sabenerna, teu aya loba pilihan. Leuwih tepat, ngan hiji datang ka pikiran. Urang kedah nyetél konfigurasi sareng kéngingkeun tautan anu tiasa urang nyalin kana konsol server pikeun kéngingkeun arsip pos.
Sababaraha file téks dina arsip pos anu dihasilkeun beuratna rada saeutik, hartina sababaraha kilobytes. Solusi anu écés nyaéta kéngingkeun senar base64 tina arsip pos anu dibangkitkeun sareng buang kana panyangga, sedengkeun dina server nganggo paréntah dina konsol.

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

urang tiasa ngadamel file pos anu sami ieu.

nginxconfig.io ieu ditulis dina AngularJS, abdi malah teu tiasa ngabayangkeun naon kilométer kode bakal geus diperlukeun lamun pangarang geus teu dipilih kerangka js réaktif. Tapi kuring sampurna bisa ngabayangkeun sabaraha basajan tur leuwih geulis sadayana ieu bisa dilaksanakeun dina VueJS, sanajan ieu topik sagemblengna béda.
Dina sumber proyék kami ningali metode pikeun ngahasilkeun arsip pos:

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

sagalana geus cukup basajan, ngagunakeun perpustakaan jszip A zip dijieun dimana file konfigurasi disimpen. Sanggeus nyieun arsip pos, JS eupan ka browser ngagunakeun perpustakaan FileSaver.js:

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

dimana eusi mangrupa obyék blob hasilna tina arsip pos.

Ok, sadaya anu kuring kedah laksanakeun nyaéta nambihan tombol anu sanés di gigireunana sareng nalika kuring diklik, kuring henteu bakal ngahémat arsip pos anu hasilna kana browser, tapi kéngingkeun kode base64 ti dinya. Saatos nguriling sakedik, kuring ngagaduhan 2 metode, sanés ngan ukur hiji 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',
	});
};

Sakumaha anjeun tiasa tingali, kuring ngalihkeun generasi arsip pos sorangan kana metodeu generateZip swasta, sareng saterasna. Ieu AngularJS, sareng panulis nyalira nempel kana callbacks sareng henteu ngalaksanakeunana ngalangkungan janji. downloadZip masih ngalakukeun saveAs salaku kaluaran, sedengkeun downloadBase64 ngalakukeun hal anu rada béda. Urang nyieun hiji obyék FileReader nu datang ka kami di html5 sarta geus cukup diaksés pikeun pamakéan. Anu, dina hiji waktos, tiasa ngadamel string base64 tina gumpalan, atanapi langkungna, éta ngadamel string DataURL, tapi ieu henteu penting pisan pikeun urang, sabab DataURL ngandung kahayang urang kudu. Bingo, a snag saeutik ngantosan kuring nalika kuring diusahakeun nempatkeun sagala ieu dina panyangga nu. Panulis ngagunakeun perpustakaan dina proyék éta clipboard, anu ngamungkinkeun anjeun damel sareng clipboard tanpa obyék flash, dumasar kana téks anu dipilih. Mimitina, kuring mutuskeun pikeun nempatkeun base64 kuring dina unsur kalayan tampilan: teu aya;, tapi dina hal ieu kuring henteu tiasa nempatkeun éta dina clipboard sabab euweuh separation lumangsung. Ku alatan éta, tinimbang tampilan: taya; kuring nu migawe

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

nu diwenangkeun kuring duanana nyumputkeun unsur ti tempoan tur sabenerna ninggalkeun eta dina kaca. Voila, tugas parantos réngsé, nalika kuring ngaklik tombol kuring, garis sapertos ieu disimpen dina panyangga:

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

nu kuring ngan saukur nempelkeun kana konsol dina server jeung langsung narima arsip pos kalawan sagala configs.
Sareng, tangtosna, kuring ngirim pamundut tarik ka panulis, sabab ... proyékna aktip sareng meriah, abdi hoyong ningali apdet ti pangarang sareng gaduh tombol sorangan) Kanggo anu kabetot, ieu mangrupikeun garpu kuring proyék jeung kuring sorangan narik pamundut, dimana anjeun tiasa ningali naon atuh dilereskeun / ditambahkeun.
Wilujeng ngembangkeun sadayana)

sumber: www.habr.com