EC2 인스턴스에 React + SpringBoot + MySQL 연동

개요

• 다음 번 배포가 있을 때에는 이번과 같이 시간을 많이 쏟지 않기를 위해 정리하는 글이다.
• 앞으로 이 글에 자주 올 예정

1. VPC 생성

1. VPC 서비스 페이지에서 [VPC 생성] 버튼을 클릭합니다.
2. 생성할 리소스로 VPC 만을 선택하고, VPC 이름으로 BoardVPC 를 CIDR 로 10.0.0.0/16 을 입력합니다.

2. 서브넷 생성

• 리액트 앱과 스프링부트 앱을 실행할 퍼블릭 서브넷과 MySQL 서버를 실행할 프라이빗 서브넷을 각각 생성합니다.
  • 1. 서브넷 화면에서 [서브넷 생성] 버튼을 클릭 후 이전에 생성한 vpc에 연결
  • 2. 서브넷 설정 화면에서 서브넷 이름, 가용영역, CIDR 블록을 각각 입력, 선택합니다.

3. 라우팅 테이블 생성

• 1. song-rt-web-public 이름의 라우팅 테이블을 생성합니다.
• 1-2. 서브넷 연결 편집에 들어가서 web 두개를 연결합니다.
• 1-3. song-rt-web-public의 라우팅 편집에 들어가서 추가

• 2. song-rt-was-public 도 위와 같이 추가해줍니다.

• 3-1. 인스턴스에서 사용할 보안 그룹 미리 생성(총 2개- web과 was)

• 3-2. was 웹 어플리케이션 서버용 인바운드 규칙 추가(Name 태그 추가해주기!)

• 4. VPC의 Resource map으로 VPC, 서브넷, 라우팅 테이블, 인터넷 게이트웨이의 연결 관계를 확인합니다.

4. 애플리케이션 전용 EC2 인스턴스 생성

1. 서브넷에 리액트 및 스프링부트 애플리케이션을 실행할 EC2 인스턴스를 생성합니다.(이름 임의 지정 및 T2.micro 사용하였음)

2. SSH 접속에 사용할 키 페어를 생성합니다. (이전에 생성한 키 페어가 있는 경우, 동일한 키 페어를 선택하여 사용할 수 있습니다.)

3. BoardVPC, PublicSubnet 서브넷, 퍼블릭 IP 자동 할당 활성화를 선택하고, AppServerSG 이름의 보안 그룹을 생성합니다. 22(SSH), 80(HTTP), 8080(HTTP 개발) 포트로 접속할 수 있도록 인바운드 보안 그룹 규칙을 추가합니다.(기존에 있던 보안그룹에서 생성했기 때문에 그거 선택)

총 4개 만들어야하며, 서브넷을 각각 잘 선택해야 한다.

• 1. 맨 처음 인스턴스

• 2. 두 번째 인스턴스

• 3. 세 번째 인스턴스

• 4. 네 번째 인스턴스

5. RDS 생성

1. RDS 서브넷 그룹 생성

2. 파라미터 그룹 생성

3. 옵션 그룹 생성

4. 데이터베이스 생성

• 1. SQL 생성

• 2. 반드시 프리 티어 선택

이렇게만 하면 생성되지 않는다.
우리가 만들었던 VPC의 설정 편집에 들어가서 DNS 호스트 이름 활성화를 클릭해준다.

보안그룹도 하나 더 추가해준다.

이후에 DB 서브넷 그룹 song-subnet-mysql 추가

그러면 생성이 되는 모습을 볼 수 있다.(엔드포인트 잘 기억)

5. mysql workbench에서 잘 되는지 확인

6. hostname에 end-point 지정

7. 비밀번호 입력하고 test connection 확인

8. 잘되면 연결!

6. 빌드 환경 설정(Web 인스턴스)

1) Git 설치
sudo yum update -y
sudo yum install git -y

2) Node.js 설치 (최신 LTS 버전)
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash
source ~/.bashrc
nvm install --lts
nvm use --lts
npm install -g pm2

빌드 환경 설정 (WAS 인스턴스)
1) Java 설치 (Amazon Corretto 17)
sudo yum install java-17-amazon-corretto -y

7. spring boot 설정

application.yml 의 datasource 부분을 전부 엔드포인트로 변경 및 아이디 비밀번호 지정

