꼬반 Blog

개편되면서 이유는 알수 없지만.. 야매로 만들어 사용하던 메인이 사용되지 않게 되었네요..

일단 이슈를 해결하거나 아니면 적용해서 사용한지 오래 됬으니 새로 만들던가 해야겠어요.

쩝 .. 개편할거면 스킨 시스템도 좀 개편해주지. api 형식으로.. 지금처럼 태그는 한계가

있다고 보는데 말이죠.. 에휴

Naver TTS API를 사용하기 위해서는 먼저 아래 링크를 참고하여 API 이용신청을 먼저 해야 한다.

https://developers.naver.com/docs/clova/api/#/CSS/API_Guide.md#clova-speech-synthesis-api-가이드

이후 발급받은 키와 시크릿 키를 가지고 진행한다.

위 가이드에는 Golang 구현 예제가 없어 아래와 같이 테스트 해보았다. (소스는 테스트 목적으로 허접...)

다른 언어들의 경우 대부분 위 링크에 나와 있으니 참고할 것.

이걸 테스트 한 목적은 이전 글에서 작성한 것처럼 토익 공부 중에 오답노트 웹앱을 만드는데

LC를 어떻게 하면 좋을까 생각하다가 TTS API를 활용해보기로 한것.

Golang 을 백엔드로 사용하고 있기 때문에 Golang 으로 구현해보았고 이걸 이용해서 LC 오답문제를

불러오면 해당 메세지를 위 api로 mp3로 변환 후 재생해줄 예정이다. 

다만 미흡한 점이 메세지가 바로 바로 재생되고 중간에 스페이스로 메세지간에 공백을 넣어도 문장 간 여백을

설정할 수 없는 점이 있다. 아쉬운 부분이 있지만 Naver TTS API 품질이 생각보다 만족스러워서 다행이다.

참고 링크

https://stackoverflow.com/questions/19253469/make-a-url-encoded-post-request-using-http-newrequest

https://stackoverflow.com/questions/16311232/how-to-pipe-an-http-response-to-a-file-in-go

http://golang.site/go/article/103-HTTP-POST-%ED%98%B8%EC%B6%9C

TTS API 관심이 있어서 (영어 재생)

Google, Naver, Voice RSS 3개 테스트를 해보았는데

Naver의 API 영어 TTS 가 생각보다 품질이 훌륭해서 놀랐음.

Google, Voice RSS 쪽도 나쁘진 않고 Voice RSS 는 미국, 영국, 호주 버전이 존재해서

선택지가 다양한데 Naver는 일단 여성, 남성만 선택이 가능 하긴 하나

생각보다 괜찮음..

테스트 한 이유는

토익 공부하며 오답노트 웹앱을 만드는데 

뷰는 Vue.js 로 작업 / 백엔드는 Golang 으로 해당 웹앱에 접속하면 

입력해둔 틀린 문제 중 임의로 한문제가 나오고 해당 문제를 풀도록 되어 있다.

일반적인 문법은 큰 문제가 없는데.. LC는 어떻게 할까 생각해보다가 TTS API를 테스트 해본것.

Naver 구현예제가 Golang 은 없는데 일단 구현해보고 문제 입력 -> 자동으로 mp3 생성 후 재생

-> 보기 생성 후 재생 하여 문제 풀기 순으로 구현해봐야겠다.

Vue에서 ui framework 으로 사용하는 vue-material 에는 작은 버그가 있다.

md-radio 를 포함한 input 모듈에 label 에도 click 이벤트가 걸려있어서 

라벨쪽을 클릭하면 이벤트 버블링이 발생하는 것.

해당 에러를 검색해보니 얼마전 vue-material git hub 에 논의 된 내용이 있었다.

(몇일만 일찍 봤으면 이 이슈는 내것이었을 텐데 ㅂㄷㅂㄷ)

https://github.com/vuematerial/vue-material/pull/954

https://github.com/vuematerial/vue-material/pull/954/commits/1e345ee850100269deec2821bd208633811383d0

이걸 보고 해결하기 위해서는 아직 공식 release 에서는 수정되지 않았으므로 

별도로 vue-material 을 git 으로 내려 받아 

해당 소스에 laebel 쪽에 @click="toggleCheck" => @click.prevent="toggleCheck" 로 수정하고

yarn build 를 해주면 dist 폴더가 삭제 후 다시 빌드된다.

이후 해당 빌드된 폴더를 원래 작업하는 프로젝트 폴더에

node_module/vue-material/dist 폴더를 대체하여 준다.

그리고 프로젝트 에서 확인하여 보면 이벤트 버블링이 발생하지 않는다.

극뽁~!

각 서비스의 접속 지역을 확인하기 위해 Nginx 를 1.13.3 으로 소스 재컴파일을 하였고

GeoIP Module 을 설치하였으며 (이와중에 dependancy 로 설치된 nginx 때문에 소스 컴파일 한

nginx 가 영향을 받아 스크립트가 정상동작 하지 않는 부분이 발생.. 하여 system service daemon 을

수정하여 정상 동작 확보 - bin 파일을 rpm 의 nginx 가 아닌 source build 된 nginx 로 실행 위치 변경)

이후 grafana 에 world map plugin 을 설치하고 지도에 표시하느라 쿼리와 telegraf, influxdb 에 

