Docker로 Webpagetest private instance 구성하기
다들 잘 알고 있는 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/agent
Docker Container 실행
Server -> Agent 순으로 구동을 시켜야만 한다.
Server 구동
$ docker run -d -p 4000:80 --rm webpagetest/server
http://localhost:4000 에 접속하여 확인가능
Agent 구동
$ 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 파일
1=Test_loc
1=Test
label=Test Location
group=Desktop
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.sh
script.sh
#!/bin/bash
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
Docker로 Webpagetest private instance 구성하기
다들 잘 알고 있는 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/agent
Docker Container 실행
Server -> Agent 순으로 구동을 시켜야만 한다.
Server 구동
$ docker run -d -p 4000:80 --rm webpagetest/server
http://localhost:4000 에 접속하여 확인가능
Agent 구동
$ 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 파일
1=Test_loc
1=Test
label=Test Location
group=Desktop
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.sh
script.sh
#!/bin/bash
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
