[Dev-ops] Docker setting

 

Architecture

일단 우리팀이 사용하기로 한 Architecture는 다음과 같다.

frontend

• react

backend

• spring

db

• PostgreSQL
• Google Storage

Dev-ops

• Docker
• Swagger
• RabbitMQ
• Celery
• ElasticSearch
• 추가) 프로메테우스, 그라파나

 

IDE 

• intelliJ : 팀적으로 정한건 아니지만.. 스프링 공부할때도 무조건 좋다고 했으니 이걸 사용하는게 좋을듯

 

정확히 아는 것은 아니지만, Docker상에 setting이 필요한 것은

frontend(react), backend(spring), rabbitMQ, Celery, ElasticSearch 로 알고 있는데, 

후자는 부수적인 부분이라 backend에 추가해봐야 알 것 같고

 

일단은 frontend, backend부터 docker에 구축해보기로 했다. 

 

기본 개념에 대한 공부는 아래글을 다시 보충하면서, 공부해봤다. 

2021.07.02 - [MAC(Intel, M1) WINDOW] - [Docker]Docker란? M1 Docker 설치

[Docker]Docker란? M1 Docker 설치

 

 

setting

먼저 대충 이런 구조를 생각하고 있다.

backend안에는  spring project가

frontend안에는 react proejct가 

각각의 폴더안에는 Dockerfile이 존재하고, 

루트 경로에는 docker-compose.yml 파일이 존재 

 

그리고 IDE는 intelliJ를 사용하다 보니, .idea 폴더가 생기는데, 이를 gitignore로 막아주어야 한다. 

https://www.toptal.com/developers/gitignore

gitignore.io

항상 쓰던대로 이 사이트를 사용했고, 

"windows,macos,intellij+all" (윈도우, 맥 사용팀원 존재 + IDE는 intelliJ)

3가지 조합을 사용했는데, +all을 안붙이니까 빼먹는 폴더/파일이 있더라..  (+all의 차이점은 모르겠다..찾아도 안나옴)

*참고로 idea폴더는 IntelliJ IDEA를 사용했을 때, 프로젝트에 specific한 setting들이 전부 저장되는 곳이다.

 

 

frontend

 

1. react 프로젝트 생성 

루트 폴더로 이동하여 react 프로젝트를 생성한다.

npx create-react-app frontend

프로젝트명은 frontend로 지정해주었다. 

 

프로젝트가 생성되면 일단, 실행해서 에러 없이 켜지는지 확인한다. 

npm run start

 

2022/04/06수정

뭔가 업데이트가 됐는지 또 오류가 나서

npm uninstall -g create-react-app
yarn global remove create-react-app
npx create-react-app frontend

해줬더니 됐다...

 

 

 

 

 

2. Dockerfile

생성된 react project인 frontend폴더에 Dockerfile이라는 이름의 파일을 생성해준다. 

 

#base image
#docker hub에서 image를 pull (node version 17에 issue)
FROM node:16.13.0-alpine

# set working directory
#작업을 수행할 디렉토리를 지정
WORKDIR /app

#현재 경로에 있는 것을 app으로 복사
COPY . /app

# 이미지가 빌드 될때 실행
RUN npm install


#
#https://iagreebut.tistory.com/153?category=777928
#https://leonkong.cc/posts/dockerizing-react-app.html
#https://github.com/litsynp/docker-example
#https://gitlab.com/yalco/practice-docker

FROM : 사용할 base image 

일단 docker hub에서 node이미지를 끌어와서 사용한다. 

react는 왜 node를 기본으로 끌어와 사용할까? 

 

- 사실 react를 사용하는데, node.js가 필수는 아니다. 하지만, react개발에는 node.js와 관련된 툴들이 사용된다.

대표적으로, react의 의존성 관리는 npm을 사용하는데, npm을 사용하기 위해서는 node.js가 필요하다. 

 

node.js는 브라우저 내에서 말고도 javascript를 실행할 수 있게 해주는 것 (javascript runtime환경)

React는 가상 DOM을 통해 UI를 만드는 라이브러리

  

참고:

Node.js가 뭔가? 

https://youtu.be/pTm5E3jcOeY

 

 

