Storage

 [성능테스트] Apache - JMeter plugin 다운로드, 적용, 예제

본문 작성 이전에 Response Times Over Time 를 사용할 수 있는 파일을 첨부하였습니다.

미심쩍다 싶으신분들은 아래 공식홈페이지에서 직접다운로드 받으시면됩니다!

jpgc-graphs-basic-2.0.zipResponse Times Over Time 플러그인 다운로드    ------>       jpgc-graphs-basic-2.0.zip

저번에 JMeter 포스팅에 이어 두번째 JMeter 플러그인을 추가해서 사용하는 법에대해 포스팅하겠습니다.

플러그인 중에 많이쓰는 Response Times Over Time 플러그인에 대한 예제를 포스팅하겠습니다.

JMeter plugin은 jmeter-pluguns.org 에서 다운로드 할수있습니다.

제가 쓰려는 Response Times Over Time 플러그인 말고도 여러 종류가 많이 있네요.

둘러보시고 원하시는 플러그인을 사용하시면 될것 같습니다.

저는 Response Times Over Time 플러그인으로 사용을 해야되서 

Response Times Over Time 다운로드페이지로 왔습니다.

직링크 : https://jmeter-plugins.org/wiki/ResponseTimesOverTime/

위에 주소로 접속하시면 되구요. 위에 화면처럼 나오시면 다운로드 버튼을 눌러줍니다.

Response Times Over Time 는 응답시간과 시간별을 그래프로 표현해주는 리스너를 사용하는 것 같네요.

위에 화면의 빨간색 다운로드버튼을 누르시면 다운로드가 진행됩니다.

파일명은 잘 기억나지 않지만 zip파일로 저장이됩니다.

다운로드를 받으셨다면 압축을 풀고

위에 화면처럼 압축을 풀면 lib폴더에 jar이있고, ext폴더에도 jar이 있습니다.

이걸 JMeter이 설치된 폴더에 복사해주시기만 하면됩니다.

저는 폴더구조가 apache-jmeter-2.13 > lib > ext 이렇게 구성되있는데요.

다른버전도 다 비슷한것 같습니다.

해당 경로에 맞게 lib폴더와 ext폴더에 jar를 각각 넣어줍니다.

그리고 나서 JMeter이 켜져있으시다면 재부팅을 해주세요.

재부팅하시고 다시 접속하셔서

그룹 오른쪽버튼 클릭하시고

Add > Listener > 이쪽에 jp@gc 라고 리스너가 여러개 생겼습니다.

저는 다른 리스너들도 넣어가지고 좀더 많은데 

jp@gc - Response Times Over Time 를 클릭해주세요.

이상태에서는 바로 확인할수가 없으니 상단에 테스트를 시작해주세요.

저는 Group에서 인원 25명 / 테스트 횟수 10회로 지정해줬습니다.

실행을 하시면 진행되는동안 그래프가 그려집니다.

위에 화면은 완료된 후의 그래프인데요.

x축은  Over Time / y축은 Response Times 이구요.

그래프 상단에 테스트한 이름별로 색깔로 그래프가 그려져서 한눈에 보기가 좋습니다.

기본 Listener에서는 제공되지않는 보기쉽고 응답시간을 바로 볼수있어서 많이들 사용하시더라구요.

저도 이번 프로젝트에서 사용하게 되어서 급히... 속성으로 찾아봤네요.

아 그래프에서 클릭을 하시면 값의 세부정보가 나오는데 이부분은 캡처를 못했네요;;

그래프의 결과를 저장해야겠죠.

성능테스트 결과산출물이나 그런곳에 첨부하려면 사진이 필요한데

캡처를 안해도 오른쪽 마우스클릭을 하시면 저장방법이 3가지가 있습니다.

1. 클립보드에 이미지를 카피하는 것

2. 이미지저장 

3. 엑셀csv로 저장 이 있습니다.

1,2 번 같은 경우에는 그래프 이미지를 저장하는 것이구요.

