[Doker] Docker를 사용한 React 환경 구성

어드민 웹 배포

지금까지는 누가 접근하더라도 문제가 없는 공용 웹만을 개발해 배포했었지만, 어떤 서비스의 어드민을

직접 배포하는 적은 없었습니다.

 

그렇기에 하나의 서비스를 이용해서 어드민을 직접 배포할 수 있는 Docker를 알아보자는 취지에서 

Docker 포스팅을 작성하고자 합니다. 

 

Docker를 사용하면 굳이 어드민을 추가하지 않고 Aws처럼 비용을 사용하지않기에 

비용을 아끼면서 보안적인 Docker를 선택했습니다. 

 

필요에 따라서 간편하게 run/stop도 할 수 있고.. 로컬환경에서 무언가를 하기에는 가장 적합하다

판단되었습니다.

Dockerfile 작성

리액트 환경이 구성되었다면, 해당 프로젝트 환경을 이미지로 도커라이징 하기 위해 도커 파일을 생성해야한다.

 

Docker 컨테이너를 생성하기 위해서는 Docker이미지가 있어야 한다. 그리고 이 이미지를 생성하기 위해 

Dockerfile을 이용해 도커라이징 해야한다.

 

여기서는 Docker에 compose를 사용할 것이다.

root 경로에 docker-comoose.yml 파일을 생성한후 

version: "3.7"

services:
  sample:
    container_name: react-dockerize
    build:
      context: .
      dockerfile: Dockerfile
    volumes:
      - ".:/app"
      - "/app/node_modules"
    ports:
      - "3001:3000"
    environment:
      - NODE_ENV=development
    stdin_open: true
    tty: true

Dockerfile은 도커 이미지를 빌드하기 위해서 작성해주는 파일입니다.

FROM node:14.19.1

WORKDIR /app

ENV PATH /app/node_modules/.bin:$PATH

COPY package.json /app/package.json
RUN npm install 
RUN npm install react-scripts@3.0.1 -g


CMD ["npm", "start"]

• FROM: 사용할 기본 이미지를 지정하는 곳
  • ubuntu, node 같은 이미지를 지정해줄 수 있다.
• RUN: 명령어를 실행시킨다.
  • 위의 경우, "npm install" 을 실행합니다.
• COPY: 호스트의 파일/디렉토리를 컨테이너로 복사한다.
  • 위의 경우, 호스트의 ./build 디렉토리의 내용을 컨테이너의 package.json을 복사한다.
• ENTRYPOINT: 컨테이너가 실행될 때 실행할 명령어를 지정한다.

컨테이너 실행

이제 아래 명령어를 사용해 Docker-compose.yml을 실행시켜주면, docker 이미지와 컨테이너가 실행될 것이다.

docker-compose up -d --build

docker images 명령어를 사용해 확인해보면, 해당 React의 이미지를 확인할 수 있고, docker ps -a 명령어로 컨테이너에 

마운트 되어 실행되고 있는 것을 확인할 수 있다.

 

해당 컨테이너를 종료하기 위해서는 아래 명령어를 실행하면 된다.

docker-compose stop

참고자료

[2020.05.24] Docker 기초 - React을 Docker로 배포하기

Docker로 React 애플리케이션 배포하기

 

GitHub - Koras02/docker-react