Docker 개발/운영 환경 분리

목차

1. 도커를 이용하여 리액트 실행 (dev)

2. Docker compose 로 간단히 앱 실행하기

3. 운영 환경을 위한 Nginx

 

 

1. 도커를 이용하여 리액트 실행 (dev)

도커 이미지 생성을 위한 Dockerfile 작성도 개발 / 운영 환경에 따라 별도로 작성하는 것이 좋다. 

개발 단계의 Dockerfile 은 Dockerfile.dev 라는 파일로 작성해보자. 

리액트를 설치한 상태에서, Dockerfile.dev 와 Dockerfile 을 별도로 생성하자. (리액트 설치 과정은 생략)

 

 

node_modules 폴더는 삭제해주자. 도커 컨테이너 내부에 node_modules 폴더가 별도로 생성되기에, 로컬 머신에는 node_modules 폴더가 필요없다.

 

Dockerfile.dev

FROM node:alpine

WORKDIR /usr/src/app

COPY package.json ./

RUN npm install

COPY ./ ./ 

CMD ["npm", "run", "start"]

 

위 처럼 도커파일을 작성하고 docker build ./ 를 입력하면 unable to evaluate symlik . . . 라는 에러메시지가 출력된다. 원인이 무엇일까? 바로 docker build ./ 명령어는 Dockerfile 이라는 파일을 찾도록 설정이 돼있기 때문에 Dockerfile.dev 라는 파일을 도커파일로 인식하지 못한다. 그렇기 때문에 빌드할 때 어떤 도커 파일을 읽어야하는지 명시해주면 해결할 수 있다.

docker build -f Dockerfile.dev ./

위 명령어 처럼 -f 옵션으로 참조할 도커파일을 명시하면, 개발 환경에서 리액트를 실행할 이미지 빌드가 가능하다. 

빌드가 정상적으로 수행되면, 생성된 도커 이미지로 리액트를 실행해볼 수 있다.

// docker run -it -p 3000:3000 <이미지 이름>
docker run -it -p 3000:3000 tbnsok/docker-react-app

(리액트 업그레이드로 인해 -it 옵션을 붙여줘야 실행 가능하다)

 

 

2. Docker compose 로 간단히 앱 실행하기

이번 챕터의 목표는 Docker Compose 로 앱을 간단히 실행하는데 있다.

우선 volume 을 이용해 변경된 소스코드를 곧바로 대응하고 싶지만, volume 을 사용할 때의 명령어는 너무 길다는 문제가 있다. 이 부분을 docker compose 로 적용하여 손쉽게 해결해보자. 

 

너무 긴 볼륨 명령어

docker run -p 3000:3000 -v /usr/src/app/node_modules -v $(pwd):/usr/src/app <이미지 아이디>

 

Docker-compose 로 해결하기

우선 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 --build

 

3. 운영 환경을 위한 Nginx

위 과정은 개발 환경에서 리액트를 다뤘다.

이번 챕터에서는 운영 환경 (배포 후) 에서 리액트를 배포하는데, 우선 Nginx 를 살펴봐야 한다.

Nginx 는 npm run build 로 생성된 build/ 하위 디렉토리의 파일을 바라본다. ( src/ 하위에 있는 소스코드가 아닌 )

 

이쯤되면 의문이 생긴다. 개발환경의 개발서버를 그대로 사용하면 되는 것 아닌가? 왜 운영환경에서는 굳이 Nginx 로 변경하는 것일까?

이유는 바로 Nginx 의 특성 때문인데, 운영환경에서는 소스코드가 변경될 때마다 해당 내용을 서버에 반영해주는 무거운 기능이 필요하지 않다. 변경된 소스코드를 바로바로 반영해주는 기능은 수정이 잦은 개발서버에 필요하다. 운영환경에선 오히려 가볍고 빠르게 동작하는 기능이 더욱 필요하기 때문에 Nginx 를 사용하는 것이다.

 

Nginx 를 이용하여 Dockerfile 작성하기

FROM node:alpine as builder
WORKDIR '/usr/src/app'
COPY package.json ./
RUN npm install
COPY ./ ./
RUN npm run build

FROM nginx
EXPOSE 80
COPY --from=builder /usr/src/app/build /usr/share/nginx/html

 

운영 환경에서 사용할 Dockerfile 에는 npm run build 로 생성한 build 파일을 Nginx 서버가 브라우저에 렌더링 할 수 있게 하는 작업을 추가했다.

 

이제 작성한 Dockerfile 을 빌드하여 이미지를 생성 후 해당 이미지를 실행시키자.

-- 이미지 빌드
docker build -t tbnsok/docker-react-app ./

-- 이미지 실행
docker run -p 8080:80 tbnsok/docker-react-app

 

정상적으로 브라우저에 실행된 것을 확인할 수 있다.

 

 

 

* 본 포스팅은 인프런의 따라하며 배우는 도커와 CI 환경 강의를 수강하고 정리한 내용을 바탕으로 정리됐습니다.
사용된 도표와 코드는 해당 강의에서 참조했음을 밝힙니다.

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