클라우드

[CLOUD] 3-Tier Architecture 배포하기 (1)

예림밈 2025. 5. 4. 18:21
이번 포스팅은 실제로 내가 만든 블로그를 3-Tier Architecture 로 배포하려고 한다. 
프론트엔드 배포 위주로 담아보겠다.

 

1. Presentation Tier - (프론트엔드) ✅

역할 : 사용자와 상호작용하는 부분 (웹페이지 UI)

구성 요소 :

  • React로 빌드한 정적 파일 
  • CDN 또는 정적 호스팅 서비스

배포 방식 :

  • AWS S3 + CloudFront
  • Nginx 서버에서 정적 파일 서빙
  • 도메인 연결 및 HTTPS 인증서 적용 (추후 적용 예정)

 

2. Application Tier - (서버)

역할 : API 처리, 인증, 비즈니스 로직 수행

구성 요소 :

  • Springboot 애플리케이션
  • 실행 환경 : EC2, ECS, EKS 등

 

배포 방식 예시 : 

  • EC2 인스턴스에 Springboot Jar 실행
  • Docker 컨테이너 기반 배포 (ECS or EKS)
  • Load Balancer 앞단 구성 (ALB 사용 가능)

 

3. Data Tier - (데이터)

역할: 데이터 저장, 조회 갱신

구성 요소 : 

  • RDS - MySQL , PostgreSQL 등

배포 과정

✅ 1. React 애플리케이션 정적 파일로 빌드

npm run build
  • build/ 폴더에 정적 파일들이 생성됨(index.html, main.js, CSS 등).
  • 추후 이 폴더의 내용을 S3에 업로드

✅ 2. S3 버킷 생성 및 설정

S3 버킷 만들기

  1. AWS 콘솔 > S3 > [버킷 생성]
  2. 버킷 이름 입력 (예: my-blog)
  3. 나머지는 기본 설정으로

정적 웹 호스팅 활성화

  1. S3 버킷 > [속성] 탭 > 정적 웹 사이트 호스팅 > 활성화
  2. index document: index.html
  3. (선택) error document: index.html → SPA 라우팅 오류 방지용

 

✅ 3. 정적 파일 업로드

aws s3 sync build/ s3://myblog
  • AWS CLI 설치되어 있어야 함
  • S3 콘솔에서도 수동으로 업로드 가능
  • --acl public-read는 모든 사용자에게 파일을 읽을 수 있게 해줌 (보안상 CloudFront 사용 시 제거해도 됨)

 

✅ 4. CloudFront 배포 생성

CloudFront 설정

  1. AWS 콘솔 > CloudFront > [배포 생성]
  2. Origin 도메인: S3 버킷 선택 (my-blog.s3.amazonaws.com)
  3. Viewer Protocol Policy: Redirect HTTP to HTTPS
  4. Default Root Object: index.html
  5. (선택) SSL 인증서 연결 → 도메인 연결 시 필요
  6. 캐시 설정 조정 (정적 리소스 캐싱, index.html은 낮은 TTL 등)

✅ 5. 배포 완료 후 테스트

  • CloudFront 도메인: dxxxxxxx.cloudfront.net

 

  • 도메인 주소로 접속하면 React 앱이 뜨는지 확인
    • ⚠️ 하지만 해당 도메인 주소로 접속하니 AccessDenied 에러 발생..ㅠ  해결 방법은 https://yerim110324.tistory.com/40 에서 참고하면 된다!

 

에러 발생
접속 화면

✅ 6. 사용자 도메인 연결 (선택 사항)

  • Route53에서 도메인 구입 또는 등록
  • CloudFront 배포에 해당 도메인 연결
  • AWS Certificate Manager에서 SSL 인증서 발급
  • HTTPS 지원 가능

 

다음 포스팅은 Application Tier 배포 과정을 소개하겠다.