17version이 최신인데, 이를 사용하면 (node:latest) 에러가 발생해서, 16.13.0버전을 사용했다. 

 

WORKDIR : 이미지 내에서 명령어를 실행할 디렉토리 

/app 

이건 주로 보통 app으로 지정해주길래 동일하게 지정해주었다. 

해당 리눅스 환경 내에 app이라는 디렉토리를 만들고 그 내부에서 수행한다는 의미

 

COPY : host OS내의 디렉토리/파일을 컨테이너의 경로로 복사(단순 복사)

. /app 

현재 디렉토리(frontend 세팅된 상태)를 그대로 workdir로 설정한 app내부로 복사한다. 

 

RUN : 이미지 생성과정에서 실행되는 명령어 

npm install
# npm install react-scripts@3.0.1 -g : 아직 필요성을 못느껴서 하지 않았고, 이전 프로젝트에서도 딱히 안해서.. 

 

npm install에 환경변수가 추가되는 이유

 

지금은 딱히 설치하는게 없어서 환경변수를 추가하지 않았지만, 추가해야한다면, 

# `/app/node_modules/.bin`을 $PATH 에 추가
ENV PATH /app/node_modules/.bin:$PATH

주로 이런느낌으로 추가되게 되는데, 그 이유  

 

https://www.lesstif.com/javascript/npm-install-module-33489373.html

npm install 시 module 이 설치되는 경로

 

 

 

 

3. docker-compose.yml

version: "3"

services:
  frontend:
    #Dockerfile의 경로
    build: ./frontend
    command: ["npm", "start"]
    ports:
      - 3000:3000
    networks:
      - app-tier
    # 연결할 외부 디렉토리 : 컨테이너 내 디렉토리(작업공간 app으로 설정해줌 -> frontend/Dockerfile)
    volumes:
      - ./frontend:/app

networks:
  app-tier:
    driver: bridge

 

version

version은 docker의 버전에 따라 달라지는데, 

docker version확인 방법

docker --version

 

docker version에 따른 docker-compose version

https://docs.docker.com/compose/compose-file/compose-file-v3/

Compose file version 3 reference

여기서 확인하면 되는데, 그냥 3으로 해두면 무난하게 문제 없을듯 

 

build 

Dockerfile의 경로를 나타내는데, 도커파일의 이름을 Dockerfile로 잘 지정해 두었다면, 파일명까지는 적지 않아도 된다.

 

command

Dockerfile내의 CMD처럼 컨테이너 실행 시 수행되는 명령어 이다.

일단 dev 버전이므로, react프로젝트를 시작하는 명령어인 npm start를 넣어준다.

 

ports

내부에서 개방할 포트 : 외부에서 접근할 포트

인데, 리액트는 디폴트가 3000번이므로 둘다 3000번으로 열어준다.

 

volumes:

 

 내 컴퓨터와 컨테이너와 특정 폴더를 공유함  / 공유할 폴더 경로를 {내컴퓨터}:{컨테이너} 로 연결해주면 됨

CMD처럼 컨테이너가 생성되어 실행될 때, 내부 폴더를 외부와 연결하는 것

내 컴퓨터내 frontend 디렉토리를 컨테이너 workdir인 app으로 연결해준다.

 

 

이렇게 지정하고, root경로( docker-compose.yml 이 존재하는 곳)에서 

docker-compose up

을 해주면, 정상적으로 localhost:3000으로 실행되는 것을 볼 수 있다. 

 

 

 

 

 

backend

 

1. spring 프로젝트 생성 

https://start.spring.io

spring boot를 이용하여, 스프링 프로젝트를 생성한다. 

dependecies는 아직 뭐가 사용될지 몰라서.. 근데 저거 안해주면 8080으로 안열리더라

압축을 풀어서 루트경로에 넣어준다. 

 

 

2. jar파일 생성(build)

1. console창(터미널) 프로젝트 폴더(위에서는 backend)로 이동 
2. ./gradlew build(빌드 후 빌드 폴더 생성됨)
3. cd build/libs

*빌드 후 jar파일만 복사하여 서버에 넣은 후 실행하면, 서버에서도 스프링이 동작함.

해주면, 다음과 같은 경로에 jar파일이 생성된 것을 볼 수 있다. 

 

