사이드카 컨테이너 Log 대시보드 (with docker) - 2

zuckerfrei·2023년 4월 5일
0

Monitoring

목록 보기
2/6

요약

이전 글의 작업으로 만든 로그 모니터링웹 화면에 아주아주 간단한 HTML을 입혀 가독성 개선


1. 문제점 & 원인

  • 한글도 깨지고 가독성이 매우 떨어져서 개선이 필요
  • 단순히 로그파일만 받아서 *.html로 파일형식만 변환한 것이 가독성 하락의 원인

2. 해결

  • 로그파일 줄바꿈을 추가하고, HTML을 입혀서 가독성을 높임

2.1 로그 줄 바꿈 추가

백엔드2 서버 예시

#!/bin/bash

echo "yes"

SLEEP_SECOND=3

function some_task {
    echo $(date "+%Y-%m-%d %H:%M:%S") ;
}

for i in $(seq -s " " 1 ${SLEEP_SECOND} 60);do
    cp /usr/local/tomcat8/logs/catalina.out /home/admin/tmp-catalina.out
    sed -i'' -r -e "/2022-/a\ " /home/admin/tmp-catalina.out
    #rsync /usr/local/tomcat8/logs/catalina.out admin@10.1.xx.x:/home/admin/log-fhir/fhir-log.log
    rsync /home/admin/tmp-catalina.out admin@10.1.xx.x:/home/admin/log-fhir/fhir-log.log
    sleep ${SLEEP_SECOND};
done

sed 명령어로 '2022-' 로 시작할 경우 줄바꿈 추가

2.2 HTML 입히기

  • 참조 이 블로그의 글을 참조하여 js로 파일 읽어들이고 뿌리는 HTML을 입힘
  • JS로 파일을 읽어오므로, log대시보드 서버에서는 *.log → index.html로 바꾸던 cronjob을 중지시킴
  • index.html 예시
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>TEST Fhir app log</title>
<script type="text/javascript">
        var xhttp;
        function createHttpRequest() {
                        xhttp = new XMLHttpRequest();
        }

        function mySend() {

                createHttpRequest();
                xhttp.onreadystatechange = callFunction;
                xhttp.open("GET", "sample.txt", true);
                xhttp.send(null);
        }

        function callFunction(){
                   if(xhttp.readyState == 4 ){
                           if(xhttp.status == 200 ){
                                   var responseData = xhttp.responseText;
                                   document.getElementById("result").innerHTML = responseData;
                           }
                   }
           }
</script>
</head>
<body>
        <H1>📲TEST Fhir app log 불러오기</H1>
        <br>
        <button onclick="mySend()">get log</button>
        <div>
            <pre id="result"></pre>
        </div>
</body>
</html>

3. 결과

  • 화면

  • get log 버튼을 누르면 새로 파일을 읽어와서 화면 갱신

4. 앞으로 해야 할 일

grafana같은 로그 모니터링 툴 도입이 필요할 것 같다

profile
무설탕 음료를 좋아합니다

0개의 댓글