nginx အတွက် configs မျိုးဆက်၊ တစ်ခုဆွဲတောင်းဆိုမှုသမိုင်း

မင်္ဂလာပါ ရဲဘော်များ။ ကျွန်ုပ်၏ တိုက်ခိုက်ရေးဆာဗာများတွင် လှပသည်။ nginx 2006 ကတည်းကလည်ပတ်ခဲ့ပြီး၎င်း၏အုပ်ချုပ်မှုနှစ်များတစ်လျှောက်တွင် configs နှင့် templates အများအပြားစုဆောင်းခဲ့သည်။ ငါ nginx ကိုအများကြီးချီးကျူးပြီး hub မှာ nginx hub ကိုတောင်တစ်နည်းနည်းနဲ့စတင်ခဲ့တယ်၊ m/ show off
သူငယ်ချင်းတွေက သူတို့အတွက် ဖွံ့ဖြိုးတိုးတက်ရေး လယ်ယာတစ်ခု ထူထောင်ပေးဖို့ တောင်းဆိုခဲ့ပြီး သူတို့ရဲ့ သီးခြား နမူနာပုံစံတွေကို ဆွဲယူမယ့်အစား စိတ်ဝင်စားစရာကောင်းတဲ့ ပရောဂျက်တစ်ခုကို သတိရခဲ့တယ်၊ nginxconfig.ioစင်ပေါ်ရှိ configs များကို ဖြန့်ကျက်ပြီး ကုဒ်ဝှက်ရန် စသည်တို့အတွက် အရာအားလုံးကို ပြင်ဆင်ပေးသည်။ ငါစဉ်းစားခဲ့တယ်၊ သို့သော်၊ wget/fetch/curl ကို အသုံးပြု၍ ဆာဗာသို့ တိုက်ရိုက် အပ်လုဒ်လုပ်ရန် ခွင့်မပြုဘဲ nginxconfig သည် ဇစ်မှတ်တမ်းကို ဘရောက်ဆာသို့ ဒေါင်းလုဒ်လုပ်ရန် ကမ်းလှမ်းသည့်အတွက် ကျွန်ုပ်အား ဒေါသထွက်ခဲ့ပါသည်။ ဘာအဓိပ္ပာယ်လဲ၊ ဘရောက်ဆာမှာ ဘာကြောင့် လိုအပ်တာလဲ၊ ကွန်ဆိုးလ်ကနေ ဆာဗာမှာ လိုအပ်တယ်။ စိတ်ဆိုးတယ်၊ ပရောဂျက်ရဲ့အသည်းအသန်ကိုကြည့်ဖို့ github ကိုသွားခဲ့တယ်၊ အဲဒါက လမ်းဆုံလမ်းခွကို ဦးတည်သွားပြီး ရလဒ်အနေနဲ့ ဆွဲထုတ်ဖို့ တောင်းဆိုခဲ့တယ်။ စိတ်မဝင်စားရင် မရေးဖြစ်ပါဘူး 😉

