Nginx-asetusten luominen, yhden vetopyynnön historia

Tervehdys, toverit. Kaunis taistelupalvelimillani Nginx on ollut käynnissä vuodesta 2006 ja sen hallintovuosien aikana olen kerännyt paljon konfiguraatioita ja malleja. Ylistin nginxiä paljon ja jotenkin kävi niin, että aloitin jopa nginx-keskittimen hubiin, näytä m/
Ystävät pyysivät minua perustamaan heille kehitystilan, ja sen sijaan, että olisin vetänyt heille omia mallejani, muistin mielenkiintoisen projektin nginxconfig.io, joka hajottaa konfiguraatioita hyllyille ja valmistelee kaiken salausta varten jne. Ajattelin, miksi ei? Minua kuitenkin raivostutti se, että nginxconfig tarjoaa minulle ladata zip-arkiston selaimeen antamatta minun ladata sitä suoraan palvelimelle käyttämällä wget/fetch/curl-toimintoa. Mitä hölynpölyä, miksi tarvitsen sitä selaimessa, tarvitsen sen palvelimelle konsolista. Vihaisena menin githubiin katsomaan projektin sisua, joka johti sen haarukkaan ja sen seurauksena vetopyyntöön. Mistä en kirjoittaisi, jos se ei olisi kiinnostavaa 😉

Tietenkin ennen lähteisiin kaivaamista katsoin, mistä Chrome vetää luodun zip-arkiston asetusten kanssa, ja siellä minua odotti "blob:"-alkuinen osoite, oho. On jo käynyt selväksi, että palvelu ei tuota matkan varrella mitään, itse asiassa sen kaiken tekee js. Itse asiassa asiakas, selain ja javascript luovat zip-arkiston. Nuo. kauneus on siinä, että projekti nginxconfig.io voidaan yksinkertaisesti tallentaa html-sivuksi ja ladata joillekin narod.ru ja se toimii) Tämä on erittäin hauska ja mielenkiintoinen ratkaisu, mutta se on hirveän hankalaa palvelinten määrittämisessä, itse asiassa juuri sitä varten, mitä tämä projekti luotiin. Lataa luotu arkisto selaimella ja siirrä se sitten palvelimelle nc...:n avulla vuonna 2019? Asetin itselleni tehtävän löytää tapa ladata tuloksena oleva konfiguraatio suoraan palvelimelle.
Projektin haaroittamisen jälkeen aloin miettiä vaihtoehtojani. Tehtävää vaikeutti se, että en halunnut poiketa ehdosta, jonka mukaan projektin tulisi pysyä puhtaana front-endinä, ilman taustaa. Tietenkin yksinkertaisin ratkaisu olisi vetää ylös nodejs ja pakottaa se luomaan arkisto konfiguraatioineen suorien linkkien avulla.
Itse asiassa vaihtoehtoja ei ollut paljon. Tarkemmin sanottuna vain yksi tuli mieleen. Meidän on määritettävä asetukset ja hankittava linkki, jonka voimme kopioida palvelinkonsoliin saadaksemme zip-arkiston.
Useat tekstitiedostot tuloksena syntyneessä zip-arkistossa painoivat melko vähän, kirjaimellisesti muutaman kilotavun. Ilmeinen ratkaisu oli saada base64-merkkijono luodusta zip-arkistosta ja heittää se puskuriin ollessaan palvelimella konsolin komennolla

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

voisimme luoda saman zip-tiedoston.

nginxconfig.io on kirjoitettu AngularJS:llä, en voi edes kuvitella, kuinka monta kilometriä koodia olisi tarvittu, jos kirjoittaja ei olisi valinnut reaktiivista js-kehystä. Mutta voin täysin kuvitella kuinka paljon yksinkertaisempaa ja kauniimpaa tämä kaikki voitaisiin toteuttaa VueJS:ssä, vaikka tämä onkin täysin eri aihe.
Projektiresursseissa näemme menetelmän zip-arkiston luomiseksi:

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

kaikki on melko yksinkertaista kirjaston avulla jszip Luodaan zip-tiedosto, johon määritystiedostot sijoitetaan. Zip-arkiston luomisen jälkeen js syöttää sen selaimeen kirjaston avulla FileSaver.js:

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

jossa sisältö on zip-arkiston tuloksena oleva blob-objekti.

Ok, minun piti vain lisätä toinen painike sen viereen ja sitä napsauttaessa en tallentanut tuloksena olevaa zip-arkistoa selaimeen, vaan sain siitä base64-koodin. Hieman puuhailun jälkeen sain 2 tapaa yhden downloadZipin sijaan:

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

Kuten olet ehkä huomannut, siirsin itse zip-arkiston luomisen yksityiseen generateZip-menetelmään ja niin edelleen. Tämä on AngularJS, ja kirjoittaja itse pitää kiinni takaisinkutsuista eikä toteuttanut sitä lupausten kautta. downloadZip teki silti saveAs:n ulostulona, ​​kun taas downloadBase64 teki jotain hieman erilaista. Luomme FileReader-objektin, joka tuli meille html5:ssä ja on jo melkoinen saatavilla käytettäväksi. Joka voi kerralla tehdä base64-merkkijonon blobista tai pikemminkin DataURL-merkkijonon, mutta tämä ei ole meille niin tärkeää, koska DataURL sisältää juuri sen, mitä tarvitsemme. Bingo, pieni pulma odotti minua, kun yritin laittaa tämän kaiken puskuriin. Kirjoittaja käytti kirjastoa projektissa leikepöydälle, jonka avulla voit työskennellä leikepöydällä ilman flash-objekteja valitun tekstin perusteella. Aluksi päätin laittaa base64:ni elementtiin, jossa on display:none;, mutta tässä tapauksessa en voinut laittaa sitä leikepöydälle, koska eroa ei tapahdu. Siksi display:none; minä tein

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

jolloin pystyin piilottamaan elementin näkyvistä ja jättämään sen sivulle. Voila, tehtävä oli suoritettu, kun klikkasin painikettani, puskuriin laitettiin tällainen rivi:

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

jonka yksinkertaisesti liitin palvelimen konsoliin ja sain heti zip-arkiston, jossa oli kaikki asetukset.
Ja tietysti lähetin vetopyynnön kirjoittajalle, koska... projekti on aktiivinen ja vilkas, haluaisin nähdä päivityksiä kirjoittajalta ja omaa nappia) Kiinnostuneille tässä minun haarukkani projektia ja itseään vedä pyyntö, josta näet mitä korjasin/lisäsin.
Hyvää kehitystä kaikille)

Lähde: will.com