3번 같은 경우는 그래프의 상세 데이터를 엑셀 csv로 저장할 수 있습니다.

위에 사진이 2. 사진으로 저장한 것입니다.

깔끔하게 아주 잘 잘라서 저장해주네요.

이부분은 3. 엑셀 csv로 저장을 한부분인데.

첫 열에서 테스트한 정보가 나오구요.

그아래로는 시간대별로 응답시간입니다. 

단위는 m/s 라서 1000에 1초라고 보시면됩니다.

저도 처음에는 그래프 누르면서 데이터를 확인했는데....

csv로 저장되니까 엑셀 함수 조금만 쓰시면 최대값, 최소값, 평균값을 쉽게 구할수 있겠네요.

여기서부터는 그래프의 세부옵션입니다.

차트위에 탭중에 Rows탭인데요.

원하는 결과가 없는것도 그래프에 찍혔다 하시면 체크박스의 체크를 해지하시면 그래프에서 사라집니다.

하나씩 캡처를 해야되거나 하시면 여기서 체크를 해지하셔서 사용하시면 좋을것 같습니다.

Settings 탭입니다.

여기서는 그래프의 x축의 시간을 Group timeline values for을 사용하여 500~60000까지 세부 조정할수 있구요.

Type of graph 하단에 라디오 버튼 2개가 있는데요.

기본으로 설정되있는게 전체다 보는거구요.

아래 라디오버튼은 평균의 그래프를 표출해줍니다.

평균의 그래프를 캡처할때 사용하겠네요.

그리고 다시 전체값 그래프로 돌아와서

하단 세부설정에서 포인트가 위에캡처하신거보면 엄청많은데

포인트의 갯수를 수정해줄수있습니다.

체크를 해지하시면 아에 포인트를 지울수도있죠.

포인트가 너무많아서 지져분해서 그래프가 안보일수도 있으니

포인트의 갯수를 지정하시거나 그래프를 캡처할때는 포인트만 지우셔도 괜찮을 것 같습니다.

여기까지 JMeter 플러그인인 Response Times Over Time 에 대하여 다운로드 및 적용 예제까지 진행하였습니다.

몇일 써본결과 상당히 리스너도 많고, 여러가지 플러그인을 지원을 많이 하는 것 같더라구요.

성능테스트할때 작동법만 알고있다면 테스트하기에는 상당히 좋은 툴인것 같습니다.

이상으로  Apache의 JMeter plugin 다운로드와 적용 및 예제까지 진행해봤습니다.

[성능테스트] Apache - JMeter 사용법

이번 포스팅은 성능테스트를 할수있는 Apache - JMeter 사용법에 대해서 포스팅하겠습니다.

JMeter 는 url정보를 입력해주고, 상황에따라 parameter을 넣어주신 후에 테스트할 사용자 및 반복횟수를 설정하여

성능을 확인할수 있습니다. 가장 기본적인 기능이고 자세한 기능들은 아직 저도 많이 안써봐서 잘모르겠네요..

아래는 로그인부터 쿠키저장을 하고 내부에 프로세스까지 테스트하는 직접 해본 예제를 첨부하였습니다.

아파치 JMeter 홈페이지

http://jmeter.apache.org/

JMeter 다운로드 ( 최신버전 이전의 버전들 )

https://archive.apache.org/dist/jmeter/binaries/ 

아파치 jmeter 홈페이지에서는 참고하실수있는 기본적인 매뉴얼 등을 제공하며 jmeter을 다운로드 받으실수 있습니다.

현재 최신버전은 Apache JMeter 3.3 버전 ( Java 8 필요 ) 이며, JMeter 3.3은 아직 Java 9를 지원하지 않습니다.

저는 기존 프로젝트가 java7 버전을 사용해서, JMeter 2.13버전을 다운로드 받아 사용했습니다.

Apache-jmeter-2.13.zip 을 다운로드하였으며, 압축을 풀어줍시다.

