🚀 AWS를 활용한 간단한 서비스 배포

📌 프로젝트 소개

이미지 갤러리 애플리케이션을 AWS에 배포하는 전체 과정을 담았습니다.
실제 서비스처럼 백엔드 API 서버와 프론트엔드 웹을 분리하여 배포합니다.

기술 스택

• Backend: Express.js + TypeScript + TypeORM
• Frontend: React + TypeScript + Vite
• Database: MySQL (AWS RDS)
• Storage: AWS S3
• Deployment: EC2, ELB, CloudFront, Route 53

전체 아키텍처

사용자가 웹사이트에 접속하는 흐름:

[사용자 브라우저] → [Route 53 DNS]
                      ↓
        web.theo-test.com 입력 시
                      ↓
            [CloudFront CDN]
                      ↓
            [S3 정적 웹 호스팅]
                (React 앱)
                      ↓
        API 호출 (api.theo-test.com)
                      ↓
               [ELB + HTTPS]
                      ↓
               [EC2 서버]
                  ├→ [RDS MySQL] (데이터 저장)
                  └→ [S3 버킷] (이미지 저장)

---

🔧 Part 1: 백엔드 서버 배포

백엔드는 API 서버로, 데이터베이스와 파일 저장소를 관리합니다.

1. RDS MySQL 데이터베이스 구축

💡 RDS란? AWS가 관리해주는 데이터베이스 서비스입니다.
직접 DB를 설치/관리할 필요 없이 클릭 몇 번으로 생성 가능합니다.

1-1. RDS 인스턴스 생성

# AWS 콘솔에서 RDS 서비스 접속
1. "데이터베이스 생성" 클릭
2. 엔진 옵션: MySQL 8.0.35
3. 템플릿: 프리 티어 (무료)
4. 설정:
   - DB 인스턴스 식별자: theo-db (DB 서버 이름)
   - 마스터 사용자 이름: admin
   - 마스터 암호: 복잡하게 설정 후 메모!
5. 인스턴스 구성: db.t3.micro (프리티어)
6. 스토리지: 20GB
7. 연결:
   - VPC: 기본값
   - 퍼블릭 액세스: 예 (EC2에서 접근 가능하도록)
8. 추가 구성:
   - 초기 데이터베이스 이름: theo_db
   - DB 파라미터 그룹: 아래에서 생성

1-2. RDS 파라미터 그룹 설정 (한글/이모지 지원)

# 파라미터 그룹 = DB 설정 파일

1. RDS → 파라미터 그룹 → "파라미터 그룹 생성"
2. 패밀리: mysql8.0 선택
3. 그룹 이름: mysql-utf8mb4

# 한글과 이모지를 저장하기 위한 설정
4. 생성 후 편집 → 다음 값들 검색해서 변경:
   - character_set 시작하는 모든 항목 → utf8mb4
   - collation 시작하는 항목 → utf8mb4_unicode_ci
   - time_zone → Asia/Seoul

5. RDS 인스턴스에 파라미터 그룹 적용

1-3. RDS 보안 그룹 설정

# 보안 그룹 = 방화벽 규칙

인바운드 규칙 (들어오는 트래픽):
- Type: MySQL/Aurora
- Port: 3306
- Source: EC2 보안 그룹 ID (나중에 EC2 생성 후 추가)
  → "EC2 서버만 DB에 접속 가능"하도록 설정

1-4. 데이터베이스 연결 코드

// Express 서버에서 RDS 연결하는 코드
export const AppDataSource = new DataSource({
  type: "mysql",
  host: process.env.DATABASE_HOST, // RDS 엔드포인트 주소
  port: 3306,
  username: process.env.DATABASE_USERNAME,
  password: process.env.DATABASE_PASSWORD,
  database: process.env.DATABASE_NAME,
  synchronize: true, // 개발 환경용 (자동 테이블 생성)
});

---

2. EC2 인스턴스 구축

💡 EC2란? AWS의 가상 컴퓨터입니다.
우리의 Express 서버 코드가 실행될 리눅스 컴퓨터를 빌리는 것입니다.

2-1. EC2 인스턴스 생성

1. EC2 서비스 → "인스턴스 시작"
2. 설정:
   - 이름: theo-server
   - OS 선택: Ubuntu 22.04 LTS
   - 인스턴스 유형: t2.micro (프리티어)