ဟုတ်ပါတယ်၊ အရင်းအမြစ်တွေကို မတူးခင်မှာ Chrome က ထုတ်လုပ်လိုက်တဲ့ ဇစ် archive ကို configs နဲ့ ဆွဲထုတ်တဲ့ ဘယ်မှာကြည့်ခဲ့တယ်၊ အဲဒီမှာ “blob:” နဲ့စတဲ့ လိပ်စာတစ်ခုက ကျွန်တော့်ကို စောင့်နေတယ်၊ ​​အိုး။ ဝန်ဆောင်မှုသည် လမ်းတစ်လျှောက်တွင် မည်သည့်အရာကိုမျှ မထုတ်ပေးကြောင်း ရှင်းရှင်းလင်းလင်းဖြစ်နေပြီဖြစ်ပြီး၊ အမှန်မှာ၊ ၎င်းသည် js မှ လုပ်ဆောင်ခြင်းဖြစ်သည်။ အမှန်မှာ၊ zip archive ကို client၊ browser နှင့် javascript ကိုယ်တိုင်ကထုတ်ပေးပါသည်။ အဲဒါတွေ။ အလှတရားမှာ ပရောဂျက်တစ်ခုဖြစ်သည်။ nginxconfig.io အချို့ကို html စာမျက်နှာအဖြစ် ရိုးရှင်းစွာ သိမ်းဆည်းနိုင်သည်။ narod.ru ၎င်းသည် အလုပ်ဖြစ်လိမ့်မည်) ဤသည်မှာ အလွန်ရယ်စရာကောင်းပြီး စိတ်ဝင်စားစရာကောင်းသည့် ဖြေရှင်းချက်တစ်ခုဖြစ်သော်လည်း၊ အမှန်တကယ်တော့ ဤပရောဂျက်ကို ဖန်တီးခဲ့သည့်အတွက် ဆာဗာများသတ်မှတ်ခြင်းအတွက် အလွန်အဆင်မပြေလှပါ။ ဘရောက်ဆာဖြင့် ထုတ်လုပ်ထားသော မှတ်တမ်းကို ဒေါင်းလုဒ်လုပ်ပြီး 2019 ခုနှစ်တွင် nc... ကို အသုံးပြု၍ ဆာဗာသို့ လွှဲပြောင်းပါ။ ရရှိလာသော config ကို ဆာဗာသို့ တိုက်ရိုက်ဒေါင်းလုဒ်လုပ်ရန် နည်းလမ်းရှာရန် ကျွန်ုပ်ကိုယ်တိုင် သတ်မှတ်တာဝန်ပေးခဲ့ပါသည်။
ပရောဂျက်ကို အကောင်အထည်ဖော်ပြီးနောက်၊ ငါ့ရွေးချယ်စရာတွေက ဘာလဲဆိုတာကို စတင်တွေးတောခဲ့တယ်။ ပရောဂျက်သည် နောက်ကွယ်မှ ကင်းစင်သော ရှေ့ဆုံးတွင် ရှိနေသင့်သည့် အခြေအနေမှ မလွှဲမရှောင် လိုသောကြောင့် အလုပ်မှာ ရှုပ်ထွေးပါသည်။ ဟုတ်ပါတယ်၊ အရိုးရှင်းဆုံးဖြေရှင်းချက်ကတော့ direct links တွေကို အသုံးပြုပြီး configs နဲ့ archive တစ်ခုဖန်တီးဖို့ အတင်းအကြပ်လုပ်ခိုင်းတာပါ။
တကယ်တော့ ရွေးချယ်စရာတွေ အများကြီးမရှိခဲ့ပါဘူး။ ပိုတိတိကျကျပြောရရင် တစ်ခုပဲ သတိရလာတယ်။ ကျွန်ုပ်တို့သည် ကွန်ဖရင့်များကို စနစ်ထည့်သွင်းရန်နှင့် ဇစ်မှတ်တမ်းတစ်ခုရယူရန် ဆာဗာကွန်ဆိုးလ်သို့ ကူးယူနိုင်သော လင့်ခ်တစ်ခုကို ရယူရန်လိုအပ်ပါသည်။
ရလဒ်ဇစ် မှတ်တမ်းဖိုင်ရှိ စာသားဖိုင်အများအပြားသည် အနည်းငယ်အလေးချိန်ရှိပြီး စာသားအရ ကီလိုဘိုက်အနည်းငယ်ရှိသည်။ သိသာထင်ရှားသောဖြေရှင်းချက်မှာ ထုတ်လုပ်ထားသော zip archive မှ base64 string ကိုရယူပြီး console အတွင်းရှိ command ဖြင့်ဆာဗာပေါ်တွင်ရှိစဉ်ကြားခံကြားခံထဲသို့ပစ်ချရန်ဖြစ်သည်။

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

ဤတူညီသော zip ဖိုင်ကိုကျွန်ုပ်တို့ဖန်တီးနိုင်သည်။

nginxconfig.io AngularJS တွင်ရေးသားခဲ့သည်၊ စာရေးသူသည် reactive js framework ကိုမရွေးချယ်ပါကမည်သည့်ကုဒ်၏ကီလိုမီတာကိုလိုအပ်မည်ကိုကျွန်ုပ်စိတ်ကူးပင်မရပါ။ သို့သော် ဤအရာအားလုံးသည် VueJS တွင် မည်မျှ ရိုးရှင်းပြီး ပိုမိုလှပမည်ကို အပြည့်အဝ စိတ်ကူးကြည့်နိုင်သည်၊၊ ဤအရာသည် လုံးဝကွဲပြားခြားနားသော အကြောင်းအရာတစ်ခုဖြစ်သော်လည်း၊
ပရောဂျက်ရင်းမြစ်များတွင် 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',
	});
};

စာကြည့်တိုက်ကို အသုံးပြု၍ အရာအားလုံးသည် ရိုးရှင်းပါသည်။ jszip ဖွဲ့စည်းမှုဖိုင်များကို နေရာချသည့်နေရာတွင် ဇစ်တစ်ခု ဖန်တီးထားသည်။ ဇစ်မှတ်တမ်းကို ဖန်တီးပြီးနောက်၊ js သည် ၎င်းကို စာကြည့်တိုက်ကို အသုံးပြု၍ ဘရောက်ဆာသို့ ပေးပို့သည်။ FileSaver.js:

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

အကြောင်းအရာသည် zip archive ၏ရလဒ် blob object ဖြစ်သည်။

