[과제] 1주차) 프로젝트 작업환경 구성 박성준

[J-unStiN]

ThorVG 프로젝트를 위한 독립적인 환경을 계속 가지고 싶어서 도커를 활용해 진행했습니다.
도커만 정상적으로 돌아간다면, 모든 PC 에서 가능할 것으로 보입니다.

개발 환경

macOS (Apple Silicon M1)

도커 개발 환경

빌드 시스템 | Meson + Ninja
Docker | Docker Desktop for Mac
컨테이너 OS | Ubuntu 22.04GUI 라이브러리 | SDL2 (소프트웨어 렌더링)
화면 전달 | Xvfb + x11vnc + noVNC

---

1. 디렉터리 구조

opensource_project/
├── thorvg/
│   ├── thorvg/          ← ThorVG 소스 코드
│   └── docker_build/    ← 우리가 작업할 폴더 ✨
│       └── docker-compose.yml
└── thorvg.example/      ← 공식 예제 소스 코드

2. 도커 컴포즈 만들기

Ubuntu 컨테이너를 띄우고, 소스 코드를 연결해 주는 설정 파일입니다.

services:
  linux:                              # 서비스 이름 (docker compose exec linux bash 할 때 쓰임)
    image: ubuntu:22.04               # 사용할 이미지 — 공식 Ubuntu 22.04를 그대로 가져옴
    volumes:                           # 호스트의 폴더를 컨테이너 안에 연결해 줌
      - ../thorvg:/app/thorvg:ro       #   ThorVG 소스 → 컨테이너의 /app/thorvg (읽기 전용)
      - ../../thorvg.example:/app/thorvg.example:ro  #   예제 소스 → /app/thorvg.example (읽기 전용)
    ports:                             # 호스트 포트 ↔ 컨테이너 포트 연결
      - "6080:6080"                    #   브라우저에서 localhost:6080으로 접속 가능
    environment:                       # 컨테이너 안에서 사용할 환경 변수
      - DEBIAN_FRONTEND=noninteractive #   apt 설치 시 질문 안 하게 해줌
      - DISPLAY=:99                    #   SDL2가 그릴 가상 모니터 번호
    working_dir: /app                  # 컨테이너 접속 시 시작 위치
    command: ["sleep", "infinity"]     # 컨테이너가 꺼지지 않고 계속 대기

3. 설치

만들어둔 도커 컴포즈 파일 실행 후 프로세스를 확인해 접속

docker exec -it e8b9c0c2d8d3 bash

아래 명령어를 차례대로 실행

apt-get update

apt-get install -y g++ pkg-config python3-pip ninja-build libsdl2-dev xvfb x11vnc novnc websockify

pip3 install meson

각 패키지가 하는 일을 간단히 정리하면:

패키지	역할
g++, ninja-build	C++ 컴파일러와 빌드 도구
meson	빌드 설정 도구 (pip로 설치)
libsdl2-dev	SDL2 개발 라이브러리 (thorvg.example이 사용)
xvfb	가상 프레임버퍼 — 모니터 없이 화면을 만들어 줌
x11vnc	가상 화면을 VNC 프로토콜로 내보내 줌
novnc, websockify	VNC를 웹 브라우저에서 볼 수 있게 해 줌

---

4. ThorVG 빌드 및 설치

소스를 쓰기 가능한 경로로 복사한 다음, 빌드해서 시스템에 설치합니다.

mkdir -p /build

cp -r /app/thorvg /build/thorvg

cd /build/thorvg

meson setup builddir --prefix=/usr -Dtests=false

ninja -C builddir

ninja -C builddir install

---

5. thorvg.example 빌드

같은 방식으로 예제 프로젝트도 빌드합니다.

cp -r /app/thorvg.example /build/example

cd /build/example

meson setup builddir

ninja -C builddir

---

6. 가상 디스플레이 시작

이제부터가 핵심입니다.
도커안에서는 실행을 해도 실행결과를 볼 수 없으니, 가상 모니터를 아래 명령어로 만들어야합니다.
명령어 끝에 & 을 필수로 붙여야합니다. (백그라운드 실행)

Xvfb :99 -screen 0 1024x768x24 &

VNC + 웹 뷰어 시작

가상 모니터의 화면을 VNC로 내보내고, 웹 브라우저에서 볼 수 있게 noVNC도 시작합니다.

x11vnc -display :99 -forever -nopw -shared -rfbport 5900 &

websockify --web /usr/share/novnc 6080 localhost:5900 &

---

7. 예제 실행

이제 예제를 실행하고 http://localhost:6080/vnc.html 에 접속 후 Connect 버튼을 누르면 도커에 실행 중인 화면이 보입니다.

cd /build/example

./builddir/src/Animation

vnc 화면에 보이는 결과

도커 화면 결과