다들 잘 알고 있는 FE성능 분석 사이트인 webpagetest.org 를 docker를 이용하여 편리하게 private instance를 구성하는 방법을 해보자.
팀내에 구성해놓으면 여러모로 나름 쓸모가 있고
sitespeed.io의 Dashboard와 연계해서 사용해도 나름 나쁘지 않다.
Local WebPagetest Using Docker 의 내용을 기준으로 번역 및 짧게 요약.
Docker 실행환경 준비
대부분 맥을 사용한다고 생각하고 아래 URL에서 Docker 를 다운로드 받아 설치하면 된다.
https://docs.docker.com/docker-for-mac/install/
설치가 완료되면 상단 Docker(고래모양 Toolbox가 나오게 되는데 )
눌러보면 현재 Docker의 상태를 알수 있다.
Docker Container 설정.
WebPageTest는 Server와 Agent로 나누어 진다. Agent가 다양할수록 여러 브라우저에서 테스트가 가능하다.
Server : https://hub.docker.com/r/webpagetest/server/
Agent : https://hub.docker.com/r/webpagetest/agent/
$ docker pull webpagetest/server
$ docker pull webpagetest/agentDocker Container 실행
Server -> Agent 순으로 구동을 시켜야만 한다.
Server 구동
# -d background 모드로 실행한다고 생각하면 된다. 이걸 사용안하면 표준출력을 그대로 보게 된다.
# -p 포트지정.(4000 port외에 자유지정 가능.)
# --rm Docker를 종료할때 컨테이너가 자동으로 제거되도록 한다.
$ docker run -d -p 4000:80 --rm webpagetest/serverhttp://localhost:4000 에 접속하여 확인가능
Agent 구동
# --network="host" 에이전트가 서버 컨테이너와 통신 할 수 있게한다.
# -e SERVER_URL을 지정안하면 Agent 구동시 에러가 발생한다.
# 위에서 Server구동시 4000포트를 바꾸었다면 아래 SERVER_URL의 port를 바꾸어 준다.
# 여기서도 -p 시 포트는 자유지정 가능하다.
$ docker run -d -p 4001:80 \
--network="host" \
-e "SERVER_URL=http://localhost:4000/work/" \
-e "LOCATION=Test" \
webpagetest/agent구성 확인하기
기본으로 따라하였다면 http://localhost:4000 접속시 화면이 보일 것이다.
http://localhost:4000/install 을 들어가보면 설치 상태를 확인할 수 있다.
Mac OS의 경우 Traffic Shaping 지원불가로 인해 추가 작업 필요.
제목과 Mac에서는 Traffic Shaping 지원 불가로 테스트 해보면 실행이 되지 않는다.. ㅠㅠ
따라서 아래 작업이 필요하다.
SERVER
디렉토리를 생성해서 아래 두 파일을 만들고 build를 수행한다.
참고로 Dockerfile은 어떤이미지에 어떠한 행위를 하겠다고 기술해 놓는 파일이다.
아래 Dockerfile내용을 보면 webpagetest/server 이미지에 "/var/www/html/settings/" 위치에 locations.ini 파일을 추가 하라는 뜻으로 해석하면 된다.
Dockerfile 파일
FROM webpagetest/server
ADD locations.ini /var/www/html/settings/locations.ini 파일
[locations]
1=Test_loc
[Test_loc]
1=Test
label=Test Location
group=Desktop
[Test]
browser=Chrome,Firefox
label="Test Location"
connectivity=LAN도커파일 빌드.
# 도커파일 빌드
$ docker build -t local-wptserver .Agent
디렉토리를 생성해서 아래 2 파일을 만들고 build를 수행한다.
Dockerfile
FROM webpagetest/agent
ADD script.sh /
ENTRYPOINT /script.shscript.sh
set -e
if [ -z "$SERVER_URL" ]; then
echo >&2 'SERVER_URL not set'
exit 1
fi
if [ -z "$LOCATION" ]; then
echo >&2 'LOCATION not set'
exit 1
fi
EXTRA_ARGS=""
if [ -n "$NAME" ]; then
EXTRA_ARGS="$EXTRA_ARGS --name $NAME"
fi
python /wptagent/wptagent.py --server $SERVER_URL --location $LOCATION $EXTRA_ARGS --xvfb --dockerized -vvvvv --shaper none쉘 권한 추가 및 도커파일 빌드
# 실행권한
$ chmod u+x script.sh
# 도커파일 빌드
$ docker build -t local-wptagent .기존 컨테이너 종료
$ docker ps
CONTAINER ID IMAGE
5e2374829136 webpagetest/agent
1cf57d494fc8 webpagetest/server
$ docker stop 5e2374829136
$ docker stop 1cf57d494fc8컨테이너 실행
$ docker run -d -p 4000:80 local-wptserver
$ docker run -d -p 4001:80 \
--network="host" \
-e "SERVER_URL=http://localhost:4000/work/" \
-e "LOCATION=Test" \
local-wptagent
다들 잘 알고 있는 webpagetest.org 를 docker를 이용하여 편리하게 private instance를 구성하는 방법을 해보자.
팀내에 구성해놓으면 여러모로 나름 쓸모가 있고
sitespeed.io의 Dashboard와 연계해서 사용해도 나름 나쁘지 않다.
Local WebPagetest Using Docker 의 내용을 기준으로 번역 및 짧게 요약.
Docker 실행환경 준비
대부분 맥을 사용한다고 생각하고 아래 URL에서 Docker 를 다운로드 받아 설치하면 된다.
https://docs.docker.com/docker-for-mac/install/
설치가 완료되면 상단 Docker(고래모양 Toolbox가 나오게 되는데 )
눌러보면 현재 Docker의 상태를 알수 있다.
Docker Container 설정.
WebPageTest는 Server와 Agent로 나누어 진다. Agent가 다양할수록 여러 브라우저에서 테스트가 가능하다.
Server : https://hub.docker.com/r/webpagetest/server/
Agent : https://hub.docker.com/r/webpagetest/agent/
$ docker pull webpagetest/server
$ docker pull webpagetest/agentDocker Container 실행
Server -> Agent 순으로 구동을 시켜야만 한다.
Server 구동
# -d background 모드로 실행한다고 생각하면 된다. 이걸 사용안하면 표준출력을 그대로 보게 된다.
# -p 포트지정.(4000 port외에 자유지정 가능.)
# --rm Docker를 종료할때 컨테이너가 자동으로 제거되도록 한다.
$ docker run -d -p 4000:80 --rm webpagetest/serverhttp://localhost:4000 에 접속하여 확인가능
Agent 구동
# --network="host" 에이전트가 서버 컨테이너와 통신 할 수 있게한다.
# -e SERVER_URL을 지정안하면 Agent 구동시 에러가 발생한다.
# 위에서 Server구동시 4000포트를 바꾸었다면 아래 SERVER_URL의 port를 바꾸어 준다.
# 여기서도 -p 시 포트는 자유지정 가능하다.
$ docker run -d -p 4001:80 \
--network="host" \
-e "SERVER_URL=http://localhost:4000/work/" \
-e "LOCATION=Test" \
webpagetest/agent구성 확인하기
기본으로 따라하였다면 http://localhost:4000 접속시 화면이 보일 것이다.
http://localhost:4000/install 을 들어가보면 설치 상태를 확인할 수 있다.
Mac OS의 경우 Traffic Shaping 지원불가로 인해 추가 작업 필요.
제목과 Mac에서는 Traffic Shaping 지원 불가로 테스트 해보면 실행이 되지 않는다.. ㅠㅠ
따라서 아래 작업이 필요하다.
SERVER
디렉토리를 생성해서 아래 두 파일을 만들고 build를 수행한다.
참고로 Dockerfile은 어떤이미지에 어떠한 행위를 하겠다고 기술해 놓는 파일이다.
아래 Dockerfile내용을 보면 webpagetest/server 이미지에 "/var/www/html/settings/" 위치에 locations.ini 파일을 추가 하라는 뜻으로 해석하면 된다.
Dockerfile 파일
FROM webpagetest/server
ADD locations.ini /var/www/html/settings/locations.ini 파일
[locations]
1=Test_loc
[Test_loc]
1=Test
label=Test Location
group=Desktop
[Test]
browser=Chrome,Firefox
label="Test Location"
connectivity=LAN도커파일 빌드.
# 도커파일 빌드
$ docker build -t local-wptserver .Agent
디렉토리를 생성해서 아래 2 파일을 만들고 build를 수행한다.
Dockerfile
FROM webpagetest/agent
ADD script.sh /
ENTRYPOINT /script.shscript.sh
set -e
if [ -z "$SERVER_URL" ]; then
echo >&2 'SERVER_URL not set'
exit 1
fi
if [ -z "$LOCATION" ]; then
echo >&2 'LOCATION not set'
exit 1
fi
EXTRA_ARGS=""
if [ -n "$NAME" ]; then
EXTRA_ARGS="$EXTRA_ARGS --name $NAME"
fi
python /wptagent/wptagent.py --server $SERVER_URL --location $LOCATION $EXTRA_ARGS --xvfb --dockerized -vvvvv --shaper none쉘 권한 추가 및 도커파일 빌드
# 실행권한
$ chmod u+x script.sh
# 도커파일 빌드
$ docker build -t local-wptagent .기존 컨테이너 종료
$ docker ps
CONTAINER ID IMAGE
5e2374829136 webpagetest/agent
1cf57d494fc8 webpagetest/server
$ docker stop 5e2374829136
$ docker stop 1cf57d494fc8컨테이너 실행
$ docker run -d -p 4000:80 local-wptserver
$ docker run -d -p 4001:80 \
--network="host" \
-e "SERVER_URL=http://localhost:4000/work/" \
-e "LOCATION=Test" \
local-wptagent'튜닝 > 성능측정' 카테고리의 다른 글
| 컴퓨터의 DNS는 무엇으로 설정하는게 가장 좋을까? (0) | 2017.12.08 |
|---|---|
| sitespeed.io 4를 이용한 사이트/페이지별 타이밍, 리소스, 퍼포먼스 측정 및 시각화방법 (0) | 2017.02.22 |
| PageSpeed insights를 이용한 성능측정 (0) | 2014.10.31 |
| Chrome PageSpeed를 이용한 Front-End 성능측정 (0) | 2014.10.31 |