ကောင်းပြီ၊ ငါလုပ်စရာရှိတာက သူ့ဘေးက တခြားခလုတ်ကို ထည့်ပြီး နှိပ်လိုက်တာနဲ့ ရလာတဲ့ zip archive ကို browser မှာ မသိမ်းဘဲ 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 archive ၏မျိုးဆက်ကို သီးသန့် generateZip နည်းလမ်းသို့ ရွှေ့လိုက်ပါသည်။ ၎င်းသည် AngularJS ဖြစ်ပြီး စာရေးဆရာကိုယ်တိုင်က ပြန်ခေါ်ခြင်းများကို စွဲကိုင်ထားပြီး ကတိများဖြင့် ၎င်းကို အကောင်အထည်မဖော်ခဲ့ပါ။ downloadZip သည် အထွက်တစ်ခုအဖြစ် SaveA ကို ဆက်လက်လုပ်ဆောင်ခဲ့ပြီး၊ downloadBase64 သည် အနည်းငယ်ကွဲပြားသည့်အရာတစ်ခုကို လုပ်ဆောင်ခဲ့သည်။ ကျွန်ုပ်တို့ထံ html5 ဖြင့် ရောက်လာသော FileReader အရာဝတ္ထုတစ်ခုကို ကျွန်ုပ်တို့ ဖန်တီးပြီး အတော်လေး ပြီးနေပြီဖြစ်သည်။ လက်လှမ်းမီသည် အသုံးပြုရန်။ တစ်ချိန်တည်းတွင်၊ မည်သည့်အရာသည် blob တစ်ခုမှ base64 စာကြောင်းကို ပြုလုပ်နိုင်သည် သို့မဟုတ် ၎င်းသည် DataURL စာကြောင်းတစ်ခု ပြုလုပ်နိုင်သော်လည်း ၎င်းသည် ကျွန်ုပ်တို့အတွက် အလွန်အရေးကြီးသောကြောင့်၊ DataURL တွင် ကျွန်ုပ်တို့ လိုအပ်သည်များ အတိအကျ ပါဝင်ပါသည်။ ဒါတွေအားလုံးကို ကြားခံထဲထည့်ဖို့ ကြိုးစားတဲ့အခါ ဘင်ဂို၊ တံပိုးနည်းနည်းက ငါ့ကို စောင့်ကြိုနေတယ်။ စာရေးသူသည် ပရောဂျက်တွင် စာကြည့်တိုက်ကို အသုံးပြုခဲ့သည်။ clipboardjsရွေးချယ်ထားသောစာသားကိုအခြေခံ၍ flash အရာဝတ္ထုများမပါဘဲ clipboard နှင့်အလုပ်လုပ်နိုင်စေသော၊ အစပိုင်းတွင်၊ ကျွန်ုပ်သည် ကျွန်ုပ်၏ base64 ကို display ပါသည့် ဒြပ်စင်တစ်ခုတွင် ထည့်ရန် ဆုံးဖြတ်ခဲ့သည်၊ သို့သော် ဤကိစ္စတွင် ကျွန်ုပ်က ၎င်းကို ကလစ်ဘုတ်ပေါ်တွင် မထည့်နိုင်သောကြောင့်၊ ခွဲထွက်ခြင်း မရှိပါ။ ထို့ကြောင့် display:none; ငါလုပ်ခဲ့တယ်။

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

၎င်းသည် ကျွန်ုပ်အား နှစ်ခုစလုံးအား မြင်ကွင်းမှ ဖျောက်ထားနိုင်စေပြီး ၎င်းကို စာမျက်နှာပေါ်တွင် အမှန်တကယ် ထားခဲ့နိုင်စေပါသည်။ ဒါဆိုရင်တော့ အလုပ်ပြီးသွားပါပြီ၊ ကျွန်ုပ်ခလုတ်ကို နှိပ်လိုက်သောအခါ၊ ဤကဲ့သို့သော စာကြောင်းကို ကြားခံတွင် ထားရှိပါသည်-

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

ကျွန်ုပ်သည် ဆာဗာပေါ်ရှိ ကွန်ဆိုးလ်ထဲသို့ ရိုးရိုးကူးထည့်လိုက်သည်နှင့် ချက်ခြင်းပင် ဇစ်မှတ်တမ်းကို လက်ခံရရှိခဲ့သည်။
အမှန်ပါပဲ၊ ကျွန်တော် စာရေးသူထံ တောင်းဆိုချက်တစ်ခု ပေးပို့ခဲ့တယ်ဆိုတော့... ပရောဂျက်သည် အသက်ဝင်၍ တက်ကြွသည်၊ စာရေးသူထံမှ အပ်ဒိတ်များကို ကြည့်လိုပြီး ကိုယ်ပိုင်ခလုတ် ရှိသည်) စိတ်ဝင်စားသူများအတွက် ဤနေရာတွင်၊ ငါ့လမ်းဆုံလမ်းခွ ပရောဂျက်နှင့် သူကိုယ်တိုင် တောင်းခံပါငါပြင်ဆင်ထားသည်/ထည့်ထားသည်ကို သင်မြင်နိုင်သည် ။
အားလုံးပဲ ပျော်ရွှင်တိုးတက်ကြပါစေ။)

source: www.habr.com