도커로 리액트 앱 실행
노드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!
도커파일에 COPY ./ ./는 왜 필요해요? compose 파일에 볼륨을 지정하면 디렉터리가 공유되지 않나요?