🌟 EC2 배포, Docker로 SpringBoot + MySQL DB + Nginx+React 연동

각각, SpringBoot, React+nginx, MySQL 에 대한 Docker 컨테이너를 만들어서 배포할려고 합니다.

준비사항

1) github
backend(SpringBoot) 프로젝트,
frontend(React+nginx) 프로젝트 가 Github 프로젝트로 만들어져야합니다.

2) Dockerfile
그리고 각 프로젝트에 Dockerfile이 루트(./)경로에 위치합니다.

3) Dockerhub 에 imge push
실제 Dockrfile로 만들어낸 docke image들은 DockerHub에 있는 레포지토리에 push를 하고,

4) EC2 서버
원격에 있는 EC2서버에 docker image를 pull하고 docker run을 해서 배포할 것입니다.

보안그룹 -> 3000, 8080, 3306, 80 포트를 열어야 합니다!

Dockerfile

MySQL

Dockerfile

FROM mysql:8.0
ENV MYSQL_ROOT_PASSWORD=1234
ENV MYSQL_DATABASE=test
ENV MYSQL_USER=dsg
ENV MYSQL_PASSWORD=dsg
ENV TZ=Asia/Seoul
EXPOSE 3306

docker 명령어

docker build -t dockerhub닉네임/repository이름
docker push dockerhub네임/repository이름

docker run -d -p 3308:3306 docker닉네임/repository이름 

or

docker run \
  --name mysql_8.0 \
  -d \
  --restart unless-stopped \
  -e MYSQL_ROOT_PASSWORD=1234 \
  -e MYSQL_DATABASE=test \
  -e MYSQL_USER=dsg \
  -e MYSQL_PASSWORD=dsg \
  -e TZ=Asia/Seoul \
  -p 3308:3306 \
  -v $(pwd)/mysql/conf.d:/etc/mysql/conf.d \
  mysql:latest \
  --character-set-server=utf8mb4 \
  --collation-server=utf8mb4_general_ci

backend

build.gradle

...
dependencies {
    implementation 'org.springframework.boot:spring-boot-starter-web'
    compileOnly 'org.projectlombok:lombok'
    annotationProcessor 'org.projectlombok:lombok'
    testImplementation 'org.springframework.boot:spring-boot-starter-test'
    runtimeOnly 'com.mysql:mysql-connector-j'
    testRuntimeOnly 'org.junit.platform:junit-platform-launcher'

    // jpa
    implementation 'org.springframework.boot:spring-boot-starter-data-jpa'

    // env
    implementation 'io.github.cdimascio:java-dotenv:5.1.1'
}

...

// plain jar 안생기게 설정
jar {
    enabled = false
}

applciation.yml

• datasource 내 url localhost -> host.docker.internal 로 변경해줍니다!

server:
  port: 8080

spring:
  jpa:
    hibernate:
      ddl-auto: update # 테이블 생성 및 업데이트 전략
    properties:
      hibernate:
        format_sql: true # SQL 포맷팅
        highlight_sql: true # 하이라이트 SQL 출력
        use_sql_comments: true # 실제 JPQL SQL 주석 사용


  datasource:
    driver-class-name: com.mysql.cj.jdbc.Driver
    url: jdbc:mysql://host.docker.internal:3308/test?serverTimezone=Asia/Seoul&characterEncoding=UTF-8
    username: root
    password: 1234
    
    
logging:
  level:
    org.hibernate.SQL: debug # Hibernate의 SQL을 출력
    org.hibernate.orm.jdbc.bind: trace # Hibernate의 SQL 바인딩을 출력
    org.springframework.transaction.interceptor: trace # Hibernate의 SQL 바인딩을 출력

Test

@Builder
@Getter
@Entity
@NoArgsConstructor
@AllArgsConstructor
@Table(name = "tbl_test")
public class Test {

    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;

    private String title;
}

TestController

@RestController
@RequiredArgsConstructor
@RequestMapping("/api/test")
public class TestController {

    private final TestRepository testRepository;

