다음과 같은 순서로 작성되어 있습니다.


1. 개요

2. 준비

3. 쿼리 알아보기

4. nodejs와 통합 

5. chart로 표현하기


1. 개요


최근 회사에 Elasticsearch(이하 ES)로 통계 시스템을 구축했습니다. Mysql MyISAM 엔진으로 구축하던 것과 비교해보면 엄청나게 편리해졌네요.


Kibana로 쿼리하고 결과를 손쉽게 출력하여 담당자가 아닌 컨텐츠 개발자도 자신이 보고 싶은 결과를 바로 추가하여 볼 수 있을 정도니, 작은 개발사에는 이보다 더 좋은 솔루션이 있을까 싶네요.


그런데 ES에서 나온 다른 두 결과의 비교가 필요한 경우 불가능한 경우가 있어서 조금 아쉽더군요. 그래서 이를 직접 만들어 보기로 했습니다.


시간을 기준으로 데이터를 비교하는 경우는 timelion을 사용하면 되나, 시간 기준이 아니거나 두 결과의 상세 비교, 예를 들어 지난 주 매출과 이번 주 매출을 비교하여 등락을 정확히 표기하고 싶은 경우에는 CSV로 데이터를 export하여 엑셀 등에서 별도 그래프 작업이 필요했습니다.


그래서 ES에 쿼리를 날려 결과를 가져 온 후 회사 자체에서 사용하는 홈페이지에 있는 리포트 기능과 연동하면 좋겠다라는 생각을 하게 되었습니다. nodejs로 Elasticsearch에서 쿼리를 통해 결과를 얻어와 어딘가 저장하고, 이 결과를 기존의 결과와 비교하여 내가 원하는 그래프, 표로 출력하도록 하는 것이었죠.


만들면서 다른 것들은 큰 문제가 없었지만, elasticsearch에서 사용하는 쿼리 포멧에 대한 정보를 찾기가 어려워 조금 애를 먹었습니다. 이를 기록하여 메뉴얼로 만들어 두고, 공유하면 좋겠다는 생각이 들어 정리를 해봤습니다.


사용된 상세 솔루션, 기술 스택은 아래와 같습니다.


Elasticsearch( Saving raw data )

aws-cognito( Authentication )

aws-s3( Saving search results )

nginx/javascript/jquery/chart.js  ( Front-end interface )

Node.js/Express ( Rest API )


아래 글에서는 ELK를 이용한 시스템이 운영중인 것을 기준으로 Node.js로 Elasticsearch에 어떻게 쿼리를 하는지에 대해서 기술하였습니다


시스템은 아래와 같이 구축되었습니다.




(1) 리포트 사이트에서 정보를 요청한다. (필요하다면 cognito의 사용자 풀을 이용하여, 인증을 처리하고, 사용자별 권한을 나눌 수 있습니다.)

(2) 우선 S3에 저장된 요청 정보가 있는지 확인한다. (한번 읽어온 정보는 최대 100MB 공간을 마련해서 S3에서 다시 읽을 필요없도록 저장하고 있는다. 최대 용량 초과 시 참조하지 않는 결과부터 삭제). 원하는 결과가 있을 경우 바로 (5)번으로.

(3) S3에 저장된 결과가 없다면 ES에 직접 쿼리한다. 

(4) (3)에서 얻어온 결과를 S3에 저장하고, 메모리에도 저장해둔다.

(5) 검색된 결과를 돌려준다.



이 글에서는 (3)번에 대한 내용을 집중적으로 다루도록 하겠습니다. 다른 내용에 대해 필요한 분은 댓글로 남겨주세요.


브라우저에서 직접 쿼리를 실행할 수도 있겠지만, Caching, Security 등의 이슈가 있어 실제 쿼리를 담당하는 부분은 REST API 형태로 제작하였습니다.


2. 준비


