전영호의 개발 블로그

1) 8080 포트와 80 포트 3000 포트를 오픈

1) docker-compose.yml 작성

version: "3.8"
services:
  mysql:
    image: mysql:8.0
    container_name: randomchat-mysql
    restart: always
    environment:
      MYSQL_ROOT_PASSWORD: "{자신의 mysql root 비밀번호 설정}"
      MYSQL_DATABASE: "{사용할 데이터베이스 이름 설정}"
      MYSQL_USER: "{사용할 유저 아이디 설정}"
      MYSQL_PASSWORD: "{사용할 유저의 비밀번호 설정}"
    ports:
      - "3306:3306"
    volumes:
      - mysql_data:/var/lib/mysql

  spring:
    build:
      context: ./spring
    container_name: randomchat-spring
    restart: always
    environment:
      SPRING_DATASOURCE_URL: jdbc:mysql://randomchat-mysql:3306/{위의 mysql 에서 정의한 데이터베이스 이름 설정}
      SPRING_DATASOURCE_USERNAME: {위의 mysql 에서 정의한 유저 아이디 입력}
      SPRING_DATASOURCE_PASSWORD: {위의 mysql 에서 정의한 유저 비밀번호 입력}
    ports:
      - "8080:8080"
    depends_on:
      - mysql

  react:
    build:
      context: ./react
    container_name: randomchat-react
    restart: always
    volumes:
      - ./react/build:/usr/share/nginx/html
      # 중요!!!! react 의 빌드파일을 nginx 의 서빙 디렉토리와
      # 맵핑하므로써 80포트로 접속시 리액트 프로젝트가 출력되게 한다!
    ports:
      - "3000:80"

  nginx:
    build:
      context: ./nginx
    container_name: randomchat-nginx
    restart: always
    ports:
      - "80:80"
    depends_on:
      - spring
      - react

volumes:
  mysql_data:

해당 설정을 통해 MySQL 컨테이너를 생성하면서 동시에 Spring 컨테이너와 의존 관계를 생성해주고

Nginx 의 리액트, 스프링 프로젝트의 의존 관계도 설정해준다.

2) randomchat 디렉토리 내부 상태

1) 가비아에서 도메인 구매

2) DNS 설정하기

( 아이피와 도메인을 연결하는 과정 )

( 도메인 경로를 나눠놓는 이유는 www 로 오게되면 Nginx 를 통해 React 서버를 호출, api 로 오게되면 Ngingx 를 통해 Spring 서버를 호출하기 위함 )

1) Nginx 리버스 프록시 파일 설정

( nginx 디렉토리에 nginx.conf 파일 생성 및 작성 )

worker_processes 1;

events {
    worker_connections 1024;
}

http {
    server {
        listen 80;

        server_name www.random-chat.site;
        location / {
            proxy_pass http://randomchat-react:80;
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        }
    }

    server {
        listen 80;

        server_name api.random-chat.site;
        location / {
            proxy_pass http://randomchat-spring:8080;
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        }
    }
}

( 80 포트로 접속 시 접속 도메인 별로 www 로 접속하면 React 프로젝트를 호출, api 로 접속하면 Spring 프로젝트를 호출하게 설정 )

2) Dockerfile 파일 생성 및 작성

From nginx:latest
COPY nginx.conf /etc/nginx/nginx.conf

도커의 버전과 설정을 잡아준다.

3) nginx 디렉토리 내부 상태

1) randomchat 디렉토리에서 아래 명령어로 빌드 실행

docker-compose up --build

2) 테스트

1) 아래 명령어를 사용하여 Docker 와 Docker Compose 를 설치

sudo apt update
sudo apt install docker.io docker-compose -y

2) 각 컨테이너를 관리할 디렉토리를 생성

( 홈 디렉토리 위치는 root 계정의 홈이 아닌 사용자 계정의 홈 디렉토리로 생성한다 )

mkdir -p ~/randomchat/{spring,mysql,react,nginx}
cd ~/randomchat

1) Spring 컨테이너로 이동하여 빌드된 스프링 파일을 위치시킨다.

( scp 를 사용하여 빌드 파일을 미니 피씨로 전송하였다 )

위 작업 이후에  jar 파일 이름을 app.jar 로 mv 명령어를 사용해 변경해주었다.

 2) Dockerfile 작성

( /randomchat/spring 경로에 작성 )

FROM openjdk:21-jdk-slim
WORKDIR /app # 컨테이너 내부의 작업 경로
COPY app.jar app.jar
# 로컬의 빌드파일인 app.jar 파일을 도커 컨테이너 내부 경로에 동일한 이름인 app.jar 로 복사하여 사용
# 여기서 앞의 app.jar 이 로컬의 위치인데 docker-compose.yml 에 context 항목을
# 현재 위치인 . 으로 표기했기 때문에 현재 위치인 spring 디렉토리부터의 경로를 기재해주면 된다.
ENTRYPOINT ["java", "-jar", "app.jar"]

3) 디렉토리 내부 상태

1) React 컨테이너로 이동하여 빌드된 리액트 파일을 위치시킨다.

( scp 를 사용하여 빌드 파일을 미니 피씨로 전송하였다 )

 ( 주의할 점 : build.zip 을 압축해제 하면 build/build/{빌드파일} 형태로 디렉토리로 하나 더 감싸져 있는 경우가 있기 때문에 주의해야 한다. )

 2) Dockerfile 작성

( /randomchat/react 경로에 작성 )

FROM nginx:latest
WORKDIR /user/share/nginx/html
COPY build/ .
CMD ["nginx", "-g", "daemon off;"]

 ( COPY 를 통해 react 디렉토리 내부에 build 파일 하위의 파일을 복사하여 도커 컨테이너 내부에 복사하여 사용한다 )

 3) 디렉토리 내부 상태