Spring boot 모니터링 Actuator 소개 및 설치

web/Spring|2019. 8. 11. 21:38

spring acturator를 통해서 스프링 애플리케이션의 작동여부등을 체크해보자.

 

설정


우선 gradle 라이브러리를 추가한다.

compile 'org.springframework.boot:spring-boot-starter-actuator'

그리고 기존에는 application.properties나 yml에 아래 옵션을 설정해줘야 했지만 기본적으로 설정이 되어있다.

endpoints.health.enabled=true

하지만 이는 Spring boot 2.0에서 다음으로 변경되었다. (https://stackoverflow.com/questions/48900892/how-to-enable-all-endpoints-in-actuator-spring-boot-2-0-0-rc1)

 

How to enable all endpoints in actuator (Spring Boot 2.0.0 RC1)

I moved to Spring Boot 2.0.0 RC1 from 1.5.10 and I am stuck with actuator in the latest version. How can I enable expose and enable all actuator endpoints? The only endpoints that get exposed are:...

stackoverflow.com

각 health, info등으로 적어도 되지만 귀찮으면 asterisk로 모두 포함해도 된다. 대표적인 엔드포인트에 대한 설명은 아래 기재해 놓았다.

management:
  endpoints:
    web:
      exposure:
        include: "*"

endpoint는 다음과 같이 지정해줄수 있다.

management:
  endpoints:
    web:
      base-path: /application

 

기본적인 정보를 보여주는 Endpoint 


Actuator에서 사용할 수 있는 기본적인 엔드포인트는 다음과 같고 더 자세하게 다른 정보를 볼 수 있는 api들도 제공한다.

 

/health

 앱의 대한 건강 정보를 보여준다. 


/info 

전체적인 앱에 대한 정보를 보여준다.


/metrics 

앱에 대한 통계정보를 보여준다. (카운터 등등) 

우선적으로 볼 수 있는 파라미터정보가 나오고 상세히 보고 싶은경우 다음 경로에 추가해서 조회하면 볼 수있다.


/httptrace

앱에 대한 상세 요청정보를 보여준다.

 

Spring Acturator의 데이터는 모두 휘발성으로 데이터를 저장하고 있지는 않다. 이를 저장하는 방법은 따로 있는지는 확인해보지는 않았다. 나주에 기회되면 확인해보고 정리해봐야겠다. 그리고 health endpoint를 내가 원하는대로 커스텀할 수 있다. 이 또한 당장 필요성이 없어 상세하게 알아보지는 않았지만 크게 어렵지는 않은 것 같다. 

모니터링 할 수 있는 Acturator가 생각보다 괜찮은 것 같다. 나중에 실무에서 써볼 수 있으면 써봐야겠다.

 

댓글()

Swagger 라이브러리를 사용하여 API 내용 정리하기

web/Spring|2018. 8. 7. 00:08

Web 개발을 진행하다보면 다양한 API를 개발하게 된다.

하지만 정리하기가 쉽지 않고 이를 위해서 인터페이스정의서를 계속 정리하기도 사실 쉽지 않다. 
이를 위해서 한번에 API 내용이 정리되어 한눈에 볼 수 있도록 제공해주는 library가 있다. 이 library인 swagger를 적용해보자.

1. 라이브러리 추가
Swagger 사용을 위한 라이브러리를 gradle에 추가하자.

1
2
compile group: 'io.springfox', name: 'springfox-swagger2', version: '2.5.0'
compile group: 'io.springfox', name: 'springfox-swagger-ui', version: '2.5.0'
cs


2. Swagger 설정 관련 내용 Configuration 클래스 생성

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
package com.wedul.common.config;
 
import org.springframework.context.annotation.Configuration;
import springfox.documentation.builders.PathSelectors;
import springfox.documentation.builders.RequestHandlerSelectors;
import springfox.documentation.spi.DocumentationType;
import springfox.documentation.spring.web.plugins.Docket;
import springfox.documentation.swagger2.annotations.EnableSwagger2;
 
/**
 * Swagger 사용을 위한 설정 클래스
 */
@Configuration
@EnableSwagger2
public class SwaggerConfiguration {
 
    /**
     * 설정
     *
     * @return the docket
     */
    public Docket api() {
        return new Docket(DocumentationType.SWAGGER_2)
                .select()
                .apis(RequestHandlerSelectors.any()) // 현재 RequestMapping으로 할당된 모든 URL 리스트를 추출
                .paths(PathSelectors.ant("/user/**")) // /user/** 인 URL들만 추출
                .build();
    }
 
}
cs


Docket의 더 많은 사용법은 아래 사이트 참고.
https://swagger.io/tools/swaggerhub/hosted-api-documentation/


3. Spring Security 사용시 권한 허용
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
// 권한 허용 리스트
@Override
public void configure(WebSecurity web) throws Exception {
    // 허용되어야 할 경로들
    web.ignoring().antMatchers("/resources/**"
                               "/dist/**"
                               "/weather"
                               "/user/password/find",
                               "/user/join",
                               "/user/email",
                               "/user/nickname",
                               "/user/send/temppw",
                               "/findpw"
                               "/user/findpw",
                               "/user/cert/check",
                               "/join"
                               "/getLanguage/**",
                               "/getMessage",
                                "/api/**"); // #3
}
 
 
// resource 허용    
@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
    registry.addResourceHandler("/dist/**").addResourceLocations("/dist/");
 
    registry.addResourceHandler("/resources/**")
            .addResourceLocations("/WEB-INF/resources/");
 
    registry.addResourceHandler("swagger-ui.html")
            .addResourceLocations("classpath:/META-INF/resources/");
 
    registry.addResourceHandler("/webjars/**")
            .addResourceLocations("classpath:/META-INF/resources/webjars/");
}
cs