동적 웹 페이지 작성 : jquery(https://jquery.com/)

결과물 출력 : chart.js(http://www.chartjs.org/)

AWS (인증 및 저장소) : https://aws.amazon.com/ko/sdk-for-node-js/ , https://aws.amazon.com/ko/sdk-for-browser/ (참고 사항으로 이 글에서는 다루지 않습니다.)

elasticsearch의 공식 nodejs client library는 아래 사이트들에서 확인이 가능합니다. 

github : https://github.com/elastic/elasticsearch-js

npm site: https://github.com/elastic/elasticsearch-js

공식 문서: https://www.elastic.co/guide/en/elasticsearch/client/javascript-api/current/index.html



위 라이브러리를 사용하여 아래와 같이 elasticsearch에 연결할 수 있습니다. (npm site 예제 인용)

var elasticsearch = require('elasticsearch');
var client = new elasticsearch.Client({
  host: 'localhost:9200',
  log: 'trace'
});

ping 함수를 사용하여 연결 여부를 테스트 할 수 있습니다. (npm site 예제 인용)

client.ping({
  // ping usually has a 3000ms timeout
  requestTimeout: 1000
}, function (error) {
  if (error) {
    console.trace('elasticsearch cluster is down!');
  } else {
    console.log('All is well');
  }
});



(아래 내용은 elasticsearch 6.3을 기준으로 작성되어 있습니다.)
3. 쿼리 알아보기


이제 이 라이브러리를 이용해서 우리가 원하는 결과를 어떻게 쿼리할 수 있는지 알아보겠습니다.


주로 다룰 함수는 search입니다. 다른 기능들은 https://www.elastic.co/guide/en/elasticsearch/client/javascript-api/current/api-reference.html 를 참고하세요.


search 함수에 대한 상세 내용은 아래 링크에서 확인할 수 있습니다.

https://www.elastic.co/guide/en/elasticsearch/client/javascript-api/current/api-reference.html#api-search 


쿼리를 요청하는 방법은 두 가지가 있습니다. parameter에 검색어를 넣어 요청하거나 Elasticsearch가 제공하는 Json 형태의 Query DSL(Domain Specific Language)를 사용하는 방법입니다. 여기서는 Lucene Query 방법을 간단히 확인 후 Query DSL을 이용하여 원하는 결과를 얻어오는 방법을 다뤄보겠습니다.


만약 raw data의 종류를 log_index라는 키를 이용해 구분한다고 가정하고, 1000번인 데이터만 검색하고 싶다고 가정해 보겠습니다.


nodejs에서는 search 함수를 다음과 같이 사용합니다. 


[Lucene query 문을 사용한 방법]

const response = await client.search({
  index: 'myindex',
  q: 'title:test'
});


virtualize와 Timelion 등 전반적으로 Kibana에서는 Lucene query를 사용합니다. 하지만, 상세한 필터 적용, 조건 처리를 위해서는 Query DSL이 더 유용합니다.


[Query DSL을 사용한 방법]

client.search({
index: logstash-2018.10.01,
body: {
"query": {
"match" : { "log_index" : "1000"}
}
}
});

이를 nodejs에 적용하기 전에 body의 내용을 Kibana 의 Dev Tool에서 확인할 수 있습니다.


POST logstash-2018.10.01/_search?size=0
{
index: logstash-2018.10.01,
body: {
"query": {
"match" : { "log_index" : 1000}
}
}
});

size는 출력할 결과의 수이며 default는 10입니다. 0으로 지정하면 결과의 정보만 볼 수 있습니다. 아래와 같은 결과를 확인할 수 있습니다.


{ "took": 253,           //    ms 단위로 결과를 수행한 시간 "timed_out": false,        "_shards": { "total": 1000,       //    조건에 맞는 검색된 총 개수 "successful": 1000, "skipped": 0, "failed": 0 }, "hits": { "total": 100000000,    //    검색한 총 개수 "max_score": 0, "hits": [] } }

size를 원하는 만큼 지정하면 hits에 배열 형태로 포함되어 출력됩니다.


테스트 결과를 확인하는 방법을 알아보았으니, 이제 필요한 Query DSL에 대해서 좀 더 살펴보겠습니다.


아래 document에서 좀 더 상세한 내용을 확인할 수 있습니다.


https://www.elastic.co/guide/en/elasticsearch/reference/6.3/search-request-body.html

https://www.elastic.co/guide/en/elasticsearch/reference/6.3/query-dsl.html


이 중 몇 가지 샘플을 통해서 사용법을 알아보겠습니다.


예제) 특정 시간대의 데이터만 검색하기


query:{

"bool": {

"must" : [

{"match" : {"log_index" : 1000}}

],

"must_not": [

{"match" : {"item_type" : 100}},

{"query_string": {"fields":["name"],"query" : "tester OR manager"}}

],

"filter": {

"range" : {

"@timestamp" : {

"gte" : "2018-09-01",

"lte" : "2018-09-30"

}

},

}

}

}

"9월 한달 간 로그 종류가 1000번 이고, 아이템 종류가 100번이 아니고, name 필드에 tester나 manager가 포함되지 않은 데이터를 검색"하는 예제입니다.


위 쿼리에서 볼드체로 처리된 키워드들을 살펴보겠습니다. 


bool : 다른 쿼리들에 공통적으로 일치하는 document를 검색합니다. Lucene의 BooleanQuery와 같은 역할을 합니다.

must, must_not : 일치하거나 배치되는 조건을 설정합니다.

match : 정확히 일치하는 조건을 설정합니다. 이와 유사한 키워드는 한 단어를 검색할 때 사용하는 term이 있는데, 이는 주어진 조건의 단어가 포함된 것 전체를 검색하게 됩니다.

query_string : query_string의 query는 조건 검색을 지원합니다. (링크)

filter : must와 비슷하지만, score[각주:1]를 고려하지 않습니다.

range : 검색 범위를 저장할 수 있습니다.



예제) 기간 별 count 확인하기


