Docker로 React-Node를 이미지로 만들어 컨터이너화 하기

들어가기

Docker를 사용해서 React와 Node를 묶어 이미지를 만들고 그 이미지를 이용해서 컨테이너를 생성하고 실행하는 예제이다.

개발환경

• windows10
• visual studo code
• docker desktop

실습

일단 create-react-app 으로 사용할 react 프로젝트를 생성한다.

npx create-react-app react-docker-example1

프로젝트 명은 react-docker-example1로 지정했다.

프로젝트가 생성되면 정상동작하는지 확인 해 보자.

잘 동작하는 것을 확인 할 수 있다.

프로젝트 경로로 진입해서 VisualStudoCode를 실행하자

아래 명령으로 현재경로에서 VisualStudoCode를 실행 할 수 있다.

code .

프로젝트 최상위 경로에 DockerFile을 생성하고 내용을 아래처럼 채우자.

node 이미지 버전의 경우 자신에 맞게 설정해주자.

FROM node:12.16.2 as builder

# 작업 폴더를 만들고 npm 설치
RUN mkdir /usr/src/app
WORKDIR /usr/src/app
ENV PATH /usr/src/app/node_modules/.bin:$PATH
COPY package.json /usr/src/app/package.json
RUN npm install --silent
RUN npm install react-scripts@2.1.3 -g --silent

# 소스를 작업폴더로 복사하고 앱 실행
COPY . /usr/src/app
CMD ["npm", "start"]

DockerFile을 만들었다면, 이제 이 DockerFile을 이용해서 image를 생성하자.

docker build -t react-docker-example1

난 프로젝트명과 이미지명을 동일하게 지정했다.

난 DockerFile에 설정한 node 버전의 이미지가 없어서 다운받는데 좀 시간이 걸렸다.

node 이미지가 받아지면 DockerFile을 기반해서 새로운 이미지가 생성될 것이다.

아래 명령어로 확인해보자.

docker images

DockerFile에서 참조하고 있는 node 이미지와 그 기반으로 만들어진 react-docker-example1 이미지가 보인다.

아래 명령어로 생성한 react-docker-example1 이미지를 컨테이너화 하고 실행해보자.

docker run -it -p 3000:3000 --rm 이미지명또는아이디

docker run 옵션중 -it 로 인해 아래처럼 컨테이너 실행시 react 컨테이너에서 출력하는 콘솔이 터미널로 출력된다.

**--rm** 옵션은 컨테이너가 종료될때 해당 컨테이너를 자동으로 지워준다.

정상적으로 컨테이너가 동작하는 것을 확인 할 수 있다.

새로운 터미널에서 아래 명령어로 실행중인 컨테이너를 확인해보자.

docker ps

이제 해당 컨테니어를 종료해보자.

docker stop 컨테이너id

일반적으로 위 명령어로 docker 컨테이너를 종료한다.

하지만 docker run 옵션으로 -it 사용했기에, docker run을 실행중인 터미널에서 ctrl+c 를 입력해도 docker 컨테이너가 종료된다.

다시 docker ps로 해당 컨테이너가 자동으로 삭제되었는지 확인해보자.

끝!!!

참고자료

https://codechacha.com/ko/dockerizing-react-with-nginx/
https://blog.leedoing.com/171