[Docker] Spring Boot, Vue, MariaDB, Nginx 통합 배포하기

 

 

 

Docker 환경에서 Spring Boot, Vue, MariaDB, Nginx 통합 배포하기

 

 

 

Docker 환경에서 통합 배포하기

 

프로젝트 개요

현재 진행 중인 프로젝트는 다음과 같은 구성 요소를 포함합니다:

• 프론트엔드: Vue.js
• 백엔드: Spring Boot
• 데이터베이스: MariaDB

각각의 컴포넌트는 독립적으로 실행 및 테스트되었습니다.

이제 이들을 도커를 사용하여 통합하고, 모두 연동된 상태에서 한 번에 실행할 수 있도록 할 계획입니다.

 

 

---

 

프론트엔드 Vue.js 빌드 : disk 파일 제작

 

 

프론트엔드 Vue.js 빌드

npm run build

vue.js프로젝트를 빌드 해줍니다.

 

프로젝트 파일 위치에 가보면 disk라는 폴더 밑에 이렇게 파일이 구성됩니다.

 

 

---

 

백엔드 Spring Boot 빌드 : jar 파일 제작

 

 

백엔드 Spring Boot 빌드

Intellij에서 코끼리 - build - bootJar를 클릭합니다.

 

프로젝트 폴더 위치에 가면 build/libs/ 폴더 안에 [프로젝트명]-0.0.1-SNAPSHOT.jar로 파일이 만들어집니다.

 

 

---

 

 

 

프로젝트 실행에 필요한 파일 다운로드

 

 

 

Docker Plugin 다운로드

 

Intellij - Plugins에서 Docker를 검색해서 설치해 줍니다.

 

 

Docker를 설치하고 나면 현재 실행중인 컨테이너 등을 확인할 수 있습니다.

 

 

 

 

Doker Images 다운로드

 

mariadb / nginx / redis / openjdk

이렇게 다운로드 하였습니다.

프로젝트 환경에 필요한것들을 다운로드 하시면 됩니다.

 

docker pull openjdk:17-jdk-buster

jar파일 실행을 위해서 openjdk:17을 도커에 받아 줍니다.

openjdk는 버전을 맞추기 위해 터미널에서 다운받았습니다.

 

 

 

 

---

 

 

 

IntelliJ Spring Boot 환경 설정

 

 

IntelliJ Spring Boot 환경 설정

IntelliJ를 기반으로 돌릴거라 https://start.spring.io/에서 Docker Compose Support만 추가하여 다운로드 하였습니다.

 

프로젝트 폴더 위치에 파일들을 만들어 추가해줍니다.

 

1. backend/백엔드_프로젝트_빌드파일.jar

backend폴더를 만들고,  그 안에 백엔트 프로젝트에서 빌드하여 제작한 jar 파일을 넣어줍니다.

 

2. frontend/disk/프론트엔드_프로젝트_disk파일 안 내용 복사

frontend 폴더를 만들고, 그 안에 프론트엔드를 빌드하여 만든 disk폴더를 통째로 넣어줍니다.

 

3. frontend/nginx/default.conf 파일 제작

frontend 폴더안에 nginx폴더를 하나 만들고 default.conf 파일을 제작합니다.

server {
    listen 80;
    server_name localhost;

    location / {
        root /usr/share/nginx/html;
        index index.html index.htm;
    }
}

파일내용은 Nginx 웹 서버의 기본 동작 설정만 간단히 적었습니다.

 

4. compose.yaml 파일 수정

Docker Compose를 사용하여 여러 Docker 컨테이너를 정의하고 구성합니다. 이 파일을 통해 여러 서비스(컨테이너)를 하나의 설정 파일로 묶어서 손쉽게 배포하고 관리할 수 있습니다.

version: '3'
services:
  db:
    ports:
      - 3306:3306
    image: mariadb:latest
    environment:
      - MARIADB_ROOT_PASSWORD=1234
      - MARIADB_DATABASE=greenplate
    volumes:
      - ./db:/var/lib/mysql
      - ./init.sql:/docker-entrypoint-initdb.d/init.sql

  redis:
    image: redis:latest
    ports:
      - 6379:6379

  backend:
    ports:
      - 8080:8080
    image: openjdk:17-jdk-buster
    env_file:
      - .env # .env 파일을 참조하여 환경 변수를 설정
    volumes:
      - ./backend:/app
    command: "java -jar /app/green-plate-0.0.1-SNAPSHOT.jar"

  frontend:
    ports:
      - 8081:80
    image: nginx:latest
    volumes:
      - ./frontend/dist:/usr/share/nginx/html
      - ./frontend/nginx:/etc/nginx/conf.d

파일 내용은 작동할 순서대로 적어줍니다.

제가 만든 프로그램은 backend가 처음 가동될때 db table을 제작하거나 수정하기 때문에 db를 먼저 생성해주어야 합니다.

그리고 backend에서 환경변수 파일이 너무 많아 .env파일로 제작하여 따로 빼주었습니다.

 

 

SPRING_DATASOURCE_URL=jdbc:mariadb://db:3306/greenplate
SPRING_DATASOURCE_USERNAME=root
SPRING_DATASOURCE_PASSWORD=1234
SPRING_DATASOURCE_DRIVER_CLASS_NAME=org.mariadb.jdbc.Driver
...

.env파일은 위와같은 형태로 작성하면 됩니다.

 

 

---

 

 

Docker 프로그램 실행

 

 

Docker 프로그램 실행

docker-compose up -d

위 명령어로 Docker Compose에서 정의된 서비스들을 시작합니다.

 

docker-compose down

종료 시킬때는 down 명령어를 사용하면 됩니다.

 

 

 

실행시키면 도커 컴포즈가 잘 올라와서 실행된것을 확인할 수 있습니다.

 

 

docker descktop에서도 작동되는 것을 볼 수 있습니다.

 

 

 

프로젝트도 무사히 잘 올라왔습니다.