3. 키 페어 생성:
   - 이름: theo-key
   - .pem 파일 다운로드 (SSH 접속용, 잃어버리면 재발급 불가!)

4. 네트워크 설정:
   - 퍼블릭 IP 자동 할당: 활성화

5. 보안 그룹 (방화벽):
   - SSH (22번 포트): 내 IP만 허용
   - HTTP (80번 포트): 모든 IP 허용 (웹 서비스용)

2-2. EC2 서버 접속 및 환경 설정

# 1. SSH로 EC2 접속 (터미널에서)
chmod 400 theo-key.pem  # 키 파일 권한 설정
ssh -i theo-key.pem ubuntu@[EC2 퍼블릭 IP]

# 2. Node.js 20 버전 설치 (Ubuntu 전용 명령어)
curl -fsSL https://deb.nodesource.com/setup_20.x | sudo -E bash -
sudo apt-get install -y nodejs

# 3. PM2 설치 (Node.js 프로세스 관리 도구)
sudo npm install -g pm2

# 4. Git 설치 및 프로젝트 클론
sudo apt install git
git clone [여러분의 GitHub 저장소 URL]
cd [프로젝트 폴더]/api-server

# 5. 패키지 설치 및 빌드
npm install
npm run build

2-3. 환경변수 설정 (.env 파일)

# vi 에디터로 .env 파일 생성
vi .env

# 아래 내용 입력 (i 키 누르고 입력, :wq로 저장)
AWS_ACCESS_KEY=AKIA로 시작하는 키
AWS_SECRET_ACCESS_KEY=발급받은 시크릿 키
AWS_S3_BUCKET=theo-image-storage
DATABASE_HOST=RDS 엔드포인트 주소.rds.amazonaws.com
DATABASE_NAME=theo_db
DATABASE_USERNAME=admin
DATABASE_PASSWORD=RDS 생성시 설정한 비밀번호

2-4. PM2로 서버 실행

# 서버 시작 (백그라운드 실행)
sudo pm2 start dist/app.js --name "api-server"

# 서버 상태 확인
sudo pm2 status

# 로그 보기
sudo pm2 logs api-server

# 서버 재시작 시에도 자동 실행 설정
sudo pm2 startup
sudo pm2 save

---

3. S3 접근을 위한 IAM 설정

💡 IAM이란? AWS 서비스에 접근할 수 있는 권한을 관리하는 서비스입니다.
EC2 서버가 S3에 파일을 업로드하려면 권한(액세스 키)이 필요합니다.

# IAM 사용자 생성
1. IAM 서비스 → 사용자 → "사용자 생성"
2. 사용자 이름: s3-upload-user
3. 권한: AmazonS3FullAccess 정책 선택

# 액세스 키 발급 (중요!)
1. 생성한 사용자 클릭 → "보안 자격 증명" 탭
2. "액세스 키 만들기" 클릭
3. 용도: "AWS 외부에서 실행되는 애플리케이션"
4. 액세스 키와 시크릿 키 복사 (한 번만 보여짐!)
   → .env 파일에 추가

---

4. S3 버킷 생성 (이미지 저장용)

💡 S3란? AWS의 파일 저장 서비스입니다.
업로드된 이미지들을 저장하는 창고 역할을 합니다.

1. S3 서비스 → "버킷 만들기"
2. 버킷 이름: theo-image-storage (전세계 유일해야 함)
3. 리전: ap-northeast-2 (서울)
4. 퍼블릭 액세스 차단 해제 (이미지 공개 접근용)

# 버킷 정책 추가 (이미지를 웹에서 볼 수 있도록)
5. 버킷 선택 → 권한 탭 → 버킷 정책 편집

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Effect": "Allow",
      "Principal": "*",
      "Action": "s3:GetObject",
      "Resource": "arn:aws:s3:::theo-image-storage/*"
    }
  ]
}

---

5. ELB로 HTTPS 적용하기

💡 ELB란? Elastic Load Balancer의 약자로, 트래픽을 분산시키고
HTTPS(보안 연결)를 적용하는 서비스입니다.

5-1. SSL 인증서 발급 (HTTPS용)

1. Certificate Manager 서비스 접속
2. "인증서 요청" → 퍼블릭 인증서
3. 도메인 이름: api.theo-test.com
4. 검증 방법: DNS 검증
5. Route 53에서 CNAME 레코드 생성 (자동)
6. 발급 완료까지 대기 (10-30분)

5-2. Application Load Balancer 생성

