[Docker] 리액트 앱 배포-2

 

안녕하세요, 쯀리입니다.

지난 시간에 리액트 앱을 설치해보았는데,

[Docker] 리액트 앱 배포

오늘은 생성된 도커이미지를 이용해서 리액트 앱을 실행해 보고 

볼륨이라는 것이 무엇인지 알아보겠습니다. 

---

 

생성된 도커 이미지로 리액트 앱을 실행해보기

 

우선 도커 이미지에 이름을 줘서 실행해주겠습니다. 

-t 옵션 : 이름 주기

docker build -f Dockerfile.dev -t jjwdocker/docker-react-app ./

 

build가 완료가 되면 이름이 생긴 이미지를 확인 할 수 있습니다, 

 

 

이미지로 실행해보겠습니다. 

docker run [이미지 이름]

 

react는 포트번호: 3000번에서 기본적으로 실행 되는데 확인하러 가보겠습니다

 

연결이 되지 않습니다 ㅜㅜ 

 

왜일까요??

 

포트를 지정해주지 않아서 그렇습니다. 

컨테이너 내부에서 실행되는 포트는 3000번이겠지만,

제 로컬의 브라우저와 연결 해줘야하겠죠??

 

 

docker run -p  [내 로컬 포트] : [컨테이너 포트]  [이미지이름]

 

docker run -p 3000:3000 jjwdocker/docker-react-app

 

실행이 되면 확인해보겠습니다. 

 

 

이미지 이름으로 실행하기 성공입니다!

 

 

 

---

도커 볼륨

Copy 대신 Volume을 사용하면 다시 빌드 하지 않아도 변경한 소스 부분이 어플리케이션에 반영됩니다.

 

직접 명령어로 실행할때

docker run -p 3000:3000 -v /usr/src/app/node_modules -v $(pwd):/usr/src/app [이미지 이름] 

-v /usr/src/app/node_modules  : 호스트 디렉토리에 node_modules가 없으니 매핑을 하지말라는 뜻

-v $(pwd):/usr/src/app : pwd 경로에 있는 디렉토리 혹은 파일을 /usr/src/app경로에서 참조

 

우선 Copy 상태에서 리액트 정보를 변경해보겠습니다. 

현재 상태: 

 

 

소스코드 부분을 변경해보겠습니다. 

 

 

 

동일한 결과가 출력되는 것을 볼 수 있습니다. 

 

 

이제 Volume부분을 넣어주고 시작해보겠습니다. 

 docker run -p 3000:3000 -v /usr/src/app/node_modules -v $(pwd):/usr/src/app jjwdocker/docker-react-app

 

실행이 되었다면 3000번 포트로 접속해보겠습니다. 

 

소스코드를 변경해보겠습니다. 

 

 

refresh 를 하지 않아도 바로 변경되는 것을 확인할 수 있습니다 

 

 

---

오늘은 볼륨을 통해 변경된 소스가 있다면 새로 빌드하지 않아도 반영이 되게 테스트 해봤습니다. 

다음에는 도커 컴포즈로 간단하게 앱을 실행해 보겠습니다. 

 

---

참조

※ 인프런 - 따라하며 배우는 도커와 CI환경