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 구동

# -d background 모드로 실행한다고 생각하면 된다. 이걸 사용안하면 표준출력을 그대로 보게 된다.
# -p 포트지정.(4000 port외에 자유지정 가능.)
# --rm Docker를 종료할때 컨테이너가 자동으로 제거되도록 한다.
$ docker run -d -p 4000:80 --rm webpagetest/server

http://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.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 구동

# -d background 모드로 실행한다고 생각하면 된다. 이걸 사용안하면 표준출력을 그대로 보게 된다.
# -p 포트지정.(4000 port외에 자유지정 가능.)
# --rm Docker를 종료할때 컨테이너가 자동으로 제거되도록 한다.
$ docker run -d -p 4000:80 --rm webpagetest/server

http://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.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