nginx の構成の生成、XNUMX つのプル リクエストの履歴

こんにちは、同志の皆さん。 私の戦闘サーバーでは美しいです nginx は 2006 年から実行されており、長年の管理を通じて多くの構成とテンプレートを蓄積してきました。 私は nginx をたくさん褒めましたが、どういうわけかハブ上で nginx ハブも起動していることが判明しました。自慢してください。
友人たちから開発ファームを立ち上げてほしいと頼まれたので、私は特定のテンプレートをドラッグする代わりに、興味深いプロジェクトを思い出しました。 nginxconfig.io、設定を棚に分散させ、暗号化などのためにすべてを準備します。 なぜそうではないのかと思いました。 しかし、nginxconfig が、wget/fetch/curl を使用してサーバーに直接アップロードすることを許可せずに、zip アーカイブをブラウザーにダウンロードすることを提案するという事実に激怒しました。 ナンセンス、なぜブラウザでそれが必要なのですか、コンソールからサーバーでそれが必要です。 腹が立ったので、私はプロジェクトの中身を見るために github に行きました。それがフォークにつながり、その結果プルリクエストにつながりました。 面白くなかったら書きません😉

もちろん、ソースを詳しく調べる前に、Chrome が生成された zip アーカイブを構成でプルする場所を確認しました。そこには、「blob:」で始まるアドレスが私を待っていました。 このサービスが途中で何も生成しないことはすでに明らかになりました。実際、それはすべて js によって行われます。 実際、zip アーカイブはクライアント、ブラウザ、JavaScript 自体によって生成されます。 それらの。 素晴らしいのは、プロジェクトであるということです nginxconfig.io 単純に HTML ページとして保存し、いくつかの場所にアップロードできます。 narod.ru これは非常に面白くて興味深い解決策ですが、実際、まさにこのプロジェクトのために作成されたものであるため、サーバーをセットアップするのに非常に不便です。 生成されたアーカイブをブラウザでダウンロードし、ncを使用してサーバーに転送します...2019年？ 私は、結果の構成をサーバーに直接ダウンロードする方法を見つけるという課題を自分自身に課しました。
プロジェクトを分岐させた後、自分の選択肢は何なのかを考え始めました。 プロジェクトはバックエンドのない純粋なフロントエンドのままであるべきという条件から逸脱したくなかったという事実により、タスクは複雑になりました。 もちろん、最も簡単な解決策は、nodejs を取得し、直接リンクを使用して構成を含むアーカイブを強制的に生成することです。
実際には、選択肢はそれほど多くありませんでした。 正確に言うと、思いついたのはXNUMXつだけでした。 構成をセットアップし、サーバー コンソールにコピーして zip アーカイブを取得できるリンクを取得する必要があります。
結果として得られた zip アーカイブ内のいくつかのテキスト ファイルは、文字通り数キロバイトというかなりの重さになりました。 明らかな解決策は、サーバー上でコンソールのコマンドを実行しながら、生成された zip アーカイブから Base64 文字列を取得してバッファにスローすることでした。

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

これと同じ 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 はライブラリを使用してそれをブラウザーにフィードします。 ファイルセーバー.js:

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

ここで、 content は、zip アーカイブの結果として得られる blob オブジェクトです。

OK、私がしなければならなかったのは、その横に別のボタンを追加し、それをクリックしたときに、結果の zip アーカイブをブラウザに保存せず、そこから Base64 コードを取得することだけでした。 少しいじってみたところ、downloadZip は 2 つだけではなく、XNUMX つの方法が見つかりました。

$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 アーカイブ自体の生成をプライベートのgenerateZip メソッドなどに移動しました。 これは AngularJS であり、作者自身はコールバックにこだわり、Promise を通じて実装しませんでした。 downloadZip は引き続き出力として saveAs を実行しましたが、downloadBase64 は少し異なる動作を行いました。 html5 で提供された FileReader オブジェクトを作成します。 手頃な 使用するために。 これは、一度に BLOB から Base64 文字列を作成することも、むしろ DataURL 文字列を作成することもできますが、これは私たちにとってそれほど重要ではありません。 DataURL には、まさに必要なものが含まれています。 ビンゴ、これをすべてバッファに入れようとしたときに、ちょっとした問題が待っていました。 著者はプロジェクトでライブラリを使用しました クリップボードjsを選択すると、選択したテキストに基づいて、Flash オブジェクトなしでクリップボードを操作できるようになります。 最初は、base64 を display:none; の要素に置くことにしましたが、この場合、クリップボードに置くことができませんでした。 分離は起こりません。 したがって、display:none; の代わりに、 やった

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

これにより、要素をビューから非表示にすることも、実際にページ上に残すこともできました。 ほら、タスクが完了しました。ボタンをクリックすると、次のような行がバッファに配置されました。

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

これをサーバー上のコンソールに貼り付けると、すぐにすべての構成が含まれた zip アーカイブを受け取りました。
そしてもちろん、作者にプルリクエストを送信しました。なぜなら... プロジェクトはアクティブで活発です。作成者からの更新情報を確認し、独自のボタンを用意したいと思います) 興味のある方は、こちらをご覧ください。 私のフォーク プロジェクトと彼自身 プル要求ここで、私が修正/追加した内容を確認できます。
皆さんの発展をお祈りします）

出所： habr.com