DEV Community

Ingun 전인건
Ingun 전인건

Posted on

2 2

EC2 환경에서 Chrome 으로 GPU 가속받는 WebGL 어플리케이션 돌리기

저는 무거운 3D 모델을 로드하고 시뮬레이션을 돌리는 performance-critical 한 WebGL 어플리케이션을 만들어요. 코드가 바뀌었을때 퍼포먼스에 영향이 있었는지 캐치하는게 굉장히 중요했어요. 그래서 벤치마킹 시스템을 만들어서 CI/CD 에 적용을 했어요. 이 벤치마킹 시스템은 EC2 인스턴스를 만들고, 최신 라이브러리를 사용해서 headless 한 gpu 가속 받는 Chrome 환경에서 벤치마킹 프로그램을 돌립니다. EC2 환경에서 크롬이 gpu 가속을 받게 하는게 꾀 까다로웠어요. 이번 포스트에서는 그걸 어떻게 해결했는지 에 대해서 설명드리겠습니다.

EC2 인스턴스 타입

두가지 조건을 만족하는 환경을 만들어야 했어요

  • GPU가 있을것
  • 유저 환경을 잘 반영할것. 너무 좋지도 안좋지도 않게

G4 인스턴스 패밀리가 안성맞춤으로 보였어요. 그래서 그중 가장 싼 g4ad.xlarge 을 사용했습니다.

AMI

AMI 를 고르는데에 두가지 선택지가 있었어요

  • 기본 AMI(e.g. Amazon Linux 2)을 사용해서 드라이버를 직접 설치하기
  • 드라이버가 기본으로 깔려있는 Commercial AMI 를 사용하기

잘 쓰여진 도큐먼트가 있길래 첫번째 방법을 시도해보았는데 다음과 같은 이유로 상당히 귀찮았어요.

  • 드라이버를 다운받고 설치하는데 꾀 오래걸립니다. (10 분정도)
  • 쉘스크립트가 상당히 복잡해져요
    • 디펜던시들도 모두 찾아내서 설치해야되고
    • 시스템도 부팅해야 함

그래서 두번째 방법을 썼어요. g4ad 는 라데온을 쓰기 때문에 저는 Amazon Linux 2 AMI with AMD Radeon Pro Driver 를 썼습니다. 읽는 여러분도 이걸 사용하시길 추천드려요 왜냐면 싸고, 시스템 설정하는 수고를 덜어주기 때문입니다.

Chrome version

저는 yum 을 이용해서 Chromium 을 설치했어요

# yum 이 chromium 을 찾을 수 있게 EPEL 리포지토리 세팅
sudo amazon-linux-extras install epel -y
sudo yum install chromium -y
Enter fullscreen mode Exit fullscreen mode

다른 방법도 사용해보았어요. 크롬 인스톨러를 사용해보기도 하고 Puppeteer 를 사용해보기도 했어요. 근데 무슨 이유에서 인지 얘네는 gpu 드라이버를 못찾더라고요. 굳이 왜그런지 알려고는 안했습니다. 왜냐면 첫번째 방법이 잘 작동했기 때문이죠.

Headless Chrome 과 EGL

EGL 에 대한 약간의 배경지식을 설명드릴게요. OpenGL 을 사용하기 위해서는 OpenGL Context 를 먼저 만들어야 해요. 리눅스에서는 보통 GLX 를 통해서 만들어집니다. GLX 는 windows system(e.g. X11)을 요구하고, windows system 은 display device (e.g. 모니터, VNC) 를 요구합니다. 문제는 이 디펜던시 체인 때문에 서버나 아두이노같은 디스플레이가 없는 기기에서 OpenGL을 사용하는게 너무나도 힘들다는 것이었습니다. 그래서 EGL 이 등장했어요. EGL 은 windows 시스템 없이 OpenGL Context를 만들 수 있게 해주는 프로토콜이에요. 얘 덕분에 너무나도 많은것이 편해졌고, 미래의 OpenGL Context 프로토콜로 각광받고 있습니다. 요즘은 대부분의 gpu driver 에 이 EGL implementaiton library 를 대부분 포함되어 있어요.

Headless Chrome이 바로 EGL가 필요한 딱 좋은 예입니다. Headless 의미 자체가 디스플레이가 없다는 뜻이고, 그렇기 때문에 EGL 이 필요한 것이죠.

GPU-가속받는 Headless Chrome 돌리기

환경이 다 갖추어 졌다면 Argument 만 제대로 주면 됩니다.

sudo chromium-browser --no-sandbox --headless --use-gl=egl 'https://benchmarking.system'
Enter fullscreen mode Exit fullscreen mode
  • sudo - 왜인지는 모르겠는데 sudo 가 아니면 gpu driver 를 찾지를 못하더라고요
  • chromium-browser - yum 으로 chromium 을 설치하면 기본으로 이 이름으로 executable 이 설치가 됩니다.
  • --no-sandbox - sudo 로 돌리려면 필요한 옵션
  • --headless - EGL 을 사용하기 위해 필요
  • --use-gl=egl - EGL 사용하기

디버깅

크롬은 gpu 관련 모든 정보를 보여주는 대시보드 페이지가 있고, chrome://gpu 로 접근할 수 있습니다. 이 페이지를 pdf로 다음과 같이 뽑아낼 수 있어요.

sudo chromium-browser --no-sandbox --headless --use-gl=egl --print-to-pdf=out.pdf 'chrome://gpu'
Enter fullscreen mode Exit fullscreen mode

뽑아진 pdf 를 scp 를 이용해 내 컴퓨터로 가져올 수 있습니다.

scp -i certificate.pem ec2-user@<ec2 ip address>:<path to out.pdf> ./ 
Enter fullscreen mode Exit fullscreen mode

모든게 잘 동작한다면 다음과같이 보여져야 해요.

sample graphics feature status

그리고 드라이버 정보도 제대로 출력 되어야 해요.

sample driver information

Sentry image

Hands-on debugging session: instrument, monitor, and fix

Join Lazar for a hands-on session where you’ll build it, break it, debug it, and fix it. You’ll set up Sentry, track errors, use Session Replay and Tracing, and leverage some good ol’ AI to find and fix issues fast.

RSVP here →

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay