Tervitused, seltsimehed. Ilus minu võitlusserverites on töötanud alates 2006. aastast ja selle haldamise aastate jooksul on mul kogunenud palju konfiguratsioone ja malle. Kiitsin nginxi palju ja kuidagi tuli välja, et panin isegi nginxi hubi rummu peale käima, näita m/
Sõbrad palusid mul luua neile arendustalu ja selle asemel, et lohistada neile oma konkreetseid malle, meenus mulle huvitav projekt , mis konfigureerib riiulitele laiali ja valmistab kõik ette, et saaks krüpteerida jne. Mõtlesin, et miks mitte? Mind ajas aga vihaseks tõsiasi, et nginxconfig pakub mulle zip-arhiivi brauserisse allalaadimist, lubamata mul seda otse serverisse üles laadida kasutades wget/fetch/curl. Mis jama, milleks seda brauseris vaja, serverisse on vaja konsoolist. Vihasena läksin githubisse, et näha projekti sisemust, mis viis selle hargini ja selle tulemusena tõmbamistaotluseni. Millest ma ei kirjutaks, kui see poleks huvitav 😉
Muidugi vaatasin enne allikatesse süvenemist, kust Chrome genereeritud zip-arhiivi koos konfiguratsioonidega tõmbab ja seal ootas mind ees “blob:”-ga algav aadress, oih. Juba on selgunud, et teenus ei genereeri teel midagi, tegelikult teeb seda kõike js. Tõepoolest, zip-arhiivi loovad klient, brauser ja JavaScript ise. Need. ilu on selles, et projekt saab lihtsalt html-lehena salvestada, mõnele üles laadida ja see töötab) See on väga naljakas ja huvitav lahendus, kuid serverite seadistamiseks on see kohutavalt ebamugav, tegelikult just selle projekti jaoks. Kas laadida loodud arhiiv brauseriga alla ja seejärel 2019. aastal nc... abil serverisse üle kanda? Seadsin endale ülesandeks leida viis, kuidas saadud konfiguratsioon otse serverisse alla laadida.
Pärast projekti alustamist hakkasin mõtlema, millised on minu võimalused. Ülesande tegi keeruliseks see, et ma ei tahtnud kõrvale kalduda tingimusest, et projekt peaks jääma puhtaks front-end’iks, ilma igasuguse back-endita. Lihtsaim lahendus oleks muidugi tõmmata nodejs üles ja sundida seda otselinkide abil konfiguratsioonidega arhiivi genereerima.
Tegelikult ei olnud palju valikuid. Täpsemalt tuli meelde ainult üks. Peame seadistama konfiguratsioonid ja hankima lingi, mille saame kopeerida serverikonsooli, et saada ZIP-arhiiv.
Mitmed tekstifailid saadud ZIP-arhiivis kaalusid üsna vähe, sõna otseses mõttes paar kilobaiti. Ilmselge lahendus oli saada genereeritud ZIP-arhiivist base64 string ja visata see puhvrisse, olles samal ajal serveris koos käsuga konsoolis
echo 'base64string' | base64 --decode > config.zipsaame luua sama zip-faili.
oli kirjutatud AngularJS-is, siis ma isegi ei kujuta ette, mitu kilomeetrit koodi oleks vaja olnud, kui autor poleks valinud reaktiivset js-i raamistikku. Aga ma kujutan suurepäraselt ette, kui palju lihtsamalt ja ilusamalt seda kõike VueJS-is rakendada saaks, kuigi see on hoopis teine teema.
Projekti ressurssides näeme meetodit ZIP-arhiivi loomiseks:
$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',
});
};
raamatukogu kasutades on kõik üsna lihtne Konfiguratsioonifailide asukohta luuakse ZIP-fail. Pärast ZIP-arhiivi loomist edastab js selle teeki kasutades brauserisse :
saveAs(content, 'nginxconfig.io-' + $scope.getDomains().join(',') + '.zip');
kus sisu on ZIP-arhiivi tulemuseks olev blob-objekt.
Ok, polnud vaja teha muud, kui lisada sinna kõrvale veel üks nupp ja sellele vajutades ei salvestaks ma tekkinud zip-arhiivi brauserisse, vaid saan sealt base64 koodi. Pärast natuke askeldamist sain ühe downloadZipi asemel kaks meetodit:
$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',
});
};
Nagu olete ehk märganud, viisin zip-arhiivi genereerimise üle privaatsele genereerimismeetodile jne. See on AngularJS ja autor ise jääb tagasihelistamiste juurde ega rakendanud seda lubaduste kaudu. downloadZip tegi siiski väljundina saveAs'i, samas kui downloadBase64 tegi midagi veidi teistsugust. Loome FileReaderi objekti, mis jõudis meieni html5-s ja on juba päris kasutamiseks. Mis võib korraga teha blobist base64 stringi või õigemini DataURL stringi, aga see pole meie jaoks nii oluline, sest DataURL sisaldab täpselt seda, mida vajame. Bingo, väike tõrks ootas mind ees, kui proovisin seda kõike puhvrisse panna. Autor kasutas projektis raamatukogu , mis võimaldab valitud teksti põhjal töötada lõikepuhvriga ilma välklampideta. Esialgu otsustasin panna oma base64 elemendile display:none;, kuid antud juhul ei saanud ma seda lõikelauale panna, sest eraldumist ei toimu. Seetõttu asemel display:none; ma tegin
position: absolute;
z-index: -1;
opacity: 0;
mis võimaldas mul nii elemendi vaate eest peita kui ka tegelikult lehele jätta. Voila, ülesanne sai täidetud, kui oma nupule vajutasin, pandi puhvrisse selline rida:
echo 'base64string' | base64 --decode > config.zipmille kleepisin lihtsalt serveri konsooli ja sain kohe zip-arhiivi kõigi seadistustega.
Ja loomulikult saatsin autorile tõmbamissoovi, sest... projekt on aktiivne ja elav, soovin näha autori uuendusi ja oma nuppu) Huvilistele siin projekt ja ta ise , kus on näha, mida parandasin/lisasin.
Head arengut kõigile)
Allikas: www.habr.com