압축을 풀어서 폴더로 들어가시면

위와같이 폴더와 파일들이 있는데요.

apache-jmeter-2.13 / bin 폴더로 들어가셔서 jmeter.bat 를 실행하시면 됩니다.

실행하시면 cmd창과 함께 JMeter이 실행됩니다. ( cmd창 종료시 JMeter도 같이 종료됩니다. )

처음 화면에서 Test Plan 오른쪽 버튼을 클릭해서

Test Plan > Threads (Users) > Throad Gruop 를 클릭하여 생성해줍니다.

Throad Gruop 에서 설정해주셔야할게 있는데요.

성능테스트에서 가장 중요한 부분입니다.

표시를 못했는데 빨간박스 위에 부분에

Action to be taken after a Sampler error 이부분은 실행 중에 에러가 발생하면 처리할 방법을 선택해주시면 되구요.

빨간박스 Thread Properties 부분을 설정해주셔야되는데

Number of Threads ( users ) : 쓰레드의 갯수를 선택합니다. 쉽게말해서 유저라고 생각하시면 되고 몇명의 유저로 테스트를 할건지? 정해주시면 됩니다.

Ramp-Up Period ( in seconds ) : 쓰레드가 여러개면 여러개의 실행시간을 users로 계산해서 실행시키는것 같습니다.

Loop Count : user가 테스트할 반복할 횟수를 넣어주시면 됩니다.

생성된 Throad Gruop 에서 우클릭하셔서

Add > Config Element > HTTP Cookis Manager 클릭해주세요.

Throad Gruop 에서 또 우클릭하셔서

Add > Logic Conrtoller > Once Only Controller 클릭해주세요.

생성된 Once Only Controller 에서 우클릭하셔서

Add > Sample > HTTP Request 클릭해주세요.

생성된 HTTP Request 에서 설정을 해줘야됩니다.

위에 빨간색으로 표시해준 부분을 설정해줘야되는데요.

HTTP Request

Name : doLogin ( 나중에 Request 가 많아져 헷갈릴수 있으니 Name을 설정해줍니다. )

Server Name or IP : localhost ( http:// 를 제외한 주소를 적어줍니다. )

Port Number : 80 ( 사용하시는 포트를 입력해주시면 되구요, )

Method : POST ( 저는 POST방식으로 로그인을 해서 POST를 설정했는데 GET방식이시면 GET으로 하시면 됩니다. ) 

Path : /common/doLogin.do ( 주소뒤에 해당 mapping 주소를 입력해줍니다. )

Parameters : ( 실제 로그인 하실 계정정보를 입력해주시면됩니다. )

 - id : admin (  저는 id라고 적었는데 해당 input의 id값을 적어주시면 됩니다. ex) id="user_id" 이시면 user_id )

 - pw : admin ( input의 pw의 id값을 적어주시구요.)

Login을 하고 다음페이지를 확인하기 위해서

Thread Group 에서 우클릭하셔서

Add > Sample > HTTP Request 클릭해주세요.

이번에도 HTTP Request 에서 설정을 해줘야됩니다.

위에 빨간색으로 표시해준 부분을 설정해줘야되는데요.

위에서 설정을 많이해줘서 Name을 포함해서 4가지만 적어주시면 됩니다.

HTTP Request

Name : main 

