nginx에 대한 구성 생성, 하나의 풀 요청 기록

안녕하세요, 동지들. 내 전투 서버에서는 아름답습니다. Nginx에 2006년부터 운영되어 왔으며 수년 동안 관리하면서 많은 구성과 템플릿을 축적했습니다. nginx를 엄청 칭찬했는데 왠지 그 허브에서 nginx 허브도 시작했다는 사실이 밝혀졌네요.
친구들이 나에게 개발 팜을 설정해 달라고 부탁했고, 내 특정 템플릿을 드래그하는 대신 흥미로운 프로젝트가 생각났습니다. nginxconfig.io, 구성을 선반에 분산시키고 암호화 허용 등을 위한 모든 것을 준비합니다. 나는 왜 안 되냐고 생각했다. 그러나 나는 nginxconfig가 wget/fetch/curl을 사용하여 서버에 직접 업로드하는 것을 허용하지 않고 zip 아카이브를 브라우저에 다운로드하도록 제안한다는 사실에 분노했습니다. 말도 안되는 소리, 왜 브라우저에 필요하고 콘솔의 서버에 필요합니까? 화가 나서 프로젝트의 내용을 보기 위해 github에 갔는데, 그 결과 포크가 발생했고 결과적으로 풀 리퀘스트가 발생했습니다. 흥미롭지 않다면 글을 쓰지 않을 것입니다 😉

물론, 소스를 파헤치기 전에 Chrome이 구성과 함께 생성된 zip 아카이브를 가져오는 위치를 살펴보았는데 "blob:"로 시작하는 주소가 나를 기다리고 있었습니다. 서비스가 도중에 아무 것도 생성하지 않는다는 것이 이미 분명해졌습니다. 실제로 모든 작업은 js에 의해 수행됩니다. 실제로 zip 아카이브는 클라이언트, 브라우저 및 자바스크립트 자체에 의해 생성됩니다. 저것들. 아름다움은 프로젝트가 nginxconfig.io 간단히 HTML 페이지로 저장하고 일부 페이지에 업로드할 수 있습니다. narod.ru 그러면 작동할 것입니다) 이것은 매우 재미 있고 흥미로운 솔루션이지만 실제로 이 프로젝트가 만들어진 것과 정확히 일치하도록 서버를 설정하는 것은 매우 불편합니다. 생성된 아카이브를 브라우저로 다운로드한 후 NC를 사용하여 서버로 전송합니다. 2019년에는? 나는 결과 구성을 서버에 직접 다운로드하는 방법을 찾는 작업을 스스로 설정했습니다.
프로젝트를 포크한 후, 나는 내 선택이 무엇인지 생각하기 시작했습니다. 프로젝트가 백엔드 없이 순수한 프런트엔드로 유지되어야 한다는 조건에서 벗어나고 싶지 않았기 때문에 작업이 복잡해졌습니다. 물론 가장 간단한 해결책은 nodejs를 끌어와 직접 링크를 사용하여 구성이 포함된 아카이브를 생성하도록 강제하는 것입니다.
사실 선택의 여지가 별로 없었어요. 더 정확하게는 딱 하나만 떠올랐다. 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 객체입니다.

좋아, 내가 해야 할 일은 그 옆에 또 다른 버튼을 추가하는 것뿐이었고, 그 버튼을 클릭하면 결과 zip 아카이브를 브라우저에 저장하지 않고 그로부터 base64 코드를 가져왔습니다. 약간의 노력 끝에 하나의 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',
	});
};

눈치채셨겠지만 저는 zip 아카이브 생성 자체를 비공개 generateZip 메소드 등으로 옮겼습니다. 이것이 AngularJS인데 작성자 자신이 콜백만 고수하고 Promise를 통해 구현하지 않았습니다. downloadZip은 여전히 ​​saveAs를 출력으로 수행했지만 downloadBase64는 약간 다른 작업을 수행했습니다. 우리는 html5에서 제공되었던 FileReader 객체를 생성합니다. 얻기 쉬운 사용하기위한. 한 번에 blob에서 base64 문자열을 만들거나 오히려 DataURL 문자열을 만들 수 있지만 이는 우리에게 그다지 중요하지 않습니다. DataURL에는 우리에게 필요한 것이 정확히 포함되어 있습니다. 빙고, 이 모든 것을 버퍼에 넣으려고 할 때 약간의 걸림돌이 나를 기다리고 있었습니다. 작성자는 프로젝트에서 라이브러리를 사용했습니다. 클립보드, 선택한 텍스트를 기반으로 플래시 개체 없이 클립보드로 작업할 수 있습니다. 처음에는 base64를 display:none; 요소에 넣기로 결정했지만 이 경우에는 클립보드에 넣을 수 없었습니다. 분리가 일어나지 않습니다. 따라서 대신에 display:none; 내가 그랬어

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

이를 통해 요소를 보기에서 숨기고 실제로 페이지에 그대로 둘 수 있었습니다. 짜잔, 작업이 완료되었습니다. 버튼을 클릭하면 다음과 같은 줄이 버퍼에 배치되었습니다.

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

서버의 콘솔에 간단히 붙여넣고 모든 구성이 포함된 zip 아카이브를 즉시 받았습니다.
그리고 물론, 작성자에게 풀 리퀘스트도 보냈습니다. 왜냐면... 프로젝트가 활발하고 활발합니다. 작성자의 업데이트를 확인하고 나만의 버튼을 갖고 싶습니다.) 관심 있는 분은 여기를 클릭하세요. 내 포크 프로젝트와 그 자신 풀 요청, 내가 수정/추가한 내용을 확인할 수 있습니다.
모두 행복한 발전되세요)

출처 : habr.com