Docker로 React, Nginx, Spring Boot 컨테이너 배포하기

 

이전까진 도커 캐싱이 뭔지 모르고 어영부영 Dockerfile 작성하면서 살았다. 

 

예에에에에에에전에 도커를 처음 사용해 프로젝트 진행했을 때 컴퓨터 수명 다 깎아 먹었었다. 코드 수정이 있을 때마다 이미지 재생성을 위한 빌드를 계속했기 때문에 (한 번 빌드 시 20분 씩 걸렸던 기억이다....)

 

 

프로젝트 구조는 대충 이렇게 생겼다.

├─docker-compose.yml
├─backend
│  ├─Dockerfile
│  ├─build
│  └─src
└─frontend
    ├─Dockerfile
    ├─nginx.conf
    ├─build
    └─src

 

 

Spring Boot Dockerfile

그레이들 코틀린 버전이라 kts 확장자로 작성했는데 순수 그레이들이면 .kts를 삭제하면 된다.

FROM openjdk:11 AS builder
WORKDIR /backend
COPY gradlew .
COPY gradle gradle
COPY build.gradle.kts .
COPY settings.gradle.kts .
COPY src src
RUN chmod +x ./gradlew
RUN ./gradlew bootJar

FROM openjdk:11
COPY --from=builder /backend/build/libs/*.jar app.jar

ENTRYPOINT ["java", "-jar", "/app.jar"]
VOLUME /tmp

COPY를 이용해 로컬 파일을 컨테이너 속으로 복사한다. VOLUME은 아직 잘 모르겠다.

 

 

React Dockerfile

FROM node:16 AS builder
WORKDIR /frontend
COPY package.json .
RUN npm install

COPY . .
RUN npm run build

FROM nginx:latest
RUN rm /etc/nginx/conf.d/default.conf
RUN rm -rf /etc/nginx/conf.d/*
COPY ./nginx.conf /etc/nginx/conf.d/

COPY --from=builder frontend/build /usr/share/nginx/html
EXPOSE 80
CMD [ "nginx", "-g", "daemon off;"]

마찬가지로 COPY를 잘 쓰면 캐싱을 이용해 빠르게 빌드할 수 있다. 앞으로 코드가 더 추가되면 src 파일 COPY를 더 세분화하겠다.

 

 

nginx.conf

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

 

docker-compose.yml 

version: "1.0"
services:
  back:
    build:
      context: /backend
      dockerfile: Dockerfile
    restart: always
    ports:
      - 8080:8080
  
  front:
    build:
      context: /frontend
      dockerfile: Dockerfile
    restart: always
    ports:
      - 3000:80

외부포트(로컬) 3000으로 요청이 들어오면 컨테이너에서는 80번 포트로 처리한다는 뜻이다. 80번 포트를 사용하는 게 더 편하지만 리액트는 3000번 포트가 익숙해서 3000으로 설정했다! 입맛에 따라 바꾸면 된다. 

 

 

 

도커 컴포즈 이미지 빌딩

docker-compose build .

도커 컴포즈 컨테이너 실행

docker-compose -f docker-compose.yml up