Pagbati, mga kasama. Maganda sa aking mga server ng labanan ay tumatakbo mula pa noong 2006 at sa paglipas ng mga taon ng administrasyon nito ay marami akong naipon na mga config at template. Pinuri ko ng husto ang nginx at kahit papaano ay nagsimula na rin ako ng nginx hub sa hub, pakitang-tao m/
Hiniling sa akin ng mga kaibigan na mag-set up ng development farm para sa kanila, at sa halip na i-drag sa kanila ang aking mga partikular na template, naalala ko ang isang kawili-wiling proyekto. , na nagkakalat ng mga config sa mga istante at inihahanda ang lahat para sa lets encrypt, atbp. Naisip ko, bakit hindi? Gayunpaman, nagalit ako sa katotohanan na ang nginxconfig ay nag-aalok sa akin na i-download ang zip archive sa browser, nang hindi pinapayagan akong i-upload ito nang direkta sa server gamit ang wget/fetch/curl. Anong kalokohan, bakit kailangan ko ito sa browser, kailangan ko ito sa server mula sa console. Galit, pumunta ako sa github upang makita ang lakas ng loob ng proyekto, na humantong sa tinidor nito at, bilang isang resulta, isang kahilingan sa paghila. Na hindi ko isusulat kung hindi kawili-wili π
Siyempre, bago maghukay sa mga pinagmulan, tiningnan ko kung saan kinukuha ng Chrome ang nabuong zip archive na may mga config, at doon naghihintay sa akin ang isang address na nagsisimula sa "blob:", oops. Ito ay naging malinaw na ang serbisyo ay hindi bumubuo ng anumang bagay sa kahabaan ng paraan, sa katunayan, lahat ng ito ay ginagawa ng js. Sa katunayan, ang zip archive ay nabuo ng kliyente, browser, at javascript mismo. Yung. ang ganda naman ng project maaaring i-save lamang bilang isang html na pahina, na na-upload sa ilan at ito ay gagana) Ito ay isang napaka-nakakatawa at kawili-wiling solusyon, gayunpaman, ito ay lubhang hindi maginhawa para sa pag-set up ng mga server, sa katunayan, eksakto para sa kung ano ang proyektong ito ay nilikha. I-download ang nabuong archive gamit ang isang browser, at pagkatapos ay ilipat ito sa server gamit ang nc... sa 2019? Itinakda ko sa aking sarili ang gawain ng paghahanap ng paraan upang i-download ang resultang config nang direkta sa server.
Matapos i-forking ang proyekto, nagsimula akong mag-isip tungkol sa kung ano ang aking mga pagpipilian. Ang gawain ay kumplikado sa pamamagitan ng katotohanan na hindi ko nais na lumihis mula sa kondisyon na ang proyekto ay dapat manatiling isang purong front-end, nang walang anumang back-end. Siyempre, ang pinakasimpleng solusyon ay ang paghila ng mga nodej at pilitin itong bumuo ng isang archive na may mga config gamit ang mga direktang link.
Sa totoo lang, walang maraming pagpipilian. Mas tiyak, isa lang ang pumasok sa isip ko. Kailangan naming i-set up ang mga config at kumuha ng link na maaari naming kopyahin sa server console para makakuha ng zip archive.
Ilang mga text file sa nagreresultang zip archive ay medyo tumitimbang, literal na ilang kilobytes. Ang halatang solusyon ay upang makuha ang base64 string mula sa nabuong zip archive at itapon ito sa buffer, habang nasa server na may command sa console
echo 'base64string' | base64 --decode > config.zipmaaari naming gawin itong parehong zip file.
ay isinulat sa AngularJS, hindi ko maisip kung anong kilometro ng code ang kakailanganin kung ang may-akda ay hindi pumili ng isang reaktibong js framework. Ngunit lubos kong naiisip kung gaano mas simple at mas maganda ang lahat ng ito ay maaaring ipatupad sa VueJS, bagama't ito ay isang ganap na naiibang paksa.
Sa mga mapagkukunan ng proyekto nakikita namin ang isang paraan para sa pagbuo ng isang zip archive:
$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',
});
};
ang lahat ay medyo simple, gamit ang library Ang isang zip ay nilikha kung saan inilalagay ang mga file ng pagsasaayos. Pagkatapos gawin ang zip archive, pinapakain ito ni js sa browser gamit ang library :
saveAs(content, 'nginxconfig.io-' + $scope.getDomains().join(',') + '.zip');
kung saan ang content ay ang resultang blob object ng zip archive.
Ok, ang kailangan ko lang gawin ay magdagdag ng isa pang button sa tabi nito at kapag na-click ko ito, hindi ko ise-save ang resultang zip archive sa browser, ngunit kunin ang base64 code mula dito. Pagkatapos ng kaunting kalikot, nakakuha ako ng 2 pamamaraan, sa halip na isang downloadZip lang:
$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',
});
};
Tulad ng napansin mo, inilipat ko ang henerasyon ng zip archive mismo sa pribadong paraan ng generateZip, at iba pa. Ito ay AngularJS, at ang may-akda mismo ay nananatili sa mga callback at hindi ipinatupad ito sa pamamagitan ng mga pangako. Ang downloadZip ay nag-saveAs pa rin bilang isang output, habang ang downloadBase64 ay gumawa ng isang bagay na bahagyang naiiba. Lumilikha kami ng isang bagay na FileReader na dumating sa amin sa html5 at medyo para gamitin. Na, sa isang pagkakataon, ay maaaring gumawa ng base64 string mula sa isang blob, o sa halip, ito ay gumagawa ng isang DataURL string, ngunit ito ay hindi napakahalaga para sa amin, dahil Ang DataURL ay naglalaman ng eksaktong kailangan namin. Bingo, isang maliit na sagabal ang naghihintay sa akin noong sinubukan kong ilagay ang lahat ng ito sa buffer. Ginamit ng may-akda ang aklatan sa proyekto , na nagbibigay-daan sa iyong magtrabaho kasama ang clipboard nang walang mga flash object, batay sa napiling text. Sa una, nagpasya akong ilagay ang aking base64 sa isang elemento na may display:none;, ngunit sa kasong ito hindi ko ito mailagay sa clipboard dahil walang paghihiwalay na nagaganap. Samakatuwid, sa halip na display:none; ginawa ko
position: absolute;
z-index: -1;
opacity: 0;
na nagpapahintulot sa akin na parehong itago ang elemento mula sa view at aktwal na iwanan ito sa pahina. Voila, natapos na ang gawain, nang mag-click ako sa aking pindutan, isang linyang tulad nito ang inilagay sa buffer:
echo 'base64string' | base64 --decode > config.zipna pasimple kong idinikit sa console sa server at nakatanggap kaagad ng zip archive kasama ang lahat ng config.
At, siyempre, nagpadala ako ng pull request sa may-akda, dahil... aktibo at masigla ang proyekto, gusto kong makakita ng mga update mula sa may-akda at magkaroon ng aking sariling pindutan) Para sa mga interesado, narito ito proyekto at ang kanyang sarili , kung saan makikita mo kung ano ang itinama/idinagdag ko.
Maligayang pag-unlad sa lahat)
Pinagmulan: www.habr.com