[Docker] Docker Compose 기본 개념 및 node, react(nginx) 연결

- 여러 의 컨테이너로부터 이루어진 서비스를 구축, 실행하는 순서를 자동으로 해, 관리를 간단하게 하는 기능
- Docker compose는 compose 파일을 준비해 커맨드를 1회 실행하는 것으로, 그 파일로부터 설정을 읽어들여 모든 컨테이너 서비스를 실행시키는 것이 가능하다.
- 즉, 여러 개의 컨테이너를 한 번에 돌릴 수 있고, 한 번에 관리 가능한 것이 docker compose
- 각 폴더 안에 Dockerfile을 참조해서 DockerCompose.yml을 만드는 데 만약에 DockerCompose.yml에다가 각 폴더 안의 Dockerfile에 들어가는 내용을 넣으면 각 폴더의 Dockerfile이 필요 없다.

Docker compose 사용 순서

1. 각각의 container 별로 Dockfile을 작성한다.(기존에 있는 이미지를 사용하는 경우엔 불필요)
2. docker-compose.yml을 작성하고, 각각 독립된 컨테이너의 실행 정의를 실시
3. docker-compose up 명령어를 실행해 docker-compose.yml 파일에 정의한 컨테이너를 실행

Docker compose 커맨드(명령어)

• -f : 기본적으로 docker-compse.yml 파일을 읽으나 다른 이름이나 다른 경로의 파일을 Docker compose 설정 파일로 사용하고 싶을 때 사용하는 옵션
  • docker-compose -f docker-compose.local.yml up
• up : Docker compose 파일에 정의되어 있는 모든 서비스 컨테이너를 한 번에 생성하고 실행하기 위해서 사용한다.
• -d : docker compose를 실행할 대 백그라운드에서 컨테이너를 띄우고자 할 때 사용하는 옵션
• down : up 명령어와 반대로 동작하는 것으로 docker compose에 정의되어 있는 모든 서비스 컨테이너를 한 번에 정지시키고 삭제한다.
• start : 내려가 있는 특정 서비스 컨테이너를 올리기 위해서 사용한다. up으로 사용해도 무방
• stop : start 명령어와 반대로 동작하는 것으로 돌아가고 있는 특정 서비스 컨테이너를 정지시키기 위해서 사용한다.
• ps : docker compose에 정의되어 있는 모든 서비스 컨테이너 목록을 조회할 때 사용한다.

1. 제일 상위 폴더의 docker-compose.yml

version: "3.8"
services:
  node-project: #사용자 임의 이름 생성
    build:
      context: ./docker #Dockerfile이 있는 폴더
    volumes:
      - ./docker:/app #Dockerfile에 있는 작업 디렉토리
    ports:
      - "8080:8000"
    container_name: node-project
    command: bash -c "npm install & node index.js"

  react-project:
    build:
      context: ./docker_react #Dockerfile이 있는 폴더
    volumes:
      - ./docker_react/build:/usr/share/nginx/html #Dockerfile에 있는 작업 디렉토리
    ports:
      - "3040:80"
    container_name: react-project

 

• version : docker compose 파일의 버전
  • docker-compose.yml 내용을 해석하기 위한 문법 버전
• services : 컨테이너를 실행하기 위한 단위로 하위에는 서비스 이름 > 서비스 옵션 순으로 작성된다.
• build : build 할 dockerfile의 경로를 지정해준다.
  • docker-compose에서 dockerfile을 이용해 자동으로 docker build를 실행하고 생성된 이미지를 사용한다. 만약 dockerfile 경로나 이름이 다른 곳에 있다면 특정 경로를 작성해 dockerfilㄷ을 지정할 수도 있다.
  • context : docker build를 실행할 디렉토리로 dockerfile을 찾는다.
  • dockerfile : 빌드에 사용될 Dockerfile을 찾는데 기본 이름일 경우에는 사용하지 않아도 된다.
