AWS 3-Tier 웹 애플리케이션 배포(S3 + EC2 + RDS)

React + FastAPI + RDS 기반 AWS 3-Tier 웹 애플리케이션 배포

3-Tier Architecture란?

3-Tier 아키텍처는 웹 애플리케이션을 프레젠테이션(Presentation), 애플리케이션(Application), 데이터(Data)의 세 계층으로 나누어 구성하는 구조입니다.

• Presentation Tier: 사용자 인터페이스를 제공하는 계층 (프론트엔드) - React 앱 (S3 정적 웹 호스팅)
• Application Tier: 비즈니스 로직을 처리하는 계층 (백엔드 서버) - FastAPI 백엔드 (EC2)
• Data Tier: 데이터를 저장하고 관리하는 계층 (데이터베이스) - MySQL 데이터베이스 (RDS)

전체 구성도

웹 애플리케이션은 다음과 같은 AWS 인프라로 구성됩니다.

- 사용자는 브라우저에서 S3 버킷에 호스팅된 React 웹사이트에 접속합니다.
- React 프론트엔드는 API 요청을 EC2에서 구동 중인 FastAPI 서버로 보냅니다.
- FastAPI는 RDS(MySQL) 데이터베이스와 연결되어 사용자 요청을 처리하고 데이터를 주고받습니다.

퍼블릭 네트워크 구성

VPC 생성

aws ec2 create-vpc ^
  --cidr-block 10.0.0.0/16 ^
  --tag-specifications "ResourceType=vpc,Tags=[{Key=Name,Value=MyVPC}]"

퍼블릭 서브넷 생성

aws ec2 create-subnet ^
  --vpc-id %VPC_ID% ^
  --cidr-block 10.0.1.0/24 ^
  --availability-zone ap-northeast-2a ^
  --tag-specifications "ResourceType=subnet,Tags=[{Key=Name,Value=MyPublicSubnet}]"

인터넷 게이트웨이 생성

aws ec2 create-internet-gateway ^
  --tag-specifications "ResourceType=internet-gateway,Tags=[{Key=Name,Value=MyIGW}]"

IGW를 VPC에 연결

aws ec2 attach-internet-gateway ^
  --internet-gateway-id %IGW_ID% ^
  --vpc-id %VPC_ID%

라우팅 테이블 생성

aws ec2 create-route-table ^
  --vpc-id %VPC_ID% ^
  --tag-specifications "ResourceType=route-table,Tags=[{Key=Name,Value=MyRouteTable}]"

기본 라우트 추가

aws ec2 create-route ^
  --route-table-id %RT_ID% ^
  --destination-cidr-block 0.0.0.0/0 ^
  --gateway-id %IGW_ID%

라우팅 테이블 연결

aws ec2 associate-route-table ^
  --route-table-id %RT_ID% ^
  --subnet-id %SUBNET_ID%

서브넷 퍼블릭 IP 자동할당

aws ec2 modify-subnet-attribute ^
  --subnet-id %SUBNET_ID% ^
  --map-public-ip-on-launch

 

EC2 인스턴스 생성

키페어 생성

aws ec2 create-key-pair ^
  --key-name MyKey ^
  --query "KeyMaterial" ^
  --output text > MyKey.pem

보안 그룹 생성

aws ec2 create-security-group ^
  --group-name MyEC2SG ^
  --description "Security group for EC2" ^
  --vpc-id %VPC_ID%

포트 허용 (SSH, HTTP, FastAPI)

aws ec2 authorize-security-group-ingress --group-id %SG_ID% --protocol tcp --port 22 --cidr 0.0.0.0/0
aws ec2 authorize-security-group-ingress --group-id %SG_ID% --protocol tcp --port 80 --cidr 0.0.0.0/0
aws ec2 authorize-security-group-ingress --group-id %SG_ID% --protocol tcp --port 8000 --cidr 0.0.0.0/0

EC2 인스턴스 실행

aws ec2 run-instances ^
  --image-id %AMI_ID% ^
  --count 1 ^
  --instance-type t2.micro ^
  --key-name MyKey ^
  --security-group-ids %SG_ID% ^
  --subnet-id %SUBNET_ID% ^
  --associate-public-ip-address ^
  --tag-specifications "ResourceType=instance,Tags=[{Key=Name,Value=MyEC2}]"

퍼블릭 IP 확인

aws ec2 describe-instances ^
  --filters "Name=tag:Name,Values=MyEC2" ^
  --query "Reservations[*].Instances[*].PublicIpAddress" ^
  --output text

 

 

S3 정적 웹사이트 호스팅 구성 (React 프론트엔드 배포)

S3 버킷 생성

