Skip to Content
Data EngineeringApache Zeppelin 프론트엔드 개발 모드 셋업 가이드
📊 Data Engineering2018년 3월 28일

Apache Zeppelin 프론트엔드 개발 모드 셋업 가이드

#zeppelin#frontend#development#angular#webpack

Apache Zeppelin은 백엔드(Java/Scala)와 프론트엔드(AngularJS + Webpack)가 분리되어 있어, UI만 수정할 때는 전체 Maven 빌드 없이 프론트엔드 개발 서버만 띄워서 작업할 수 있습니다.

사내 빅데이터 모니터링 플랫폼에서 Zeppelin 노트북 UI를 커스터마이징할 때, 매번 mvn package -DskipTests를 돌리는 것은 수 분이 걸리는 고통스러운 작업이었습니다. 개발 모드를 활용하면 파일을 저장하는 즉시 브라우저에서 변경 사항을 확인할 수 있습니다.

구조 이해

Zeppelin의 프론트엔드는 zeppelin-web/ 디렉토리 아래에 위치하며, 별도의 package.json과 Webpack 설정을 갖고 있습니다.

plaintext
zeppelin/
├── bin/
│   └── zeppelin-daemon.sh    ← 백엔드 Thrift 서버 기동
├── zeppelin-web/
│   ├── package.json
│   ├── bower.json
│   └── app/                  ← AngularJS 소스 코드

프론트엔드 개발 서버는 백엔드(localhost:8080)로 API 요청을 프록시하기 때문에, 반드시 백엔드 데몬이 먼저 실행 중이어야 합니다.

실행 순서

1단계: Zeppelin 백엔드 데몬 실행

shell
$ bin/zeppelin-daemon.sh start

기본적으로 http://localhost:8080에서 기동됩니다. 로그는 logs/zeppelin-*.log에서 확인합니다.

shell
# 실행 상태 확인
$ bin/zeppelin-daemon.sh status
 
# 로그 실시간 확인
$ tail -f logs/zeppelin-*.log

2단계: 프론트엔드 의존성 설치 (최초 1회)

zeppelin-web/ 디렉토리로 이동해서 패키지를 설치합니다.

shell
$ cd zeppelin-web
$ yarn install

npm install도 동작하지만, Zeppelin 공식 빌드 스크립트는 yarn을 사용하므로 Yarn을 권장합니다.

3단계: 프론트엔드 개발 서버 실행

shell
$ yarn run dev

성공하면 http://localhost:9000으로 개발 서버가 뜨고, 소스 파일을 수정하면 자동으로 브라우저가 새로고침됩니다. API 요청은 내부적으로 localhost:8080으로 프록시됩니다.

자주 하는 작업

특정 포트로 백엔드 변경

백엔드가 기본 포트가 아닌 곳에서 뜨고 있다면, zeppelin-web/Gruntfile.js (또는 webpack.config.js)의 프록시 설정을 수정합니다.

javascript
// webpack.config.js 또는 Gruntfile.js 내 proxy 설정 예시
proxy: {
  '/api': {
    target: 'http://localhost:8080',  // 백엔드 주소
    changeOrigin: true
  }
}

빌드 결과물을 Zeppelin에 반영

개발이 완료됐다면 프론트엔드를 빌드해서 Zeppelin 웹 리소스 폴더에 복사합니다.

shell
$ yarn run build   # dist/ 산출물 생성

또는 전체 Maven 빌드를 통해 최종 패키징합니다.

shell
$ mvn package -pl zeppelin-web -DskipTests

주의사항

  • 개발 서버(localhost:9000)는 핫 리로드 전용으로, 실서비스에 배포하는 용도가 아닙니다.
  • Zeppelin 버전에 따라 Node.js 호환 버전이 다릅니다. .nvmrc 또는 package.json의 engines 항목을 먼저 확인하세요.
  • WebSocket(/ws) 연결도 프록시를 통해 백엔드로 전달되므로, 실시간 노트 실행 결과 수신도 개발 모드에서 정상 작동합니다.
Last updated on