[Docker] 리액트 앱 배포-3

 

 

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

지난 시간에 리액트 앱을 설치하고, 도커이미지와 볼륨을 통해 리액트 앱을 실행 해보았습니다. 

[Docker] 리액트 앱 배포

[Docker] 리액트 앱 배포-2

 

오늘은 도커 컴포즈로 좀 더 간단하게 테스트 해보고 

운영환경을 위한 Nginx를 실행해보겠습니다. 

 

 

 

---

 

도커 컴포즈로 좀더 간단하게 앱 실행하기

저번시간에 Volume을 명령어로 쳐서 복잡하게 실행해주었는데요,

docker-compose.yml에 작성해보고 Docker Compose를 이용해서 실행해보겠습니다.

 

docker-compose.yml 파일

version: "3"
services:
  react: # 컨테이너 이름
    build:
      context: . # 도커 이미지를 구성하기위한 파일과 폴더들이 있는 위치
      dockerfile: Dockerfile.dev
    ports:
       - "3000:3000"
    volumes:
      - /usr/src/app/node_modules
      - ./:/usr/src/app
    stdin_open: true # 리액트 앱을 끌때 필요합니다

 

 

 

다시 실행해보겠습니다. 

docker-compose up

성공적으로 배포된 것이 보입니다. 

 

다시 변경해보겠습니다. 

 

변경된 것을 확인 할 수 있습니다.

---

리액트 앱 테스트하기

리액트앱을 도커 환경에서 테스트 해보겠습니다.

docker run -it [이미지 이름] npm run test

 docker run -it jjwdocker/docker-react-app npm run test

 

테스트 성공입니다!

 

 

테스트 환경도 바로 반영이 될 수 있도록 볼륨을 설정해 주겠습니다. 

 

test라는 컨테이너를 하나 더 넣어줄게요

docker-compose.yml 파일에 추가해주겠습니다. 

 

 

docker-compose.yml 파일 ▼

version: "3"
services:
  react: # 컨테이너 이름
    build:
      context: . # 도커 이미지를 구성하기위한 파일과 폴더들이 있는 위치
      dockerfile: Dockerfile.dev
    ports:
      - "3000:3000"
    volumes:
      - /usr/src/app/node_modules
      - ./:/usr/src/app
    stdin_open: true # 리액트 앱을 끌때 필요합니다
  tests:
    build:
      context: .
      dockerfile: Dockerfile.dev
    volumes:
      - /usr/src/app/node_modules
      - ./:/usr/src/app
    command: ["npm", "run", "test"]

 

 

두개의 컨테이너를 모두 다 실행시켜보겠습니다. 

 docker-compose up --build

 

test가 통과되었습니다.

 

 

정상적으로 실행도 되었습니다! 

 

 

 

App.test.js에 test부분을 하나더 넣어주고 저장해보겠습니다. 

 

테스트 결과 두개로 나오면서 저장했던 메세지가 작성되는 것을 볼 수 있습니다. 

 

---

오늘은 도커 컴포즈로 긴 명령어 없이 실행하고

테스트 환경을 설정해보았는데요,

 

다음시간에는 운영환경을 위한 Nginx에 대해 배우고 실제 배포를 어떻게 하는지 알아보겠습니다.   

 

---

참조

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