• ports : 포트포워딩을 지정한다. <호스트포트> : <컨테이너포트>
  • 만약 8080 만 지정할 경우, 컨테이너의 포트만 지정한 것으로 된다. 이렇게 될 경우 호스트 포트는 랜덤으로 이루어진다.
  • 8080 으로 지정시 실제로는 4684(랜덤) : 8080 과 동일.
• volume : 바인드 마운트, 볼륨을 지정할 수 있다.
  • 로컬 PC의 디렉토리와 컨테이너 안의 디렉토리를 연결한다.
  • <호스트>:<컨테이너> 방식으로 사용한다.
  • 보통 docker-compose를 통해 빌드하게 되면 이미지가 생성되는데, 개발을 하다보면 수시로 코드를 수정하게 되는데 이때마다 이미지를 재생성하면 굉장히 비효율적이다.
  • 이때 코드 수정을 하고 있는 호스트의 경로를 컨테이너와 연결시켜 이미지 빌드 없이 코드가 반영될 수 있도록 하는 것이 volume이다.
• environment : 컨테이너에서 사용할 환경변수를 설정할 수 있다.
• depends_on : 실행순서를 보장받고 싶을 때 사용한다. dependes_on 에 적힌 컨테이너가 옵션이 적용된 컨테이너 다음으로 실행된다.
• image : 도커 이미지 ( dockerfile을 사용하지 않는 기본 이미지일 경우 )
• command : 마지막 만들어지고 난 후 실행할 명령을 작성한다.
  • Dockerfile의 cmd 부분

2. node 프로젝트의 Dockerfile

#부모 이미지 지정
FROM node:16
#작업 디렉토리 생성
WORKDIR /app
#소스 추가
COPY . /app
#패키지 설치 
RUN npm install
#포트 매핑
EXPOSE 8000
#실행 명령
CMD ["node", "index.js"]

3. react 프로젝트의 Dockerfile과 nginx.conf

3-1. react 프로젝트의 Dockerfile

#base image 
FROM nginx:1.21-alpine

#copy build files
COPY build /usr/share/nginx/html

#copy nginx config file
COPY nginx.conf /etc/nginx/conf.d/default.conf

#expose port
EXPOSE 80

#start nginx server
CMD ["nginx", "-g", "daemon off;"]

3-2. react 프로젝트의 nginx.conf

server {
    listen 80;
    root /usr/share/nginx/html;
    index index.html;
    location / {
        try_files $uri $uri/ /index.html;
    }
}

 

react-project(nginx 또다른 버전)

제일 상위 폴더의 docker-compose.yml

version: "3.8"
services:
  node-project: #사용자 임의 이름 생성
    build:
      context: ./docker #Dockerfile이 있는 폴더
    volumes:
      - ./docker:/app #Dockerfile에 있는 작업 디렉토리
    ports:
      - "8080:8000"
    container_name: node-project
    command: bash -c "npm install & node index.js"

  react-project:
    build:
      context: ./docker_react #Dockerfile이 있는 폴더
    volumes:
      - ./docker_react:/app #Dockerfile에 있는 작업 디렉토리
    ports:
      - "3030:80"
    container_name: react-project

 Dockerfile

#부모 이미지 지정
FROM nginx
#root에 app 폴더 생성
RUN mkdir /app
#work dir 고정
WORKDIR /app
#work dir에 build 폴더 생성 /app/build
RUN mkdir ./build
#host pc의 현재경로의 build 폴더를 workdir의 build 폴더로 복사 
ADD ./build ./build
#nginx의 default.conf를 삭제 
RUN rm /etc/nginx/conf.d/default.conf
#host pc의 nginx.conf를 아래 경로에 복사 
COPY ./nginx.conf /etc/nginx/conf.d
#80 포트 오픈
EXPOSE 80
#container 실행 시 자동으로 실행할 command. nginx 시작함 
CMD ["nginx", "-g", "daemon off;"]

 nginx.conf

server {
    listen 80;
    location / {
        root /app/build;
        index index.html;
        try_files $uri $uri/ /index.html;
    }
}

자동으로 docker-compose.yml up 커맨드를 실행하게 되면 이미지, 컨테이너가 생성됨!!