1. EC2 → 로드 밸런서 → "로드 밸런서 생성"
2. Application Load Balancer 선택
3. 설정:
   - 이름: theo-elb
   - 체계: 인터넷 경계 (외부 접근용)
   - 가용 영역: 2개 이상 선택 (필수)

4. 보안 그룹 생성:
   - HTTP (80) - 모든 IP
   - HTTPS (443) - 모든 IP

5-3. 대상 그룹 설정 (타겟 그룹)

# 대상 그룹 = ELB가 트래픽을 보낼 EC2 인스턴스 목록

1. 대상 유형: 인스턴스
2. 대상 그룹 이름: theo-api-tg
3. 프로토콜: HTTP, 포트: 80
4. 상태 검사 경로: / (서버 헬스체크용)
5. EC2 인스턴스 등록

5-4. 리스너 규칙 설정

# HTTPS 리스너 (443 포트)
- 프로토콜: HTTPS
- 인증서: ACM에서 발급받은 인증서 선택
- 기본 동작: theo-api-tg로 전달

# HTTP 리스너 (80 포트)
- HTTPS로 리다이렉트 (자동으로 HTTPS 사용)

---

6. Route 53으로 도메인 연결

💡 Route 53이란? AWS의 DNS 서비스입니다.
api.theo-test.com 같은 도메인을 ELB와 연결해줍니다.

1. Route 53 → 호스팅 영역 → theo-test.com
2. "레코드 생성"
3. 설정:
   - 레코드 이름: api (→ api.theo-test.com이 됨)
   - 레코드 유형: A
   - 별칭: 켜기
   - 별칭 대상: ELB 선택 (theo-elb)
4. "레코드 생성"

→ 이제 https://api.theo-test.com으로 접속 가능!

최종 배포된 화면

---

🌐 Part 2: 프론트엔드 웹 배포

React 앱을 빌드하여 S3에 업로드하고, CloudFront로 전세계에 빠르게 제공합니다.

1. React 프로젝트 빌드

# 로컬 컴퓨터에서 실행
cd web-client

# 프로덕션 환경변수 설정
echo "VITE_API_URL=https://api.theo-test.com" > .env.production

# 빌드 (최적화된 정적 파일 생성)
npm run build

# dist 폴더에 HTML, CSS, JS 파일 생성됨

---

2. S3 정적 웹 호스팅

2-1. S3 버킷 생성 (웹 호스팅용)

1. S3 → "버킷 만들기"
2. 버킷 이름: theo-web-client
3. 퍼블릭 액세스 차단: 모두 해제

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

1. 버킷 → 속성 탭 → 정적 웹사이트 호스팅
2. 활성화
3. 인덱스 문서: index.html
4. 오류 문서: index.html (React Router 지원)

2-3. 버킷 정책 설정 (공개 읽기 권한)

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Effect": "Allow",
      "Principal": "*",
      "Action": "s3:GetObject",
      "Resource": "arn:aws:s3:::theo-web-client/*"
    }
  ]
}

2-4. 빌드 파일 업로드

# S3 콘솔에서
1. theo-web-client 버킷 열기
2. "업로드" 클릭
3. dist 폴더 내의 모든 파일 드래그 앤 드롭
4. "업로드"

# 이제 S3 엔드포인트로 접속 가능
# http://theo-web-client.s3-website.ap-northeast-2.amazonaws.com

---

3. CloudFront CDN 구축

💡 CloudFront란? 전세계 엣지 서버에 콘텐츠를 캐싱하여
빠른 로딩 속도를 제공하는 CDN 서비스입니다.

3-1. SSL 인증서 발급 (버지니아 북부 리전)

⚠️ 중요: CloudFront용 인증서는 반드시 us-east-1 리전에서 생성!

1. 리전을 "미국 동부(버지니아 북부)"로 변경
2. Certificate Manager → "인증서 요청"
3. 도메인: web.theo-test.com
4. DNS 검증 → Route 53 CNAME 자동 생성

3-2. CloudFront 배포 생성

1. CloudFront → "배포 생성"

2. 원본 설정:
   - 원본 도메인: S3 정적 웹 호스팅 엔드포인트
     (theo-web-client.s3-website.ap-northeast-2.amazonaws.com)
   ⚠️ 드롭다운 목록이 아닌 직접 입력!

3. 기본 캐시 동작:
   - 뷰어 프로토콜: Redirect HTTP to HTTPS