query:{

"bool" : {

"must" : [

{"match" : {"log_index" : 2000}}

],

"filter": {

"range" : {

"@timestamp" : {

"gte" : "2018-09-01",

"lte" : "2018-09-30"

}

},

}

},

"aggs" : {

"days" : {

"date_histogram":{

"field" : "@timestamp",

"interval" : "day

},

"aggs" : {

"type_count":{

"cardinality" : {

"field": "login"

}

}

}

}

}

}


"9월 한 달간 일별 login한 횟수를 집계"하는 예제입니다. Aggregations에 대해서는 이 곳에서 상세한 정보를 확인할 수 있습니다. 


aggs : 집계에 대한 쿼리를 정의합니다. "days"는 집계 정보에 대한 사용자 지정 이름으로, 원하는 이름을 지정할 수 있습니다.

date_histogram : 시간을 기록한 @timestamp를 기준으로 일별 지표를 집계합니다. 집계된 정보는 "aggregations"하위에 buckets에 날짜별로 doc_count에 기록되어 결과를 얻을 수 있습니다.

cardinality : 공식 문서에 'approximate count' 라는 부연 설명이 있는데, 정확한 결과를 얻기에는 리소스가 많이 필요해 HyperLogLog++ algorithm에 기반하여 결과를 도출한다고 되어 있습니다. 보다 상세한 내용은 이 곳 을 참고 바랍니다.



4. nodejs에 통합


Elasticsearch로부터 원하는 결과를 얻었다면 이제 이 결과를 분석해서 웹 사이트에 표로 출력을 해보겠습니다. 


위에서 보았던 elasticsearch 공식 nodejs client library를 초기화하는 코드입니다.


var elasticsearch = require('elasticsearch');
var client = new elasticsearch.Client({
  host: 'localhost:9200',
  log: 'trace'
});

ping 함수를 사용하거나 테스트 쿼리를 날려 잘 접속되는지 확인해 보세요. 


이제 위에서 언급했던 "특정 시간대의 데이터만 검색하기" 결과를 받아 그래프를 그려보겠습니다. 


아래 코드는 Elasticsearch에 쿼리하여 원하는 데이터를 검색하고 결과를 가공하는 REST API에서 호출될 예제 함수들입니다. 