3. Dockerfile 생성

#java 11 사용하므로 openjdk:11 image사용 (8 error)
FROM openjdk:11-jdk

#기본 작업 디렉토리 설정
WORKDIR /app

#https://iagreebut.tistory.com/171?category=887117
#jar파일 생성 후 복
ADD build/libs/backend-0.0.1-SNAPSHOT.jar /app/app.jar

#컨테이너가 실행될 때 명령어 수행
ENTRYPOINT ["java","-jar","/app/app.jar"]

 마찬가지로 해주는데, 

java11 이므로 openjdk:11을 사용해주어야 한다. 

 

ADD :

호스트OS의 파일 또는 디렉토리를 컨테이너 안의 경로로 복사 합니다. (원격 파일 다운로드, 압축 해제 등의 기능을 가짐!)

jar파일은 압축된 파일이므로, ADD를 사용하여 복사해준다.

 

ENTRYPOINT 

CMD와 유사하게 컨테이너 실행시 수행되는 명령어 이다.

다른점은 

CMD는 명령과 인자값이 변경될 수 있고, 컨테이너에서 명령 설정하지 않을 시 CMD에 기재된 명령을 기본값으로 실행됩니다. ENTRYPOINT는 명령 수정이 불가능하여 사용자에 의해 변경되지 않고 고정적으로 실행될 명령은 ENTRYPOINT를 사용하는것이 좋습니다.

이러한데.. 여기서 왜 굳이 ENTRYPOINT를 사용했는지는 잘 모르겠다.

컨테이너가 실행되면, 복사해두었던 jar파일을 실행한다.

java -jar {jar파일명}

다음 명령어가 jar파일을 실행하는 명령어이고, 복사해두었던 경로를 이용해( /app/app.jar ) 실행한다. 

 

4. docker-compose.yml

version: "3"

services:

	#생략

  backend:
    build: ./backend
    ports:
      - 8080:8080
    networks:
      - app-tier

networks:
  app-tier:
    driver: bridge

별거 없어서 생략.. 

 

 

이제 backend까지 추가된 모습이고, docker-compose up을 실행하면, 

frontend(react)가 좀 늦게 뜬다 

정상적으로 작동한다.

localhost:3000과 localhost:8080에 접속했을 때 

localhost:3000

 

localhost:8080

이렇게 잘 뜬다. 

 

일단 기본적인 setting은 완료 했다. (통신이 제대로 되는지.. 다른 분들 컴퓨터에 작동하는지는 모르겠지만) 

 

끝나면 꼭 삭제해주자 용량이 엄청나다

docker stop $(docker ps -aq)
docker system prune -a

(두개하는데 1.683GB나옴)

 

 

 

실행방법)

GitHub https://github.com/2021-Techeer-teamC/MATHrone/tree/(MR-3)Docker_setting

1. Github 해당 링크 다운로드
   1. backend 디렉토리로 이동 : cd backend
   2. 빌드./gradlew build
   3. build/libs 경로에 backend-0.0.1-SNAPSHOT.jar생성 되었는지 확인 
2. backend
   1. backend 디렉토리로 이동 : cd backend
   2. 빌드./gradlew build
   3. build/libs 경로에 backend-0.0.1-SNAPSHOT.jar생성 되었는지 확인 
3. frontend
   1. frontend 디렉토리로 이동 : cd frontend
   2. npm install
4. 실행 
   1. root 경로로 이동 (docker-compose.yml파일 있는 곳)
   2. docker-compose up

 

 

 

궁금한 점:

backend, frontend 모두 작업공간을 /app으로 해놨는데, 그러면 지금 둘다 app이라는 디렉토리에 동시에 복사되어 존재하는 것인가?

아니면, 둘다 다른 컨테이너로 생각하는게 맞나?

 

 

 

참고한 사이트: 

https://www.yalco.kr/36_docker/

가장 쉽게 배우는 도커

 

https://nirsa.tistory.com/66?category=868315 

[Docker CE] dockerfile 명령어 정리 (1) (RUN,CMD,ENTRYPOINT)

 

https://velog.io/@eungook/React와-Node.js의-관계는-쫌-건너건너에요

React와 Node.js의 관계는 쫌 건너건너(?)에요