[CI/CD] Gitlab-ci.yml 작성 예제 - SiteSpeed.io

사실, Gitlab의 경우에는 Premium 버전을 구매해서 사용하게 되면 다양한 플러그인을 제공한다.

그 중 하나가 SiteSpeed.io이지만, 여기서는 무료버전에서 해당 기능을 사용하고자 하는 것이므로

이와 관련된 내용을 적고자 한다.

 

SiteSpeed.io는 특정 사이트에 대해 프론트엔드의 부하테스트(load test)를 수행할 수 있는 툴.

---

gitlab-ci.yml은 다음과 같이 작성할 수 있다.

여기서는 제공되는 플러그인이 아닌, NPM에 등록되어있는 sitespeed.io 패키지를 사용한다

주의할 점은 실제 실행되고 있는 서버가 있어야 한다는 점

 

sitespeed:
  stage: after_test

  // NPM에 등록된 SiteSpeed.io 패키지를 사용하고자 함
  image: node:16-buster

  before_script:
    - apt update
    - apt install -y npm wget
    // Firefox 혹은 Chrome 드라이버를 사용하여 테스트를 진행할 수 있음
    - wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub |
         apt-key add - && echo "deb http://dl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google.list
    - apt update && apt -y install google-chrome-stable firefox-esr

  script:
    - npm install -g sitespeed.io
    - cd /usr/local/lib/node_modules/sitespeed.io/node_modules/@sitespeed.io/chromedriver && node install.js && cd
    - cd /usr/local/lib/node_modules/sitespeed.io/node_modules/@sitespeed.io/geckodriver && node install.js && cd
    // sitespeed.io 패키지를 사용하여 특정 IP혹은 DNS에 테스트를 진행하고 결과를 출력함
    - sitespeed.io --headless --browsertime.chrome.args no-sandbox '서버 주소:포트'
    // 테스트 결과를 압축하고, 파일을 추출할 수 있도록 이동 
    - tar -cvzf sitespeed-result.tar.gz /root/sitespeed-result
    - cp sitespeed-result.tar.gz ${CI_PROJECT_DIR}/sitespeed-result.tar.gz

  artifacts:
    paths:
      // Artifact를 생성하고 추출하여, 사용자로 하여금 gitlab에서 다운로드 할 수 있도록 함  
      - ${CI_PROJECT_DIR}/sitespeed-result.tar.gz  
   // sitespeed 단계는 실제 동작중인 서버가 있어야하므로, 서버 동작 후 실행할 수 있도록 job을 일시정지시켜둠.
    // 사용자가 원하는 때에 gitlab에서 해당 단계를 수행할 수 있음
  when: manual
  allow_failure: false

여기서, 그리고 이전과 이후에 종종 보이는 CI_PROJECT_DIR 변수는 gitlab이 제공하는 기본적인 환경변수로,

CI_PROJECT_DIR

The full path where the repository is cloned and where the job is run

위와 같은 내용을 담당하고 있다. 아티팩트를 저장할 때, 저 위치에 저장하지 않으면 추출이 안되더라!

 

앞선 포스트에서 설명한바와 같이, Unit, Coverage 테스트가 진행된 후 생성된 이미지를 deploy하고

해당 이미지로 서버를 구동한 뒤에 위 단계가 동작할 수 있도록 해야함.

이에 대한 설정이 when: manual 부분으로, 해당 stage를 사용자가 직접 실행버튼을 누른 경우에만 실행되도록 일시정지하는 기능이다.

 

---

추가로, docker image를 사용해 SiteSpeed를 구동하는 방안을 몇가지 소개하고자 함

SiteSpeed.io는 자체적으로 제공하는 docker container를 이용하여 firefox, chrome, edge 등 다양한 환경에서의 테스팅을 제공함

$ docker run --rm -v "$(pwd):/sitespeed.io" sitespeedio/sitespeed.io:20.3.1 테스트를_진행할_서버

또한, 자체적으로 script를 제작하여 테스트에 사용할 수 있음

Script를 사용하여 로그인이 필요한 페이지에서 로그인 후 테스트를 진행하는 등의 동작이 가능함

$ docker run --rm -v "$(pwd):/sitespeed.io" sitespeedio/sitespeed.io:20.3.1 script.js script2.js script3.js --multi

특정 브라우저를 대상으로 테스팅을 진행하고싶은 경우, -b 옵션을 사용하여 브라우저 환경을 지정할 수 있음

$ docker run --shm-size 2g --rm -v "$(pwd):/sitespeed.io" sitespeedio/sitespeed.io:20.3.1 테스트를_진행할_서버_URL -b firefox(브라우저명)