spring:
  main:
    allow-circular-references: true
  jpa:
    show-sql: true
    hibernate:
      ddl-auto: update
    properties:
      hibernate:
        dialect: org.hibernate.dialect.MySQL8Dialect
        format_sql: true
  servlet:
    multipart:
      enabled: true
      max-file-size: 50MB
      max-request-size: 50MB

  datasource:
    first:
      url: jdbc:mysql://<RDS-ENDPOINT>:3306/users?useSSL=false&useUnicode=true&serverTimezone=Asia/Seoul&allowPublicKeyRetrieval=true
      username: <RDS-USERNAME>
      password: <RDS-PASSWORD>
      driver-class-name: com.mysql.cj.jdbc.Driver

    second:
      url: jdbc:mysql://<RDS-ENDPOINT>:3306/admin_db?useSSL=false&useUnicode=true&serverTimezone=Asia/Seoul&allowPublicKeyRetrieval=true
      username: <RDS-USERNAME>
      password: <RDS-PASSWORD>
      driver-class-name: com.mysql.cj.jdbc.Driver

8. 애플리케이션 서버 설정

1. AppServer EC2 인스턴스의 퍼블릭 IP 주소를 확인하고, SSH 클라이언트 프로그램(예: PuTTY)을 이용해 접속합니다.

2. 작업 디렉터리를 만들고 JDK, Nginx를 설치합니다:

# 작업 디렉터리 생성 및 이동
cd
mkdir board
cd board

# Amazon Corretto 17 (JDK) 설치
sudo yum install -y java-17-amazon-corretto-devel

# JDK 설치 확인
java -version

# Nginx 설치 및 시작
sudo amazon-linux-extras install nginx1
sudo systemctl start nginx
sudo systemctl enable nginx

# Nginx 버전 확인
nginx -v

웹 브라우저에서 EC2 인스턴스의 퍼블릭 IP 주소로 접속하여 Nginx 서버 동작을 확인합니다.

9. 애플리케이션 수정

1. 배포 환경에 맞춰 애플리케이션 설정을 변경합니다:

React 애플리케이션의 .env 파일:

REACT_APP_REST_API_SERVER_ADDRESS=<Spring Boot 앱이 실행되는 EC2의 퍼블릭 IP>:8080

Spring Boot 애플리케이션의 application.yml 파일:

spring:
  datasource:
    url: jdbc:mysql://<RDS-ENDPOINT>:3306/<DB-NAME>?useSSL=true&serverTimezone=Asia/Seoul
    username: <RDS-USERNAME>
    password: <RDS-PASSWORD>
    driver-class-name: com.mysql.cj.jdbc.Driver

  jpa:
    show-sql: true
    hibernate:
      ddl-auto: update
    properties:
      hibernate:
        dialect: org.hibernate.dialect.MySQL8Dialect
        format_sql: true

10. 애플리케이션 배포

React와 Spring Boot 코드를 AppServer EC2 인스턴스에 배포합니다.

1. React 앱 배포:

• 로컬에서 빌드: npm run build
• WinSCP를 사용해 빌드 파일을 EC2의 /home/ec2-user/board/react-app 디렉토리로 전송
• Nginx 설정:

  sudo vi /etc/nginx/nginx.conf

  server 블록 내에 다음 추가:

  location / {
      root /home/ec2-user/board/react-app/build;
      try_files $uri $uri/ /index.html;
  }

• Nginx 재시작: sudo systemctl restart nginx

2. Spring Boot 앱 배포:

• 로컬에서 JAR 파일 빌드: ./gradlew bootJar
• WinSCP를 사용해 JAR 파일을 EC2의 /home/ec2-user/board 디렉토리로 전송
• 실행 스크립트 생성:

  echo "java -jar your-application.jar" > run-spring-boot.sh
  chmod +x run-spring-boot.sh

• 애플리케이션 실행: ./run-spring-boot.sh

주의사항:

• EC2 인스턴스의 보안 그룹에서 필요한 포트(80, 8080 등)를 열어주세요.
• RDS 엔드포인트, 사용자 이름, 비밀번호는 실제 값으로 교체해야 합니다.
• 프로덕션 환경에서는 환경 변수나 AWS Secrets Manager를 사용하여 민감한 정보를 관리하는 것이 좋습니다.

이 가이드를 따라 React 프론트엔드와 Spring Boot 백엔드를 AWS EC2에 성공적으로 배포할 수 있습니다.