友人は私に彼らのために開発ファームを育てるように私に頼みました、そして、彼らの特定のテンプレートでそれらをドラッグする代わりに、私は面白いプロジェクトnginxconfig.ioを思い出しました。 なぜだと思いましたか？ しかし、nginxconfigがzipアーカイブをブラウザーにダウンロードすることを提供し、wget / fetch / curlを使用してそれをサーバーに直接マージすることを許可しないという事実に激怒しました。 どのようなナンセンス、ブラウザでそれが必要なのか、コンソールからサーバーで必要なのはなぜですか。 怒って、私はgithubに登ってプロジェクトの根性を確認しました。その結果、フォークが発生し、結果としてプルリクエストが発生しました。 それが面白くない場合は書きません;）
もちろん、ソースを選択する前に、クロムが生成されたzipアーカイブを構成でプルする場所から見て、「blob：」で始まるアドレス、oppaを待っていました。 プロセスでは、サービスが何も生成しないことがすでに明らかになっています。実際、jsはこれをすべて実行します。 実際、zipアーカイブはクライアント自体、ブラウザ、javascriptによって生成されます。 つまり 魅力は、 nginxconfig.ioプロジェクトをhtmlページとして保存し、 narod.ruにアップロードするだけで機能することです）これは非常におもしろくて興味深いソリューションですが、実際には、サーバーのセットアップには非常に不便ですこのプロジェクトが作成された目的の。 ブラウザーで生成されたアーカイブをダウンロードし、nc ...を使用してサーバーに転送します... 結果の構成をサーバーに直接ダウンロードする方法を見つけるタスクを自分で設定しました。
プロジェクトを分岐させて、私は自分にどんな選択肢があるか考え始めました。 プロジェクトがバックエンドなしでクリーンなフロントエンドのままであるという条件から逸脱したくないという事実により、タスクは複雑でした。 もちろん、最も簡単な解決策は、nodejsをプルアップし、直接リンク経由で構成を含むアーカイブを生成することです。
実際、多くの選択肢はありませんでした。 より正確には、1つだけが思い浮かびました。 構成を構成し、zipアーカイブを取得するためにサーバーコンソールにコピーできるリンクを取得する必要があります。
結果のzipアーカイブ内のいくつかのテキストファイルは、文字通り数キロバイトのかなりの重量がありました。 明らかな解決策は、生成されたzipアーカイブからbase64文字列を取得してバッファーにスローすることでした。サーバー上ではコンソールのコマンドで
echo 'base64string' | base64 --decode > config.zip
nginxconfig.ioはAngularJSで作成されたため、著者がリアクティブjsフレームワークを選択しなかった場合、何キロメートルのコードが必要になるか想像もできません。 しかし、これをVueJSに実装することがどれほど簡単で美しいかを想像できますが、これはまったく別のトピックです。
プロジェクトリソースには、zipアーカイブを生成する方法があります。
$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', }); };
すべてが非常に簡単です。jszipライブラリを使用すると、構成ファイルが配置される場所にzipが作成されます。 zipアーカイブを作成した後、jsはFileSaver.jsライブラリを使用してそれをブラウザーにフィードします。
saveAs(content, 'nginxconfig.io-' + $scope.getDomains().join(',') + '.zip');
ここで、コンテンツは結果のblob zipアーカイブオブジェクトです。
OK、ボタンの横に別のボタンを追加するだけで、結果のzipアーカイブをブラウザーに保存せずに、base64コードを取得できます。 少しのシャーマニズムの後、1つのdownloadZipの代わりに2つのメソッドを取得しました。
$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', }); };
お気づきかもしれませんが、zipアーカイブの生成をprivate generateZipメソッドに入れました。 これはAngularJSであり、作成者自身がコールバックに準拠しており、約束を通して実装しませんでした。 downloadZipは出力でsaveAsを実行しましたが、downloadBase64は少し異なっていました。 html5で提供されたFileReaderオブジェクトを作成し、すでに使用可能です。 そのうち、base64をblobから文字列にする方法を知っています。より正確にはDataURL文字列を作成しますが、これは私たちにとってそれほど重要ではありません。 DataURLには、まさに必要なものが含まれています。 ビンゴ、これをすべてバッファに入れようとしたとき、ちょっとしたキャッチが私を待っていました。 作成者はプロジェクトでclipboardjsライブラリを使用しました。これにより、選択したテキストに基づいて、Flashオブジェクトなしでクリップボードを操作できます。 最初は、base64をdisplay：noneの要素に配置することにしましたが、その場合、クリップボードに配置できませんでした。 選択は行われません。 したがって、表示の代わりに：none; やった
position: absolute; z-index: -1; opacity: 0;
これにより、要素を目から隠し、実際にページ上に残すことができました。 出来上がり、タスクが完了しました。ボタンをクリックすると、フォームの行がバッファーに配置されました。
echo 'base64string' | base64 --decode > config.zip
サーバーのコンソールに挿入するだけで、すぐにすべての構成を含むzipアーカイブを受け取りました。
もちろん、著者にプルリクエストを投げました。 プロジェクトはアクティブで活気があり、著者からの更新を確認し、自分のボタンを持っています）誰が気にしますか？
元気いっぱいの開発:-)
