초보자용 도커로 반응 개발 환경을 만드는 4단계🐳

이 글에서는 Docker로 react dev env를 생성하는 방법을 소개합니다. 실제로 5단계(step0 포함)가 있지만 VScode를 사용하지 않고 새 VScode 확장 설치를 원하지 않는 사람들에게는 필요하지 않으므로 건너뛸 수 있습니다Step0.

Step0 확장 프로그램, VScode에 Docker 설치(선택 사항)

1단계 Dockerfile 생성

$ mkdir react_docker
$ cd react_docker
$ touch Dockerfile

FROM node:12.18.0-alpine
WORKDIR /usr/src/app

Step2 docker-compose.yml 생성

docker-compose.yml은 react_docker 폴더 아래에 있어야 합니다.

$ touch docker-compose.yml

version: '3'
services:
  react:
    build:
      context: .
      dockerfile: Dockerfile
    environment: 
      - NODE_ENV=development
    volumes:
     - ./:/usr/src/app
    command: sh -c "cd myapp && yarn start"
    ports:
     - "3000:3000"
    tty: true

다른 앱 이름을 사용하려면 2가지를 변경해야 합니다.

cd myapp --> cd your-react-app-name

npx create-react-app myapp --> npx create-react-app your-react-app-name

Step3 이미지 빌드

이 단계는 시간이 좀 걸립니다.

$ docker-compose build

# javascript
$ docker-compose run --rm react sh -c 'npx create-react-app myapp'

# typescript
$ docker-compose run --rm react sh -c 'npx create-react-app myapp --template typescript'

Step4 리액트 앱 시작하기

이 단계는 다소 시간이 걸릴 수 있습니다.

$ docker-compose up -d

# stop
$ docker-compose stop

VScode를 열고 사이드바에서 Docker 아이콘을 클릭합니다.
도커의 상태를 확인할 수 있습니다. 물론 Terminal/iTerm에서도 동일한 작업을 수행할 수 있습니다.



이제 반응 앱 개발을 시작할 수 있습니다.

react와 Docker로 즐거운 코딩하세요!!!