들어가기
Docker를 사용해서 React와 Node를 묶어 이미지를 만들고 그 이미지를 이용해서 컨테이너를 생성하고 실행하는 예제이다.
개발환경
- windows10
- visual studo code
- docker desktop
실습
일단 create-react-app 으로 사용할 react 프로젝트를 생성한다.
1 | npx create-react-app react-docker-example1 |
프로젝트 명은 react-docker-example1로 지정했다.
프로젝트가 생성되면 정상동작하는지 확인 해 보자.
잘 동작하는 것을 확인 할 수 있다.
프로젝트 경로로 진입해서 VisualStudoCode를 실행하자
아래 명령으로 현재경로에서 VisualStudoCode를 실행 할 수 있다.
1 | code . |
프로젝트 최상위 경로에 DockerFile을 생성하고 내용을 아래처럼 채우자.
node 이미지 버전의 경우 자신에 맞게 설정해주자.
1 | FROM node:12.16.2 as builder |
DockerFile을 만들었다면, 이제 이 DockerFile을 이용해서 image를 생성하자.
1 | docker build -t react-docker-example1 |
난 프로젝트명과 이미지명을 동일하게 지정했다.
난 DockerFile에 설정한 node 버전의 이미지가 없어서 다운받는데 좀 시간이 걸렸다.
node 이미지가 받아지면 DockerFile을 기반해서 새로운 이미지가 생성될 것이다.
아래 명령어로 확인해보자.
1 | docker images |
DockerFile에서 참조하고 있는 node 이미지와 그 기반으로 만들어진 react-docker-example1 이미지가 보인다.
아래 명령어로 생성한 react-docker-example1 이미지를 컨테이너화 하고 실행해보자.
1 | docker run -it -p 3000:3000 --rm 이미지명또는아이디 |
docker run 옵션중 -it 로 인해 아래처럼 컨테이너 실행시 react 컨테이너에서 출력하는 콘솔이 터미널로 출력된다.
1 | **--rm** 옵션은 컨테이너가 종료될때 해당 컨테이너를 자동으로 지워준다. |
정상적으로 컨테이너가 동작하는 것을 확인 할 수 있다.
새로운 터미널에서 아래 명령어로 실행중인 컨테이너를 확인해보자.
1 | docker ps |
이제 해당 컨테니어를 종료해보자.
1 | 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