4. 설정:
   - 대체 도메인(CNAME): web.theo-test.com
   - SSL 인증서: 위에서 생성한 인증서 선택
   - 기본 루트 객체: index.html

5. 오류 페이지 (React SPA 지원):
   - 404 에러 → /index.html 반환 (200 상태)
   - 403 에러 → /index.html 반환 (200 상태)

---

4. Route 53 도메인 연결

1. Route 53 → 호스팅 영역 → theo-test.com
2. "레코드 생성"
3. 설정:
   - 레코드 이름: web
   - 레코드 유형: A
   - 별칭: 켜기
   - 별칭 대상: CloudFront 배포 선택

→ https://web.theo-test.com으로 접속 가능!

최종 배포된 화면

DB에 올바르게 저장되어 있는 모습

S3 버킷에 올바르게 올라가있는 파일들

---

🔒 보안 그룹 설정 요약

✅ EC2 보안 그룹
- SSH(22): 0.0.0.0/0 (모든 IP)
- HTTP(80): 0.0.0.0/0 (모든 IP)

✅ ELB 보안 그룹
- HTTP(80): 0.0.0.0/0 (모든 IP)
- HTTPS(443): 0.0.0.0/0 (모든 IP)

✅ RDS 보안 그룹
- MySQL(3306): EC2 보안 그룹 ID만

→ 외부에서는 ELB를 통해서만 접근 가능
→ DB는 EC2에서만 접근 가능

---

💰 비용 관리 (과금 방지!)

프리티어 한도

• EC2 t2.micro: 월 750시간
• RDS db.t3.micro: 월 750시간
• S3: 5GB 저장, 20,000 GET 요청
• CloudFront: 1TB 전송

리소스 삭제 순서 (실습 후 필수!)

1. CloudFront 배포 비활성화 → 삭제
2. ELB 삭제
3. EC2 인스턴스 종료
4. RDS 삭제 (스냅샷 생성 체크 해제!)
5. 탄력적 IP 릴리즈 ⚠️ 미사용 시 시간당 과금!
6. S3 버킷 비우기 → 삭제
7. Route 53 호스팅 영역 삭제 (도메인은 유지)

---

📚 트러블슈팅 가이드

자주 발생하는 문제와 해결법

1. RDS 연결 실패

✓ RDS 보안 그룹에 EC2 보안 그룹 ID 추가했는지 확인
✓ RDS 퍼블릭 액세스 "예"로 설정했는지 확인
✓ .env 파일의 DATABASE_HOST가 정확한지 확인
✓ RDS 파라미터 그룹 적용했는지 확인

2. ELB Health Check 실패

✓ EC2 보안 그룹이 ELB 보안 그룹 ID 허용하는지 확인
✓ PM2로 서버가 실행 중인지 확인 (pm2 status)
✓ 대상 그룹의 헬스체크 경로가 "/" 인지 확인

3. S3 이미지 업로드 실패

✓ IAM 사용자 액세스 키 제대로 복사했는지 확인
✓ S3 버킷 이름이 .env와 일치하는지 확인
✓ S3 버킷 퍼블릭 액세스 차단 해제했는지 확인

4. CloudFront 403/404 에러

✓ S3 정적 웹 호스팅 엔드포인트 직접 입력했는지 확인
✓ 오류 페이지 설정에서 /index.html 반환 설정했는지 확인
✓ S3 버킷 정책 제대로 설정했는지 확인

---

🎯 최종 체크리스트

배포가 완료되었다면 다음을 확인하세요

✅ 백엔드

• https://api.theo-test.com 접속 가능
• 이미지 업로드 API 동작
• DB 연결 정상
• PM2로 프로세스 관리 중

✅ 프론트엔드

• https://web.theo-test.com 접속 가능
• API 서버와 통신 정상
• 이미지 업로드/조회 기능 동작
• 새로고침 시에도 페이지 정상 표시

✅ 보안

• 모든 보안 그룹 규칙 최소화
• HTTPS 적용 완료
• 환경변수 안전하게 관리

---

🚀 다음 단계

이제 기본적인 AWS 배포를 마스터했습니다! 다음 단계로 나아갑니다.

1. GitHub Actions로 자동 배포 구축
2. CloudWatch로 모니터링 설정
3. Docker 컨테이너화
4. Kubernetes(EKS) 도입
5. Terraform으로 인프라 코드화