Server Name or IP : localhost ( http:// 를 제외한 주소를 적어줍니다. )

Port Number : 80 ( 사용하시는 포트를 입력해주시면 되구요, )

Path : /common/doLogin.do ( 주소뒤에 해당 mapping 주소를 입력해줍니다. )

*제목이나 내용과 키워드를 가지고 조회기능이 있는 리스트에는 위에 처럼 Parameters 를 넣어주면 되는데요.

제목이나 내용의 selectBox 가있으면 그값의 id와 해당값

키워드면 해당 input text 창의 id와 해당값을 적어주시고

Method 도 post or get을 설정해서 테스트를 하시면 결과 HTML값에 해당 리스트만 나오는 것을 확인할 수 있습니다.

이제 생성하는 것은 실행후 확인할수있는 Listener를 등록해주겠습니다.

위와 같이 Thread Group 우클릭을 해서

Add > Listener > View Results Tree / Summary Report / Graph Results 를 클릭해 주세요.

보통 View Results Tree / Summary Report / Graph Results 등을 많이 사용합니다.

그외에 추가로 그래프 같은것을 사용하시려면 라이브러리를 추가해주면 됩니다.

다음 아래 화면들은 Listener 등을 이용한 결과값 확인입니다. 

Graph Results 리스너입니다.

전체적인 결과를 그래프로 보여줍니다.

위에사진은 다른 결과의 값을 임의로 가져왔는데요.

위에서 The Group의 값이 1씩이라 그래프가 안나와서 값을 50씩 넣어줘서 돌린 결과입니다.

The Group 데이터의 값이 크면 클수록 데이터가 잘 나옵니다.

Summary Report 리스너입니다.

결과 값이 이렇게 나오는데 순차적으로 보시면

Label :  HTTP Request 의 NAME

# Samples : 서버에 요청한 횟수

Average : 평균 응답시간 (ms)

Min : 최소 응답시간 (ms)

Max : 최대 응답시간 (ms)

Error : 에러율

등 을 의미합니다.

마지막으로 View Results Tree 입니다.

다른 리스너보다는 한번에 결과를 볼수 있어서 바로 보기는 좋습니다.

빨간박스 왼편에 초록색으로 들어와있는 부분이 정상적으로 접속이 됬으면 초록색으로 표출되구요.

404에러 ip주소나 port 또는 url이 잘못됬을 경우는 빨간색 ! 표시가 나오게 됩니다.

로그인이나 그런부분에서 잘처리가 되었다면. Response data에서 

화면에 해당하는 JS 및 HTML이 표출되서 확인해보시면 빠르게 파악하실수 있습니다.

그밖에 post방식으로 전송했는지 get방식인지 Prameter는 어떤걸 보냈는지 다 확인할수 있으며, 

오류발생시 이것을보고 값 셋팅을 다시해주면 되겠습니다. 

*만약 Reponse data가 빈화면으로 나오면 ( JMeter response data empty )

jmeter.porperties 파일을 에디터로 켜서 아래부분이 false로 되있다면 true로 변경해주세요.

jmeter.save.saveservice.response_data = true

jmeter.save.saveservice.samplerData = true

* 그 밖에 인터넷으로는 접속이 되는데 JMater으로는 404에러가 뜬다 하시면

해당 url로 접속해서 크롬 개발자모드로 header부분을 확인해주시고

JMeter에서는 The Group 하위에 add > Config Element > HTTP Header Manager 추가하신후 해당하는 Header를 넣어주시고 테스트해보시면 될수도있습니다.

The Group 을 여러개 생성해서 서비스 분야별로 정리하거나 홈페이지별로 정리해서 사용하시면 더욱 편리합니다.

Chart.js로 JSP 차트띄우기 (버전주의 Chart.min.js - 1.0.2)

chartJS를 가지고 jsp에 차트를 띄운 예제를 공유해드리겠습니다.

일단 아래부분에 스크립트를 head안쪽이나 스크립트있는쪽에 넣어서 import해주세요.

그리고 자바스크립트부분에 아래 barChart() / lineChart() 두가지 함수가있는데

barChart는 막대모양차트이고 lineChart는 선그래프차트입니다.

data 안쪽에 labels: [] 이안에는 하단에 들어갈 데이터이며, labels와 datasets - data와 갯수가 동일해야합니다.

사진보시면 대충 데이터가 어떤곳에 쓰이는지 감이 오실거라 믿습니다.

그밖에 datasets안쪽에 label아래는 차트의 색상값을 설정해줄수있습니다.

설정이 다됬으면

var ctx = document.getElementById("barCanvas").getContext("2d"); 

var options = { };

var barChart = new Chart(ctx).Bar(data, options);

이부분이 canvas의 ID값을 가지고 캔버스에 2d차트를 띄워주는 부분입니다.

옵션이 필요하시면 옵션값을 주면됩니다.

위와같이 new Chart로 각 ctx / data / option 등등 넣어서 띄워주시면됩니다.

JSP - html부분에서 <canvas>태그에 차트가 그려지며, 

아래소스보시면 아시겠지만태그에 높이와 너비등을 설정해줄수있습니다. 

자세한 옵션의 함수나 그래프유형 스크립트 및 파일등이 필요하시면 

chartJS공식홈페이지 : http://www.chartjs.org/samples/latest/ 

공식홈페이지를 이용하시면 될것같습니다.

SCRIPT

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>

JSP - 자바스크립트

// 막대차트입니다.

function barChart(){

var data = {

labels: ["09시", "10시", "11시", "12시", "13시", "14시", "15시", "16시", "17시", "18시", "19시", "20시", "21시", "22시"],

datasets: [

{

label: "",

fillColor: "rgba(150,200,250,0.5)",

strokeColor: "rgba(150,200,250,0.8)",

highlightFill: "rgba(150,200,250,0.75)",

highlightStroke: "rgba(150,200,250,1)",

data: [65, 59, 80, 81, 56, 55, 30, 100, 120, 50, 11, 40, 70, 120]

}

]

};

    var ctx = document.getElementById("barCanvas").getContext("2d");

    var options = { };

    var barChart = new Chart(ctx).Bar(data, options);

}

//선 차트입니다.

function lineChart(){

var data = {

        labels: ["월","화","수","목","금","토","일"],

        datasets: [

            {

                label: "",

                fillColor: "rgba(220,220,220,0.2)",

                strokeColor: "rgba(220,220,220,1)",

                pointColor: "rgba(220,220,220,1)",

                pointStrokeColor: "#fff",

                pointHighlightFill: "#fff",

                pointHighlightStroke: "rgba(220,220,220,1)",

                data: [2, 3, 5, 7, 11, 13, 17]

            },

            {

                label: "",

                fillColor: "rgba(151,187,205,0.2)",

                strokeColor: "rgba(151,187,205,1)",

                pointColor: "rgba(151,187,205,1)",

                pointStrokeColor: "#fff",

                pointHighlightFill: "#fff",

                pointHighlightStroke: "rgba(151,187,205,1)",

                data: [0, 1, 1, 2, 3, 5, 8]

            }

        ]

    };

    var ctx = document.getElementById("lineCanvas").getContext("2d");

    var options = { };

    var lineChart = new Chart(ctx).Line(data, options);

}

JSP - HTML

<-- 막대차트입니다. -->

<div class="graphBox">

<canvas id="barCanvas" width="384" height="210"></canvas>

</div>

<-- 선차트입니다. -->

<div class="graphBox">

<canvas id="lineCanvas" width="384" height="210"></canvas>

</div>

* strokeColor - borderColor 변경됨

* type 선언이 달라짐 아래와같이 type선언

var ctx = document.getElementById(elementId).getContext('2d');

new Chart(ctx, {

    type: 'bar',

    data: {

        labels: labels,

        datasets: [{

            label: label,

            data: data,

            backgroundColor: 'rgba(54, 162, 235, 0.2)',

            borderColor: 'rgba(54, 162, 235, 1)',

            borderWidth: 1

        }]

    },

    options: {

        scales: { yAxes: [{ ticks: { beginAtZero:true } }] }   // 데이터값 시작을 0부터시작

    }

});

※ lables 와 data에 request값 넣기

//차트 값 생성

var labels = new Array();

var data = new Array();

<c:forEach items="${resultList}" var="result" >

var json = new Object();

labels.push("${result.month}");

data.push("${result.monthVal}");

</c:forEach>