이렇게 한 후 실행 시키면 다음과 같이 swagger-ui를 확인할 수 있다.


또한 각 상황에 대해 API를 호출하면서 header, body, response 등을 확인할 수 있다.


댓글()

JQuery UI ToolTip에서 툴팁에 mouse over시 유지되도록 설정

web/jquery|2018. 7. 6. 19:50

업무를 진행하면서 jquery-ui를 이용해서 툴팁을 만들때 툴팁위에 마우스를 올렸을 때 툴팁이 유지되도록 하는 기능을 만들어야 했다. 

구글링을 통해서 방법을 찾았고 그 방법을 공유해보자.

먼저 기본적인 툴팁이 적용된 input box예제를 살펴보자.

 

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Tooltip functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
 
      <!-- CSS -->
      <style>
         body {
            margin-top: 100px;
         }
         .ui-tooltip-content::after, .ui-tooltip-content::before {
            content: "";
            position: absolute;
            border-style: solid;
            display: block;
            left: 90px;
         }
         .ui-tooltip-content::before {
            bottom: -10px;
            border-color: #AAA transparent;
            border-width: 10px 10px 0;
         }
         .ui-tooltip-content::after {
            bottom: -7px;
            border-color: white transparent;
            border-width: 10px 10px 0;
         }
      </style>
 
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#tooltip-7" ).tooltip({
               position: {
                  my: "center bottom",
                  at: "center top-10",
                  collision: "none"
               }
            });
         });
      </script>
   </head>
 
   <body>
      <!-- HTML -->
      <label for = "name">Enter Date of Birth:</label>
      <input id = "tooltip-7" title = "Please use MM.DD.YY format.">
   </body>
</html>
 
cs

 

단순하게 툴팁이 출력되고 마우스를 가져다 되면 사라져버린다.

툴팁에 마우스를 가져다 되었을 때 툴팁을 유지하기 위해서는 툴팁이 닫히려고 하는 이벤트에 ui hover 이벤트를 달아주면된다. 예제 코드는 다음과 같다.

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
$(function() {
            $( "#tooltip-7" ).tooltip({
               position: {
                  my: "center bottom",
                  at: "center top-10",
                  collision: "none"
               },
                close: function( event, ui ) {
                  ui.tooltip.hover(
                      function () {
                          $(this).stop(true).fadeTo(400, 1);
                          //.fadeIn("slow"); // doesn't work because of stop()
                      },
                      function () {
                          $(this).fadeOut("400", function(){ $(this).remove(); })
                      }
                  );
                }
            });
         });
cs

 

결과를 확인해보면 마우스를 위에 가져다 놓아도 사라지지 않는 것을 확인할 수 있다.

댓글()

dom element를 자유롭게 움직이고 수정할 수있게 하는 gridstack.js 소개

web/jquery|2018. 5. 27. 00:55

기존에 jquery-ui에서 sortable 메서드를 사용하여 element들을 자유롭게 움직일 수 있다.

