Docker Container로 공통된 FE 개발 환경 셋업하기

기존 FE 개발 환경을 공통으로 Vagrant을 이용하여 세팅된 VM에서 개발을 진행하다 이슈가 발생했습니다. Vagrant와 사용 중인 VirtualBox와의 버전 충돌로 인해 Vagrant 내부 소스를 수정하여 사용했고, 무거운 VM 작업 환경으로 개발 리소스가 낭비되었습니다. 그러한 불편함을 겪던 도중 Docker Container로 공통된 FE 개발 환경을 구축한다면 컨테이너의 장점을 살려 더 편하고 나은 환경을 구축할 수 있지 않을까?라는 생각이 들었습니다. 그렇게 시작된 Docker Container로 FE 개발 환경을 셋업을 시작했습니다.

 

Docker 설정

1. Dockerfile 작성 및 이미지 빌드

기존에 사용 중이던 개발 환경의 경우 ubuntu 베이스의 node, git, yarn 등 기본적으로 FE 개발에 필요한 요소들이 설치되어 사용 중이었습니다. 따라서 Dockerfile에도 필요한 요소들이 설치될 수 있도록 Command를 작성합니다.

FROM ubuntu:20.04

# 추가로 필요한 요소는 추가
RUN apt-get update
RUN apt-get install -y curl
RUN curl -sL https://deb.nodesource.com/setup_16.x | bash -
RUN apt-get install -y nodejs
RUN apt-get install -y git
RUN apt-get install -y libssl-dev
RUN curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | apt-key add -
RUN echo "deb https://dl.yarnpkg.com/debian/ stable main" | tee /etc/apt/sources.list.d/yarn.list
RUN apt-get update && apt-get install yarn
RUN npm install webpack -g
RUN npm install webpack-cli -g
RUN npm install webpack-dev-server -g

EXPOSE <노출시킬 포트 번호>

ENTRYPOINT ["/bin/bash"]

docker build <옵션> <Dockerfile경로>

추가로 필요한 요소나 Dockerfile Command가 있을 경우 Dockerfile에 추가로 작성하면 됩니다.

 

2. 컨테이너 생성 및 실행

Dockerfile을 통해 Docker image가 생성이 되었다면 컨테이너를 생성 및 실행해보겠습니다.

docker run -it --name <컨테이너 이름> -p <호스트 포트>:<컨테이너 포트> -v <마운트시킬 경로>:<마운트되는 경로> <이미지 이름> <실행 명령어>

작성된 Docker Command를 살펴보면

• -it
  -i(—interactive) / -t(—tty) 옵션을 같이 쓰는 케이스가 많으며 두 옵션으로 컨테이너가 종료가 안된 상태로 계속 입력을 컨테이너로 전달하기 위해 사용되는 옵션입니다.
• -p
  port binding 옵션으로 호스트의 포트번호와 컨테이너의 포트번호를 맞춥니다.
• -v
  로컬 호스트의 Workspace와 컨테이너의 Workspace를 맞추기 위해 사용되는 Bind mount 방식의 옵션입니다.

 

3. 생성된 컨테이너가 있을 경우

docker start <컨테이너 이름>

docker exec -it <컨테이너 이름> <실행 명령어>

Docker Command와 컨테이너 이름을 통해 기존에 만들어 두었던 컨테이너로 접속할 수 있습니다.

 

Docker Volume / Bind mount

Docker Command 옵션 이야기 중에 나온 Bind mount에 대해 알아보겠습니다. Docker container는 데이터 휘발성으로 인해 Docker Volume 또는 Bind Mount을 사용하여 이를 방지합니다.

Docker Volume

출처: https://docs.docker.com/storage/volumes/

Volume의 경우 Bind mount와 달리 Docker에서 완전히 관리됩니다. 그래서 Bind mount 방식보다 백업이나 마이그레이션이 더 쉽고 관리에 더 용이합니다.

# Dockerfile
VOLUME <컨테이너 디렉토리>
VOLUME ["컨테이너 디렉토리", "컨테이너 디렉토리"]

Dockerfile에 Volume 선언하여 사용하거나

docker volime create <볼륨 이름>

Docker Command를 이용하여 생성할 수 있습니다.

 

docker run ... -v <볼륨 이름>:<컨테이너 디렉토리>

그리고 컨테이너 생성 및 실행 시에 -v 옵션을 통해 해당 볼륨과 바인딩하여 사용합니다.

 

Bind mount

출처: https://docs.docker.com/storage/bind-mounts/

Bind mount는 Volume와 달리 기존에 있는 호스트의 디렉토리와 컨테이너 디렉토리를 바인딩합니다. 공통된 FE개발 환경 셋업 시에는 호스트의 디렉토리 경로를 직접 바인딩해야 하므로 Bind mount방식을 사용했습니다.

docker run  ... -v <사용자 호스트 파일 시스템>:<컨테이너 파일 시스템> ...

그래서 바로 Docker Command를 이용하여 바인딩하여 사용합니다.

 

Docker Compose로 구성

Docker Compose로도 구성이 가능합니다. 초기 컨테이너 생성 및 실행 시에 Docker Command가 길어지는 불편을 줄여줍니다. 위에서 빌드된 도커 이미지를 사용하겠습니다.(하나의 컨테이너만 올리기 때문에 굳이 사용할 필요는 없다...)

1. docker-compose.yml 작성

# docker-compose.yml
# 파일 규격 버전
version: '3'

# 실행 하기 위한 컨테이너(서비스) 정의
services:
  # 서비스 이름
  devbox: 
    # 도커파일 위치 절대 경로 (Docker Hub에 이미지 사용 가능 ex) image: <이미지 네임>)
    build: ./
    # 포트 바인딩 docker run -p 옵션
    ports:
      #- "<호스트 포트>:<컨테이너 포트>"
      - "3000:3000"
    # 실행 명령어
    command: 
      # - <실행 명령어>
      - /bin/bash
    # 마운트할 디렉토리 위치 지정 docker run -v 옵션
    volumes:
      # - <마운트시킬 경로>:<마운트되는 경로>
      - ./:/home/dev/repos

컨테이너 생성 및 실행에 사용되었던 Docker Command를 베이스로 docker-compose.yml을 작성했습니다.

 

2. 생성된 서비스 실행

docker-compose up

docker-compose run <서비스 이름> <실행 명령어>

 

마무리

Docker Container로 FE 개발 환경을 셋업함으로써 VM 환경보다 더 편하고 쾌적한 개발 환경을 맞출 수 있었습니다. Dockerfile이나 도커 이미지를 통해 빠르게 개발 환경을 세팅하고 가벼운 작업 환경을 가질 수 있으며 개발 환경 재구 축시에도 기존 VM 환경보다 더 빠르고 간편하게 셋업 할 수 있었습니다. 

 

---

참고 자료

https://docs.docker.com/

https://docs.docker.com/storage/volumes/

https://docs.docker.com/storage/bind-mounts/