현상

키바나에서 Dev Tools 메뉴를 이용하여 쿼리를 입력 할 때 한글 입력시 아래 그림과 같이 깨지는 현상이 발생한다. 해당 메뉴는 ES로 개발시 자주사용하는데 한글이 깨져 매우 불편하였다.

해결방안

구글링을 해도 딱히 마땅한 해결책이 보이지 않아 키바나 소스를 살펴보고 내린 결론은 키바나에 버그가 있기 때문에 소스를 수정하는 것이다.

사실 키바나 repo에 이슈를 제기하고 PR을 올렸다. 코드 리뷰 이후 repo에 merge 하여 해결하려 했지만 받아주지 않아 필자는 따로 코드를 수정하여 키바나를 재빌드 하여 사용하고 있다.

코드를 수정한지 4개월이 지나 기억이 가물가물해졌지만 핵심은 키바나에서 영어/숫자를 제외한 문자를 composition 대상으로 처리를 하는데 이 때 한글의 length 처리가 제대로 구현되지 않아 이부분을 수정하였다.

PR 코드에 문제가 없다고 필자는 판단했지만 리뷰를 받지 않았기 때문에 잠재적 결함이 있을지는 모른다. 그렇지만 회사에서 5.2.0, 5.4.1로 3개월 이상 사용시 문제가 발생하지는 않았다.

소스 수정 후 키바나 빌드로 해결하기

기존에 블로그에 올려둔 키바나 빌드하기를 재정리 하여 포스팅 한다.

위의 코드 수정 후 키바나를 빌드하는 방법을 살펴보자.

소스코드 클론받기

키바나 소스를 clone 받아 본인이 원하는 키바나 버전으로 브랜치를 전환한다.

$ git clone https://github.com/elastic/kibana.git kibana
$ cd kibana
$ git checkout -b v5.4.1 v5.4.1

소스코드 수정하기

src/core_plugins/console/public/webpackShims/ace/ace.js를 열어 아래 그림과 같이 코드를 수정한다.


//inComposition.lastValue = val;
if (inComposition.lastValue != null && val != null && inComposition.lastValue < val.length) {
inComposition.lastValue = val;
}

nvm 설치

키바나 빌드에 필요한 nvm을 설치한다.

$ sudo apt-get install build-essential and libssl-dev
$ curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.0/install.sh | bash
$ source ~/.bashrc

nvm 설치 검증

아래의 명령어가 정상 실행되면 nvm이 정상설치 된 것이다.

$ command -v nvm

키바나 실행

아래의 명령어를 이용하여 한글버그가 수정된 키바나를 실행하여 확인해본다.

$ nvm install "$(cat .node-version)"
$ npm install
$ node scripts/makelogs
$ npm start

키바나 빌드 하기

현재의 소스코드로 바이너리를 만들기 위해 빌드명령을 수행해보자.

$ npm run build -- --skip-os-packages

빌드 이후 바이너리 확보

빌드가 끝나면 각 OS 버전에 맞게 바이너리가 생성된 것을 확인 할 수 있다.

검증하기