.
.
app.route('/test/query').post(function(req, res, next){
req.accepts('application/json'); testQuery(req.body.sday, req.body.eday).then((result) => { res.json('{"result":"'+JSON.stringify(result)+'"}'); // 결과를 클라이언트에 돌려줍니다.  }).catch((err) => { res.json('{"err":"'+ err + '"}'); }); })

.
.

function testQuery(startDate, endDate){
return new Promise(resolve => {
var listRawData = {};
var count =0;
.
.
(미리 caching했던 결과물이 있다면 search전체 읽어 결과를 바로 돌려줍니다. )
.
.
client.search({
index : 'logstash-2018.10.01',
scroll: '2s',
body : {

query:{

"bool": {

"must" : [

{"match" : {"log_index" : 1000}}

],

"must_not": [

{"match" : {"item_type" : 100}},

{"query_string": {"fields":["name"],"query" : "tester OR manager"}}

],

"filter": {

"range" : {

"@timestamp" : {

"gte" : startDate,

"lte" : endDate

}

}

}

}

}

}
}, function getMoreUntilDone(err, res){

// listRawData res.hits.hits의 내용을 적절히 쌓아둡니다.

count += res.hits.hits.length; // listRawData 에는 중복된 데이터가 발생할 수 있으니 카운트를 별도로 처리
if(count != res.hits.total){
client.scroll({    //    아직 total count에 도달하지 않았다면 다음 데이터를 받아옵니다.
scrollId: res._scroll_id,
scroll:'2s'
}, getMoreUntilDone);
}else{
var result=[];

//    listRawData 의 결과를 가공하여 result에 넣어두세요.
//    이 예제에서는 day와 value, value2 형태로 데이터를 가공하여 저장했다고 가정합니다.
//    가공된 결과를 s3, 별도의 저장소 혹은 cache에 저장하여 활용할 수 있습니다.
resolve(result); // 가공된 데이터를 돌려줍니다.
}
});
});
}


5. Chart로 출력하기


이제 클라이언트측에서 받은 결과를 chart로 출력하는 과정을 살펴보겠습니다.


function drawResult(mainDiv){ // 그래프를 그릴 div를 전달받습니다.
$.post("http://localhost/test/query", {'sday':'2018-09-01', 'eday':'2018-09-30'}, function(res){
res = JSON.parse( res );
var labels = []; // 그래프에 표기할 label을 넣습니다. 이 예제에서는 날짜 데이터가 들어갑니다.
var values =[]; // 그래프에 표기할 값을 넣습니다.
var values2 =[];

res.result.forEach(function(data){
labels.push( data.day );
values.push( Number( data.value));
values2.push( Number( data.value2));
});

var div = document.createElement('div'); // 추후 삭제를 위해 sub div 하나를 추가합니다.
div.classList.add('chart-container');
var chart = document.createElement('canvas');
div.appendChild(chart);
mainDiv.appendChild(div);

//    이하는 chart.js를 이용해 그래프를 설정하는 샘플입니다.
var ctx = chart.getContext('2d');
var lineChart = new Chart(ctx, {
type: 'line',
data : {
labels : labels,
datasets : [{
label : "Sample Graph",
borderColor: 'rgb(255,99,132)',
data : values
},{
label : "Sample Graph 2",
borderColor: 'rgb(99,255,132)',
data : values2
}]
},
options: {
responsive : true
}
});
});
}

출력된 샘플 결과는 아래와 같습니다.





지금까지 Elasticsearch를 nodejs에 통합하여 결과를 우리가 원하는 곳에 출력하는 전반적인 과정을 살펴 보았습니다.


다음에 요청이 있거나 다른 기회가 있다면, 각 단계의 상세 과정을 다시 정리할 수 있는 기회가 있으면 좋겠습니다.


짧지 않은 글, 읽어 주셔서 감사합니다. 





  1. 얼마나 일치하는지를 나타내는 수치이다. 예를들어 우리가 "tester"라는 단어를 검색했다면 "tester"라고 된 document의 score 는 1일 것이고, "tester 1"이라고 된 document는 0.9 정도가 될 것이다. [본문으로]

javascript로 aws cognito 연동 할 때, app 설정에서 "클라이언트 보안키 생성" 옵션을 해제해야 한다.


https://github.com/aws-amplify/amplify-js/tree/master/packages/amazon-cognito-identity-js


"When creating the App, the generate client secret box must be unchecked because the JavaScript SDK doesn't support apps that have a client secret."


클라이언트 보안 옵션은 기본으로 체크 되어 있어서 생각없이 넘어 갔는데, 켜져 있으면  "Unable to verify secret hash for client .." 라는 에러는 보게된다.

앱 클라이언트 첫 설정할 때 주의 필요!!!



 https://aws.amazon.com/ko/premiumsupport/knowledge-center/ec2-server-refused-our-key/


처음 인스턴스를 생성할 때 다운로드 했던 pem 파일을 찾지 못한다면... 사망!! 처음부터 다시 구축하던가 백업해둔 이미지로 다시 생성!!


1. 해당 인스턴스를 실행 중지 시키고.. 


2. 작업 > 인스턴스 설정 > 사용자 데이터 보기/변경을 선택 (인스턴스가 완전히 종료되지 않은 상태에서 변경 불가)


3. 아래 코드를 붙여넣기 한 다음


#cloud-config
ssh_deletekeys: false
ssh_authorized_keys:
cloud_final_modules:
  - [ssh, always]

4. puttygen을 연 후, load 버튼을 눌러 저장해둔 pem 파일을 연다.


5. 그러면 상단 텍스트 박스에 public key 텍스트가 출력되는데 ssh-rsa로 시작하는 텍스트부터 끝까지 복사를 한다.


6. 붙여넣기 했던 위 코드 중 ssh_authorized_keys:  바로 옆에 복사한 내용을 붙여넣는다. 


7. 저장 하고 인스턴스를 다시 시작한다.


8. 다시 연결되는 것을 확인할 수 있다. 


위 링크의 내용을 그대로 가져왔지만 붙여 넣기 할 때 주의가 필요함. 

EC2 대시보드 -> 인스턴스 -> 인스턴스 시작 


여기서는 Amazon Linux AMI를 선택하려 한다. 




인스턴스 유형은 t2.micro (역시 프리 티어 사용 가능 ) 선택 후 "검토 및 시작" 버튼. 


 (인스턴스 구성 및 스토리지 추가 등이 필요하면 각 상세 항목을 설정할 수 있다. 각 항목은 추후 필요할 때 다시 설정할 예정이니 여기서는 넘어가자.)



"시작" 버튼을 누르면 키페어에 대한 질의가 나온다. "새 키 페어 생성"을 눌러보자.


키 페어 이름을 넣은 후 "키 페어 다운로드"를 해서 pem 파일을 만들어두자. 원격 제어를 위해 접근하려면 꼭 필요하다. 





그리고 인스턴스를 시작하면 생성 후 가동된다. 


이제 터미널에서 접속하는 과정을 보자. 


일단 다운받은 pem 파일을 원하는 위치에 놓고 터미널에서 해당 폴더로 이동한다.


그리고 pem 파일 권한에 읽기 권한을 아래와 같이 부여한다.


chmod 400 yourfilename.pem



그리고 터미널에서 ssh로 바로 접속해보자.


ssh -i yourfilename.pem ec2-user@yourec2domain


이제 EC2로 바로 접속할 수 있다. 


참고로 EC2 인스턴스를 활성화 시킨 후 재부팅 등이 이루어지면 IP와 도메인이 변경된다. 고정 IP를 할당하자면 비용이 추가되니 필요에 따라 선택이 필요하다. 









AWS 문서를 따라 했지만 안되는 문제가 발생했다. (공식 문서)


아래와 같은 방법으로 처리해야 whitelist를 적용할 수 있다.


1. 해당 bucket의 권한 탭에서 "버킷 정책"을 선택. 아래와 같이 정보를 입력한다.


{

    "Version": "2012-10-17",

    "Id": "Policy......",

    "Statement": [

        {

            "Sid": "WhiteListfor",

            "Effect": "Deny",

            "Principal": "*",

            "Action": "s3:*",

            "Resource": "arn:aws:s3:::your-bucket-name/*",

            "Condition": {

                "NotIpAddress": {

                    "aws:SourceIp": "Ip address range to allow"

                }

            }

        }

    ]

}

2. 해당 버킷의 필요한 파일, 폴더에 "everyone 읽기 속성"을 부여한다.


이렇게 하면 원하는 IP 대역에서만 접근이 가능해진다.


POST로 json데이터를 전달할 때,


서버 트리를 가지는 구조를 전달하면 400 bad request 를 리턴한다.


문제가 되는 구조는 아래와 같다. 


{ "msg" : { "to": "you", "from":"me"}}


text/plain으로 지정해서 보내봤지만 에러는 계속 발생한다. 



이를 아래와 같은 단일 구조로 만들어서 보내야 한다.


{"msgTo": "you", "msgFrom":"me"}




인증을 설정하지 않았어도 일반적인 웹브라우져에 주소를 입력하는 방식으로는 


{"message":"Missing Authentication Token"}  


이라는 메세지만 볼 수 있다.


Unity c# 코드를 기준으로 테스트를 해 보았다. 


----- UntyWebRequest 사용 시


WWWForm form = new WWWFrom();

form.AddField("test", "value");

UnityWebRequest www = UnityWebRequest.Post(apiAddr , form);

yield return www.SendWebRequest();     >> 실패. API 문서를 봐도 이 코드가 실패할 이유는 없는 듯 한데.. 안됨.


(* 참고 코드 : https://docs.unity3d.com/Manual/UnityWebRequest-SendingForm.html )



----- WWW 사용 시


string dataString ="json format data";

var encoding = new System.Text.UTF8Encoding();

Hashtable header = new Hashtable();

header.Add("Content-Type", "text/json");

header.Add("Content-Length", dataString.Length);

WWW www = new WWW(apiAddr, encoding.GetBytes(dataString));

yield return www;         >> 성공. 



음.. 무슨 차이지.. 당연히 UnityWebRequest API 공식 메뉴얼을 보고 코드를 작성했는데, 수동으로 헤더 설정해서 보낸 것과 무슨 차이가 발생하는걸까. 


-_-+++++++




mobile analytics에 기록되는 정보는 기본적으로 2 주가 지나면 자동으로 삭제되는데, 중요한 데이터를 s3에 저장하고 싶을 때 사용할 수 있다. 



하단 링크 참고

https://aws.amazon.com/ko/blogs/aws/new-auto-export-for-amazon-mobile-analytics/



인생 처음 참가해 본 행사. 게임을 만드는 직종에 종사하고 있었기에 게임 개발 대회 같은건 생각도 안해봤다. 


그리고 당일 모든 작업을 마쳐야 된다고 생각하고 있어서, 힘들지 않을까 했는데..


이 행사는 aws의 시스템을 잘 활용한 예제를 만들기 위한 행사였기에 사전에 가능한 많은 준비를 해오길 원했던 것!! 그걸 행사 5일전에 겨우 알았고, 나와 나의 팀원 1명은 화요일에 이 행사에 대한 아이디어를 구성하기 시작했다. 


처음이고 하니 입상보다는 차기작에 AWS 도입을 위해 공부를 하자는 취지로 시작. 나중에 생각해보니 같이 참여한 팀원은 디자이너 였기 때문에, 아마 입상했으면 하는 생각과 자신의 능력을 시험해 볼 기회라고 생각하지 않았을까.


그런데 막상 3등 (그것도 1등이 2팀에 11팀 신청에 최종 남은 팀은 7팀중에) 하고보니 별의 별 후회가 다 한번에 몰려오더라.


그래도 이런 행사가 어떻게 진행되는지도 알았고, 다음에는 1등 해보자는 결의도 해보고, 특히 Unity와 AWS에 대해서 짧은 기간에 집중적으로 공부할 수 있었던게 큰 도움이 되었다. 


여러모로 재밌었고, 조금 부끄럽지만 그래도 3등해서 상품도 받았고... (아직 실물은 손에 없지만.. ㅋ)


인상적이었던건 AWS 직업분들이 정말 너무 잘 도와주셨다. 자사 제품 행사니까 그렇겠지만 그런걸 떠나서도 인간적으로, 행사 당일 준비도 거의 쵝오였다. 


다음에 다시 한번 참여해서 꼭 1등 해야지 +_+






아.. 그리고 당일 모든 팀 중, Windows PC를 사용하는 인원은 우리 둘 뿐 이었음. ;; 맥.. 사야되나.

  1. 이우상 2015.09.07 14:56 신고

    멋졌습니다 :)
    파도 한 번이나 괴물이 한 번 치면 죽는 설정이 기억에..ㅎㅎ
    그리고 불특정한 유저에게서 받는 유리병은 정말 재미있었습니다!

    • 가끔.하늘 가온아 2015.09.10 12:20 신고

      감사합니다. ^^ 올해안에 진짜 릴리즈를 ... 할 지도.. 모르지만.. 하여간.. 저도 즐거웠어요. ^^

Putty로 접속하기


http://docs.aws.amazon.com/ko_kr/AWSEC2/latest/UserGuide/putty.html



EC2에 파일 업로드하기


http://arisu1000.tistory.com/27557

+ Recent posts