aws s3api create-bucket ^
  --bucket my-react-front-0606 ^
  --region ap-northeast-2 ^
  --create-bucket-configuration LocationConstraint=ap-northeast-2

정적 웹사이트 호스팅 활성화

aws s3 website s3://my-react-front-0606/ ^
  --index-document index.html ^
  --error-document index.html

퍼블릭 액세스 차단 해제

기본적으로 AWS는 버킷에 대한 퍼블릭 액세스를 차단하고 있기 때문에, 정책 적용 전에 아래 명령어로 차단 설정을 해제해야 합니다.

aws s3api put-public-access-block ^
  --bucket my-react-front-0606 ^
  --public-access-block-configuration BlockPublicAcls=false,IgnorePublicAcls=false,BlockPublicPolicy=false,RestrictPublicBuckets=false

버킷 정책 설정 (퍼블릭 읽기 허용)

aws s3api put-bucket-policy ^
  --bucket my-react-front-0606 ^
  --policy "{\"Version\":\"2012-10-17\",\"Statement\":[{\"Sid\":\"PublicReadGetObject\",\"Effect\":\"Allow\",\"Principal\":\"*\",\"Action\":\"s3:GetObject\",\"Resource\":\"arn:aws:s3:::my-react-front-0606/*\"}]}"

React 빌드 결과물 업로드

프로젝트 루트에서 npm run build 명령으로 dist 폴더를 생성한 후, 아래 명령어로 업로드합니다.

aws s3 cp C:\aws\movie_front\dist s3://my-react-front-0606/ --recursive

 

웹사이트 접속

S3 웹 호스팅 접속 주소 형식:

http://my-react-front-0606.s3-website.ap-northeast-2.amazonaws.com

 

 

FastAPI 배포: EC2에 백엔드 서버 실행

VSCode에서 SSH 접속 설정

• Ctrl + Shift + P → Remote-SSH: Open SSH Configuration File 선택
• C:\Users\{사용자명}\.ssh\config 파일 선택 후 아래 내용 추가

Host my-ec2 HostName <EC2 퍼블릭 IP> User ec2-user IdentityFile C:\경로\MyKey.pem 

SSH 접속 방법

• Ctrl + Shift + P → Remote-SSH: Connect to Host... 실행
• 등록한 my-ec2 클릭
• SSH: my-ec2 표시되면 접속 완료

EC2 접속 후 FastAPI 실행을 위한 명령어

1. 시스템 업데이트 sudo yum update -y 
2. Git 및 Python 환경 설치 sudo yum install -y git python3 python3-pip 
3. pip 업그레이드 pip3 install --upgrade pip 
4. 백엔드 프로젝트 clone git clone https://github.com/wjdwodhs/movie.git cd movie 
5. Python 가상환경 생성 및 활성화 python3 -m venv venv source venv/bin/activate 
6. 의존성 설치 pip install -r requirements.txt 
7. .env 파일 생성 touch .env # 이후 .env 파일 열어서 RDS 접속 정보 입력 (예: DB_HOST, DB_USER, DB_PASSWORD 등) 
8. 서버 실행 (포트 8000) python main.py

 

RDS 설정 및 연결

RDS 생성

RDS 인스턴스의 엔드포인트를 확인

MySQL Workbench에 연결을 추가

• SSH Hostname: EC2 인스턴스의 퍼블릭 IP
• SSH Username: ec2-user
• SSH Key File: MyKey.pem 경로
• MySQL Hostname: RDS 엔드포인트
• MySQL Server Port: 3306
• Username: RDS 마스터 계정(admin)
• Password: 마스터 계정의 비밀번호

fastapiuser 사용자 추가

CREATE USER 'fastapiuser'@'%' IDENTIFIED BY 'p@ssw0rd';
GRANT ALL PRIVILEGES ON fastapidb.* TO 'fastapiuser'@'%';
FLUSH PRIVILEGES;

admin 계정 대신 fastapiuser 계정으로 재접속

스키마 생성

CREATE SCHEMA `fastapidb` DEFAULT CHARACTER SET utf8;

EC2 인스턴스에 .env 파일 수정

서버 실행

python main.py

Workbench를 이용해 테이블 생성 확인

React 코드 수정 → axios 호출 주소를 EC2로 변경

React 앱 빌드 후 S3 버킷에 업로드

프로젝트 루트에서 npm run build 명령으로 dist 폴더를 생성한 후, 아래 명령어로 업로드합니다.

aws s3 rm s3://my-react-front-0606/ --recursive # 버킷 비우기
aws s3 cp C:\aws\movie_front\dist s3://my-react-front-0606/ --recursive

S3 접속 후 회원가입 시도 → CORS 오류 발생

 

main.py에 CORS 설정 추가

 

설정 후 회원가입

가입한 계정으로 로그인