iMedisync 입사 후 Docker 관련 일이 내려왔습니다. Docker로 리액트 환경설정을 맞추라는 일이었다.
간단히 검색한 결과 Docker를 이용하여 개발 환경을 이미지화시키고 해당 이미지를 통해 개발, 배포 환경을 쉽게 컨테이너화시켜 구축할 수 있다. 그리고 docker는 가상 머신처럼 독립된 실행환경을 만들어주는 것으로, 운영체제를 설치하는 것과 유사한 효과를 낼 수 있지만, 실제 운영체제를 설치하지는 않기 때문에 설치 용량이 적고 실행 속도 또한 빠릅니다. 예전에는 windows에서 VM Ware와 같은 가상 머신을 설치하였으나 최근 IT기업 에서는 Docker를 쓰는 곳이 많이 보이고 있다고 나와 있습니다. 책임님께서는 같은 환경이 설치되어있어도 어떤 곳에서는 실행되고 어떤 곳에서는 에러가 날수도 있다고 Docker를 쓰면 그런 문제점들이 사라진다고 하셨습니다.
Docker를 모르는 나로서는 검색을 많이 해보는 수밖에 없었습니다. 일단 Docker에 대해서 간단하게 포스팅해보겠습니다.

Docker 란 무엇인가?

Docker란 컨테이너 기반 오픈 소스 가상화 플랫폼입니다.

Docker는 리눅스 컨테이너 기술을 기반으로 하는 오픈 소스 서비스이다.
Docker를 통해 애플리케이션 실행 환경을 코드로 작성할 수 있다.
Docker를 통해 OS를 공유, 격리화하여 관리 할 수 있다.

Dockerfile.dev

FROM node:14-alpine

WORKDIR /usr/src/app

COPY package.json ./

RUN npm install

COPY ./ ./

CMD ["npm", "run", "start"]

위에 보이는 Dockerfile 을 가지고 build를 해줍니다.

docker build -f Dockerfile.dev -t react-sample ./

build 명령어 입력 시 Docker build를 해줄 때 기본적으로 dockerfile 을 찾게 되어있습니다.
하지만 저는 Dockerfile.dev 로 만들었기 때문에 Dockerfile.dev를 build 해라는 뜻 으로 -f 옵션을 넣어 주었고 -t 옵션은 build를 하면 image가 생기는데 -t 옵션을 주지 않고 build 시 image 이름이 랜덤으로 아무거나 생기는 것을 방지하기 위해서 -t “image name” 을 입력해 주기로 했습니다.

build 후 docker images를 입력하면 react-sample이라는 image가 생기는 것을 확인할 수 있습니다. 이제 지금 생긴 image를 이용해 Container를 실행시켜 보겠습니다.

docker run -p 3000:3000 react-sample

docker run 실행 후 http://localhost:3000 을 들어가 보니 리액트 프로젝트가 실행되고, 끝이 났다는 생각을 하며 책임님께 말을 했지만 끝난 게 아녔습니다. 코드 변경을 했는데 변경이 되지 않고, 실시간 반영이 안 되고 있던 거였습니다. Volume을 이용하라는 책임님 말씀을 듣고 마음을 다잡고 또 검색하러 갔습니다.

Volume

Docker Container에서 쓰인 데이터는 기본적으로 Container가 삭제될 때 데이터도 함께 사라지게 됩니다. Docker에서 컨테이너 생명 주기와 상관없이 데이터를 저장하고 사용하려고 할 때 Volume을 사용합니다.

docker run -it -p 3000:3000 -v /usr/src/app/node_modules -v ${pwd}:/usr/src/app react-sample

위와 같은 명령어로 docker run을 하게 되면 코드를 변경 시 실시간 반영이 된다고 합니다. 기쁜 마음으로 명령어 입력 후 엔터를 눌렀지만, 여전히 코드 실시간 반영은 되지 않았고 더욱더 힘들고 어려워졌습니다.
검색 결과 : chokidar 모듈이 있는데 WebPack과 Babel이 파일들을 모니터링을 하기 위해 사용하는 모듈로 create-react-app에도 포함되어있는 모듈입니다. Docker에서 해당 모듈을 사용하기 위해서는 docker run 할 때 -e CHOKIDAR_USEPOLLING=true 라는 옵션을 주거나 Dockerfile 안에 ENV로 CHOKIDAR_USEPOLLING=true를 넣어주면 된다고 합니다. docker run 명령어에 넣기에는 명령어가 너무 길어져 dockerfile에 입력하게 되었습니다.

FROM node:14-alpine

WORKDIR /usr/src/app

COPY package.json ./

RUN npm install

# COPY ./ ./

ENV CHOKIDAR_USEPOLLING=true

CMD ["npm", "run", "start"]

결과는.. 또 실패였습니다. 전혀 변하지가 않더군요 이번에는 성공할 줄 알았지만, 또 코드변경은 되지 않았습니다. 하지만 운이 좋게도? 실패한 원인을 금방 찾았습니다.

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "start": "WATCHPACK_POLLING=true react-scripts start"
  },
"start": "WATCHPACK_POLLING=true react-scripts start"

package.json 파일 “scripts” 부분에서 “start” : “WATCHPACK_POLLING=true react-scripts start” 로 변경해주니깐 실시간 반영(핫로딩) 이 되었습니다. 드디어 Docker를 활용하여 로컬 환경에서 코드변경 후 실시간 반영이 되면서 개발을 할 수 있게 되었습니다.

이 글을 마치며

사실 신입 개발자로서 모르는 Docker에 도전한다는 것이 쉽지는 않았습니다. 하지만 이번 기회를 통해 Docker를 사용하는 법을 배웠고 모르는 것을 삽질하며 알아가게 되는 법을 배웠습니다. 그리고 핫로딩이 안되는 부분은 Windows 환경에서만 안되는 걸로 알고 있습니다. Windows, mac 등 운영체제마다 다른 것이 많다는 것도 깨달았습니다. 이 글을 읽고 잘못된 부분이 있으면 저한테 알려주시면 학습 후 수정하도록 하겠습니다. 감사합니다 :)