Groetnis, kameraden. Moai op myn combat tsjinners rint sûnt 2006 en oer de jierren fan syn administraasje haw ik in protte konfiguraasjes en sjabloanen sammele. Ik priizge nginx in protte en op ien of oare manier die bliken dat ik sels ek in nginx-hub begon op 'e hub, pronk mei m/
Freonen fregen my om in ûntwikkelingsbuorkerij foar har op te setten, en ynstee fan myn spesifike sjabloanen te slepen, tocht ik oan in nijsgjirrich projekt , dy't konfiguraasjes op 'e planken ferspraat en alles taret foar lit fersiferje, ensfh. Ik tocht, wêrom net? Ik wie lykwols lilk troch it feit dat nginxconfig my biedt om it zip-argyf yn 'e browser te downloaden, sûnder dat ik it direkt nei de server kin uploade mei wget/fetch/curl. Wat ûnsin, wêrom haw ik it nedich yn 'e browser, ik haw it nedich op' e tsjinner fan 'e konsole. Lulk gie ik nei github om de guts fan it projekt te sjen, wat late ta syn foarke en, as gefolch, in pull-fersyk. Dêr soe ik net oer skriuwe as it net nijsgjirrich wie 😉
Fansels, foardat ik yn 'e boarnen grave, seach ik nei wêr't Chrome it generearre zip-argyf mei konfiguraasjes lûkt, en dêr wachte in adres begjinnend mei "blob:" op my, oeps. It is al dúdlik wurden dat de tsjinst ûnderweis neat genereart, yn feite wurdt it allegear dien troch js. Ja, it zip-argyf wurdt generearre troch de kliïnt, browser en javascript sels. Dy. de skientme is dat it projekt kin gewoan wurde bewarre as in html-side, upload nei guon en it sil wurkje) Dit is in hiel grappich en nijsgjirrige oplossing, lykwols, it is ferskriklik ûngemaklik foar it opsetten fan tsjinners, yn feite, krekt foar wat dit projekt is makke. Download it generearre argyf mei in browser, en oermeitsje it dan nei de server mei nc ... yn 2019? Ik stelde mysels de taak om in manier te finen om de resultearjende konfiguraasje direkt nei de tsjinner te downloaden.
Nei it forkearjen fan it projekt begon ik te tinken oer wat myn opsjes wiene. De opjefte waard yngewikkeld troch it feit dat ik net ôfwykje woe fan de betingst dat it projekt in suver front-end bliuwe soe, sûnder in efterkant. Fansels soe de ienfâldichste oplossing wêze om nodejs op te lûken en it te twingen om in argyf te generearjen mei konfiguraasjes mei direkte keppelings.
Eins wiene d'r net folle opsjes. Mear krekter kaam der mar ien yn 't sin. Wy moatte de konfiguraasjes ynstelle en in keppeling krije dy't wy kinne kopiearje nei de serverkonsole om in zip-argyf te krijen.
Ferskate tekstbestannen yn it resultearjende zip-argyf weagen nochal wat, letterlik in pear kilobytes. De foar de hân lizzende oplossing wie om de base64-string te krijen fan it generearre zip-argyf en it yn 'e buffer te smiten, wylst op' e server mei it kommando yn 'e konsole
echo 'base64string' | base64 --decode > config.zipwy kinne itselde zip-bestân oanmeitsje.
waard skreaun yn AngularJS, ik kin my net iens foarstelle hokker kilometers koade nedich wêze soe as de auteur gjin reaktyf js-ramt keazen hie. Mar ik kin my perfoarst yntinke hoefolle ienfâldiger en moaier dit alles koe wurde útfierd yn VueJS, hoewol't dit is in folslein oar ûnderwerp.
Yn 'e projektboarnen sjogge wy in metoade foar it generearjen fan in zip-argyf:
$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',
});
};
alles is frij simpel, mei help fan de bibleteek In zip wurdt oanmakke dêr't de konfiguraasje triemmen wurde pleatst. Nei it meitsjen fan it zip-argyf, fiert js it nei de browser mei de bibleteek :
saveAs(content, 'nginxconfig.io-' + $scope.getDomains().join(',') + '.zip');
wêryn ynhâld it resultearjende blobobjekt is fan it zip-argyf.
Ok, alles wat ik moast dwaan wie in oare knop njonken it tafoegje en as ik derop klikte, soe ik it resultearjende zip-argyf net opslaan yn 'e browser, mar de base64-koade derfan krije. Nei't ik in bytsje omsloech, krige ik 2 metoaden, ynstee fan mar ien 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',
});
};
Lykas jo miskien hawwe opfallen, haw ik de generaasje fan it zip-argyf sels ferpleatst nei de privee generearjeZip-metoade, ensfh. Dit is AngularJS, en de auteur sels hâldt fêst oan callbacks en hat it net útfierd troch beloften. downloadZip die noch saveAs as útfier, wylst downloadBase64 wat oars die. Wy meitsje in FileReader-objekt dat by ús kaam yn html5 en is al hielendal foar gebrûk. Wat, op ien kear, in base64-string kin meitsje fan in blob, of leaver, it makket in DataURL-string, mar dit is net sa wichtich foar ús, om't DataURL befettet krekt wat wy nedich binne. Bingo, in bytsje snag wachte my doe't ik besocht te setten dit alles yn 'e buffer. De skriuwer brûkte de biblioteek yn it projekt , wêrmei jo te wurkjen mei it klamboerd sûnder flash-objekten, basearre op de selektearre tekst. Yn it earstoan besleat ik myn base64 yn in elemint te setten mei display:none;, mar yn dit gefal koe ik it net op it klamboerd sette omdat der komt gjin skieding foar. Dêrom, ynstee fan display:gjin; Ik die
position: absolute;
z-index: -1;
opacity: 0;
wêrtroch't ik it elemint foar it sicht ferbergje koe en it eins op 'e side litte litte. Voila, de taak wie foltôge, doe't ik op myn knop klikte, waard in rigel lykas dizze yn 'e buffer pleatst:
echo 'base64string' | base64 --decode > config.zipdy't ik gewoan yn 'e konsole op 'e tsjinner plakke en fuortendaliks in zip-argyf krige mei alle konfiguraasjes.
En fansels haw ik in pull-fersyk nei de skriuwer stjoerd, om't ... it projekt is aktyf en libbendich, ik soe graach updates fan de skriuwer sjen wolle en myn eigen knop hawwe) Foar belangstellenden, hjir is it projekt en mysels , wêr kinne jo sjen wat ik korrizjearre / tafoege.
Lokkige ûntwikkeling elkenien)
Boarne: www.habr.com