    @GetMapping("/list")
    public List<TestDTO> test() {
        return testRepository.findAll().stream()
                .map(test -> TestDTO.builder()
                        .id(test.getId())
                        .title(test.getTitle())
                        .build())
                .toList();
    }

    @GetMapping
    public String testHello() {
        return "Hello World!";
    }

}

NotProd
: 미리 application 시작시, test table에 row 5개 insert 해주는 init 작업을 해줍니다.

@Slf4j
@Configuration
@RequiredArgsConstructor
//@Profile("!prod")
public class NotProd {

    private final TestRepository testRepository;

    @Bean
    CommandLineRunner initData() {
        return (args) -> {
            log.info("init data start...");

            if(testRepository.count() > 0) {
                log.info("init data already exists...");
                return;
            }
            LongStream.rangeClosed(1, 5).forEach(i -> {
                // test data
                Test test = Test.builder()
                        .title("title_" + i)
                        .build();

                testRepository.save(test);

            });
        };
    }
}

Dockerfile

• gradlew build 까지 포함한 Dockerfile
• 이제 docker build 를 하면, gradlew build 작업까지 할 수 있습니다.

# 최신 17-jdk-alpine 이미지로부터 시작
FROM openjdk:17-jdk-alpine

# 작업 디렉토리를 /app으로 설정
WORKDIR /app

# 현재 디렉토리의 모든 파일을 컨테이너의 /app 디렉토리로 복사
COPY . .

# gradlew에 실행 권한 부여
RUN chmod +x ./gradlew
# 프로젝트 빌드
RUN ./gradlew clean build

