[Docker] 도커로 리액트 앱 실행 ( by 따라하며 배우는 Docker와 CI환경)

도커로 리액트 앱 실행

노드js가 깔려있다면 react app은 간단한 명령어로 설치할 수 있습니다.

현재 디렉토리에 react-app을 설치하는 명령어입니다. 정상적으로 설치가 되면 디렉토리 안에 여러 폴더들이 생깁니다.

> npx create react-app ./

이제 도커파일을 작성해서 react-app을 컨테이너 안에서 실행해보도록 하겠습니다. 이전과는 다르게 이에 개발과 배포환경을 분리해보려고합니다. 따라서 이미지도 각 환경에 따라 다르게 빌드할 것입니다. 개발용 도커이미지는 Dockerfile.dev라고 이름을 다르게 해주겠습니다.

Dockerfile.dev

FROM node:alpine
WORKDIR "/usr/src/app"
COPY package.json ./
RUN npm install
COPY ./ ./
CMD ["npm","run","start"]

이미지 빌드
이전과는 다르게 도커파일의 이름이 변경되었기 때문에 -f옵션으로 이름을 직접 알려줘야합니다.

> docker build -f Dockerfile.dev ./

컨테이너 실행

> docker run -p 3000:3000 330960c83f

제대로 리액트 앱이 실행되었다면 아래와 같은 페이지가 보일 것입니다.

도커컴포즈로 편하게 컨테이너 실행하기

이제 위의 과정을 도커컴포즈를 이용해서 편리하게 바꿔보도록 하겠습니다.

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

포트매핑, 도커파일이름 전달, 볼륨설정까지 모두 도커컴포즈에 작성해주었습니다. volume설정은 :가 없이 쓰면 제외대상이고 :가 포함된것은 매핑정보입니다. stdin_open은 리액트앱을 종료할 때 있어야하기때문에 적어줬습니다.(참고로 리액트 앱은 3000이 디폴트 포트입니다)

이제 컨테이너를 실행하고 3000포트로 가면 똑같이 react 메인페이지가 뜹니다!

> docker-compose up
.....
.....
docker-react-app-react-1  |   asset static/js/node_modules_web-vitals_dist_web-vitals_js.chunk.js 6.94 KiB [emitted] 1 related asset
docker-react-app-react-1  |   asset static/media/logo.6ce24c58023cc2f8fd88fe9d219db6c6.svg 2.57 KiB [emitted] (auxiliary name: main)
docker-react-app-react-1  | asset index.html 1.67 KiB [emitted]
docker-react-app-react-1  | asset asset-manifest.json 546 bytes [emitted]
docker-react-app-react-1  | cached modules 1.37 MiB (javascript) 31.3 KiB (runtime) [cached] 122 modules
docker-react-app-react-1  | webpack 5.68.0 compiled successfully in 1645 ms

테스트 컨테이너 생성 및 실행

이번에는 리액트 테스트를 함께 진행하도록 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
  test:
    build: 
      context: .
      dockerfile: Dockerfile.dev
    volumes:
      - /usr/src/app/node_modules
      - ./:/usr/src/app
    command: ['npm','run','test']

command를 추가해서 test컨테이너가 실행시에 실행할 명령어를 따로 넣어줍니다.

이제 도커컴포즈 up을 하면 이전과 다르게 test도 함께 진행되는 것을 볼 수 있습니다.

> docker-compose up
.....
.....
ocker-react-app-react-1  | Starting the development server...
docker-react-app-react-1  | 
docker-react-app-test-1   | PASS src/App.test.js
docker-react-app-test-1   |   ✓ renders learn react link (107 ms)
docker-react-app-test-1   | 
docker-react-app-test-1   | Test Suites: 1 passed, 1 total
docker-react-app-test-1   | Tests:       1 passed, 1 total
docker-react-app-test-1   | Snapshots:   0 total
docker-react-app-test-1   | Time:        2.808 s
docker-react-app-test-1   | Ran all test suites.
docker-react-app-test-1   | 
docker-react-app-react-1  | Compiled successfully!