nginx log 넣느라 삽질 삽질 하다가 어 됬다! 하고 좋아했다. (지난번 포스트)

그런데 몇일 후 보니.. 다시 정상적으로 안나온다 ㅠㅠ What!!!

influxdb 쪽 로그를 보니 사용자 태그로 설정한 geoip_country_code 가 nginx 로그 상에는

아무런 문제가 없지만 inflxudb 로 들어가면 앞에 /"KR/" 형태가 붙는걸 발견..

헐.. 처음엔 안그랬는데?!?!

이걸 해결하려고 nginx log format 을 바꿔보고 telegraf 에서 grok pattern 을 이거저거 수정해보았는데

원인은 일반적인 fields 는 " " 안의 값만 input 으로 받는데 tag로 설정한 값은 " " 값도 같이 

인식해서 db에 넣는다. 덕분에 /" /" 가 같이 붙는것..

그래서 nginx log format 에서 tag 로 사용할 $geoip_country_code 는 " " 를 빼고 그냥 사용해주고

telegraf에서 %{type:tag_name:tag} 로 설정해서 테스트 하니 다시 정상적으로 db로 입력이 된다.

이제야 다시 맵에서 정상적으로 확인이 된다...

원인을 찾아봐야겠는데.. 

https://github.com/elastic/logstash/blob/v1.4.2/patterns/grok-patterns

여길 참고하면 기본 tag로 지정되는 verb 값은 "" 안에 있지만 정규식으로 추출해서 쓰는 문법으로 추정된다.

으음 아직 내공이 부족하다 ㅠㅠ

회사에서 사용하고 있는 웹 서비스의 구성은 간단하게 다음과 같다.

Nginx (리버스 프록시 서버) --- WAS (각 어플리케이션 서버) --- 백엔드 (DB, 스토리지 등)

여기서 유저는 가장 상단의 Nginx 서버에만 접근이 가능하다. 이러한 구성은 

기본적으로 보안이나 관리 등에 용이하다.

그리고 각 서버들의 상태 모니터링 및 로그 수집을 위해 2가지 시스템을 혼용하여 사용하는데

ELK 와 TICK 이 바로 그것이다.

ELK는 Elasticsearch, Logstash, Kibana 를 지칭하는데 과거 버전에서 5.x 버전으로 

업그레이드를 하면서 이 로그 수집방식이 Logstash-forward 대신에 beat 로 대체 되었다.

그래서 각 단말에 beat가 서버의 로그를 수집하여 Elasticsearch 로 보내고 저장되며 Kibana를 통해

모니터링 및 대시보드를 통한 Visualize 가 가능하다.

Elasticsearch 와 Kibana 는 Docker와 Docker-composer 를 통해 관리된다. 

TICK 은 Telegraf, Influxdb, Chronograf, Kapacitor를 의미하며 각각 수집, 시계열DB, 모니터링 및 관리, 알람

의 기능을 가지고 있다.

그리고 이 데이터들은 Grafana 라는 Visualize platform 에서 활용이 가능하다.

이번에 한 작업은 다음의 목적을 가지고 진행되었다.

1. 특정 사이트의 접속 로그에 대한 모니터링이 필요

2. 접속 지역에 대한 확인이 가능할 것.

3. Nginx access log 에는 기본 apache log + agent, response time 이 붙은 custom log 이며 접속자의 IP가

   확인이 된다. 이 IP를 IP조회 사이트에서 조회하여 지역이 확인이 가능하나 불편하다.

4. Dashboard 를 통해 바로 확인할 방법이 필요.

그래서 위의 목적을 달성하기 위해 다음과 같은 작업을 진행 하였다.

1. 기존 리버스 프록시 서버인 Nginx 서버에 GeoIP Module 연동

  1.1. nginx-module-geoip 를 설치

  1.2. 설정 파일에 load module 후 테스트 -> 로드 X (버전 문제 nginx geoip version 1013003 

        instead of 1013000, 즉 현재 nginx 는 1.13.0 버전 이고 모듈은 1.13.3 버전

  1.2. 기존 사용하던 1.13.0 버전을 1.13.3 버전으로 재컴파일 (rpm, yum 버전 등 build 버전은 사용하지 않음

        http2 지원등을 위해 직접 소스 컴파일, 라이브 서버에 적용 전 VM에 테스트 후 진행)

  1.3. 1.13.3 버전 설치 후 모듈 연동 테스트 -> 성공

  1.4. access log 형식에 geoip_city, geoip_region, geoip_country_code, geoip_country_code2 추가 후 확인 완료

2. Telegraf 수집 형식 변경

  2.1. 기존 logparse 에 grok matching 을 위해 필드 추가 적용 (country_code 는 2개 추가한 이유가 하나는 tag로

       지정하기 위함.)

  2.2. influxdb 에서 수집된 field, tag 에 반영 확인

3. Grafana 연동

  3.1. Grafana World Map Plugin 설치

  3.2. https://github.com/grafana/worldmap-panel / https://github.com/grafana/worldmap-panel/issues/30

       참고하여 설정 진행

  3.3. World-Map 연동 확인

총평. 진행된 내용만 간략히 적었지만 사실 각 작업간에 많은 시행착오가 있었다. 물논 그런 시행착오가 없을 순

       없다. 각 작업 내용은 다시 한번 정리해서 추후 포스팅 해야겠다.