#ENV SPRING_PROFILES_ACTIVE=prod
# 컨테이너로 내에서 app.jar 위치 변경
ARG JAR_FILE=build/libs/*SNAPSHOT.jar
RUN mv ${JAR_FILE} app.jar

# 컨테이너가 실행될 때 실행될 명령어 지정
# 오류남! 왜냐하면, spring.profiles.active=prod를 사용하려면, application.properties에 spring.profiles.active=prod를 추가해야함
ENTRYPOINT ["java", "-jar", "app.jar"]
#ENTRYPOINT ["java", "-Dspring.profiles.active=prod", "-jar","app.jar"]

docker 명령어

docker build -t dockerhub네임/repository이름
docker push dockerhub네임/repository이름

docker run -d -p 8080:8080 dockerhub네임/repository이름

nginx+react

npm 라이브러리 설치

npm i axios

npm install react-router-dom

index.js

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <BrowserRouter>
        <App />
    </BrowserRouter>
);

testApi.js

import axios from "axios";

// .env 파일에 있는 AWS_EC2_IP_URL 값을 가져오기
// const backendIpUrl = process.env.REACT_APP_BACKEND_IP_URL;
const backendIpUrl = "http://43.203.42.37";

// 테스트 API 호출
export const getTest = async () => {
    console.log("backendIpUrl: ", backendIpUrl);
    const response = await axios.get(`${backendIpUrl}/api/test/list`);
    return response;
};

Home.js

import React, { useEffect, useState } from "react";
import { getTest } from "../api/testApi";

const Home = () => {
    // test
    const [tests, setTests] = useState([]);

    useEffect(() => {
        getTest().then((res) => {
            console.log(res);
            setTests(res.data);
        });
    }, []);

    return (
        <div>
            <h1>dsg 월드에 오신 걸 환영합니다!</h1>
            <h2>오늘도 즐거운 하루 되세요!</h2>
            <br />
            <ul style={{ listStyle: "none" }}>
                {tests.map((item) => (
                    <li key={item.id}>{item.title}</li>
                ))}
            </ul>
        </div>
    );
};

export default Home;

App.js

import './App.css';
import {Route, Routes} from "react-router-dom";
import Home from "./components/Home";

function App() {
  return (
      <div className="App">
        <Routes>
          <Route path="/" element={<Home />} />
        </Routes>
      </div>
  );
}

export default App;

Dockerfile

# 빌드를 위한 Node.js의 경량 버전인 Alpine 이미지를 사용합니다.
FROM node:alpine as build

# 작업 디렉토리를 /app으로 설정합니다.
WORKDIR /app

# package.json과 package-lock.json 파일을 현재 작업 디렉토리로 복사합니다.
COPY package.json package-lock.json ./

# 종속성을 설치합니다. --silent 옵션을 사용하여 출력 메시지를 최소화합니다.
RUN npm install --silent

# 현재 디렉토리의 모든 파일을 작업 디렉토리로 복사합니다.
COPY . /app

# 애플리케이션을 빌드합니다.
RUN npm run build

# Nginx의 경량 버전인 Alpine 이미지를 사용합니다.
FROM nginx:alpine

# 빌드된 파일을 Nginx의 정적 파일 제공 디렉토리로 복사합니다.
COPY --from=build /app/build /usr/share/nginx/html

# Nginx 설정 파일을 컨테이너의 Nginx 설정 디렉토리로 복사합니다.
COPY ./nginx/nginx.conf /etc/nginx/conf.d/default.conf

# Nginx를 포그라운드 모드(daemon off)로 실행합니다.
ENTRYPOINT ["nginx", "-g", "daemon off;"]

./nginx/nginx.conf

upstream backend {
    server 172.17.0.1:8080; # backend -> 게이트웨이 서버 172.17.0.1
}

server {

    listen 80;
    server_name 43.203.42.37 dsgshop.store www.dsgshop.store;  # 도메인 이름 추가

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

    location /api/ {
        proxy_pass http://backend;
    }
}

docker 명령어

docker build -t dockerhub네임/repository이름
docker push dockerhub네임/repository이름

docker run -d -p 80:80 dockerhub네임/repository이름

EC2(ubuntu) 에 Docker 진행

• docker, docker-compose 설치
  참고 블로그) https://velog.io/@mooh2jj/AWS-EC2-Docker-설치

• dockerHub에 있는 각각(backend, frontend) 레포지토리에 push된 docker image 들을 docker pull 받아서 EC2 서버에 가져옵니다.

• docker run 으로 불러서 프로젝트 컨테이너를 실행할 수 있습니다.

향후, 이를 자동화하는 CICD도구인 github-Action 을 사용하면 더 간편하게 EC2 인스턴스에 배포할 수 있습니다.

docker-compose

docker-compose.yml

version: '3.3'

services:
  db:
    image: mysql
    restart: unless-stopped
    environment:
      MYSQL_ROOT_PASSWORD: 1234
      MYSQL_DATABASE: test
      TZ: Asia/Seoul
    volumes:
      # - ./mysql_data:/var/lib/mysql # load failed 가 됨!
      - ./mysql/conf.d:/etc/mysql/conf.d
    ports:
      - "3306:3306"
    command:
      - --character-set-server=utf8mb4
      - --collation-server=utf8mb4_general_ci
    healthcheck:
      test: [ "CMD", "mysqladmin", "ping" ]
      interval: 5s
      retries: 10
    networks:
      - test_network

  backend:
    restart: on-failure
    # .env 파일을 로드하여 환경변수를 설정
    env_file:
      - .env
    build:
      context: .
      dockerfile: Dockerfile
    ports:
      - "8080:8080"
    depends_on:
      - db
#    condition: service_healthy
    networks:
      - test_network

  frontend:
    restart: on-failure
    build:
      context: ./frontend
      dockerfile: Dockerfile
    ports:
      - "80:80"
    depends_on:
        - backend
    networks:
      - test_network
networks:
  test_network:
    driver: bridge

docker compose 명령어

docker compose up -d --build

docker compose down

# 도커 안사용하는 네트워크, 볼륨, 이미지, 컨테이너 전부 삭제
docker system prune -f

./nginx/nginx.conf

upstream backend {
    server backend:8080; # backend -> 게이트웨이 서버 172.17.0.1
}

server {

    listen 80;
    

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

    location /api/ {
        proxy_pass http://backend;
    }
}

---

참고

• https://github.com/mooh2jj/test241212.git
• https://github.com/mooh2jj/test241213.git