하지만 미세한 이동이 어렵고, 크기 조절까지 한번에 하기에는 부적절하다.
그래서 검색결과 gridstack.js를 사용하면 편리하게 크기 조절 및 위치 이동까지 자유롭게 할 수있다는 것을 알았다.

[필요 라이브러리]
gridstack.js를 사용하기 위해서는 하단의 정보와 같이 몇몇 라이브러리가 필요하다.






[예제 코드]
1. package.json
-> 필요라이브러리가 추가된 package.json


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
{
  "name": "gridstack_test",
  "version": "1.0.0",
  "description": "gridstack_test",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "wedul",
  "license": "ISC",
  "dependencies": {
    "gridstack": "^0.4.0",
    "jquery": "^3.3.1",
    "jquery-ui": "^1.12.1",
    "jquery-ui-dist": "^1.12.1",
    "lodash.js": "^1.0.1",
    "underscore": "^1.9.0"
  }
}
cs




2. html
-> libarary 로드 후 html에 적용


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<link rel="stylesheet" href="lib/jquery-ui.css"></link>
<link rel="stylesheet" href="node_modules/gridstack/dist/gridstack.css"></link>
<style>
.grid-stack-item {
  border: 1px solid;
  background-color: #eee;
}
</style>
 
<button id="addBtn">항목 추가</button>
 
<div class="grid-stack">
    <div class="grid-stack-item"
        data-gs-x="0" data-gs-y="0"
        data-gs-width="4" data-gs-height="2">
            <div class="grid-stack-item-content">기존항목1</div>
    </div>
    <div class="grid-stack-item"
        data-gs-x="4" data-gs-y="0"
        data-gs-width="4" data-gs-height="4">
            <div class="grid-stack-item-content">기존항목2</div>
    </div>
</div>
 
<script type="text/javascript" src="node_modules/jquery/dist/jquery.js"></script>
<script type="text/javascript" src="node_modules/underscore/underscore.js"/></script>
<script type="text/javascript" src="lib/jquery-ui.js"/></script>
<script type="text/javascript" src="node_modules/gridstack/dist/gridstack.all.js"/></script>
<script type="text/javascript">
$(document).ready(function () {
  var options = {
      cellHeight: 80,
      verticalMargin: 10
  };
  $('.grid-stack').gridstack(options);
 
  let a = 0;
  $('#addBtn').click(() => {
    let $html = '<div id="'+ a + '" class="grid-stack-item" data-gs-x="0" data-gs-y="2" data-gs-width="4" data-gs-height="2">';
    $html += '<div class="grid-stack-item-content">추가된 항목</div></div>';
 
    $($html).appendTo($('.grid-stack'));
    $('.grid-stack').gridstack();
 
    var grid = $('.grid-stack').data('gridstack');
    grid.addWidget($('#' + a));
    a++;
  });
});
</script>
cs



[결과화면]
-> 자유롭게 위치 이동이 가능하고 사이즈 조절이 가능해진다.



[추가정보]
만약 기존에 element이외에 새로운 element에도 gridstack.js를 적용하고 싶은경우에는 다음과 같이 진행해야 한다.

위에 예제 소스에 있지만 필요한 소스는 다음과 같다.


1
2
3
4
5
6
7
8
let $html = '<div id="'+ a + '" class="grid-stack-item" data-gs-x="0" data-gs-y="2" data-gs-width="4" data-gs-height="2">';
    $html += '<div class="grid-stack-item-content">추가된 항목</div></div>';
 
    $($html).appendTo($('.grid-stack'));
    $('.grid-stack').gridstack();
 
    var grid = $('.grid-stack').data('gridstack');
    grid.addWidget($('#' + a));
cs



gridstack 요소를 가져온 후  addWidget(el)메소드를 사용하여 추가한다.

[속성소개]
- 각 elemenet들이 가지고 있는 몇 가지 속성들이 있다. 모두 소개할 수는 없고 가로, 세로, 위치 좌표에 대한 정보만 소개하겠다. (나머지는 API문서 참고)





위에 소스에서 보면 다음과 같이 속성들을 가지고 있다.

data-gs-x="5"            위치 x좌표 
data-gs-y="0"            위치 y좌표
data-gs-width="4"    가로크기
data-gs-height="4"   세로크기

해당 데이터를 접근하기 위해서는 $('#id').data('gs-x')와 같은 방식으로 접근하면 된다.


[참고자료]
gridstack.js 사이트
http://gridstackjs.com/


github 사이트
https://github.com/gridstack/gridstack.js#api-documentation



댓글()