프론트엔드 S3 배포 + 통합 테스트

프론트엔드 정적 파일을 저장할 S3 버킷을 생성합니다.

버킷 설정

• Bucket name: shopeasy-frontend-{ACCOUNT_ID}
  예: shopeasy-frontend-123456789012
• AWS Region: ap-northeast-2 (서울)

S3 정적 웹사이트 호스팅을 위해서는 퍼블릭 읽기가 가능해야 합니다. 버킷 생성 시 또는 생성 후에 퍼블릭 액세스 차단을 해제합니다.

• Block all public access: 체크 해제
• 경고 메시지가 나타나면 "I acknowledge that the current settings might result in this bucket and the objects within becoming public" 체크

S3 버킷을 웹 서버처럼 동작하도록 정적 웹사이트 호스팅 기능을 활성화합니다.

설정 값

• Static website hosting: Enable
• Hosting type: Host a static website
• Index document: index.html
• Error document: index.html (React SPA 라우팅을 위해!)

설정 저장 후, Properties → Static website hosting 섹션에서 Bucket website endpoint URL을 메모합니다.

http://shopeasy-frontend-{ACCOUNT_ID}.s3-website.ap-northeast-2.amazonaws.com

모든 사용자가 버킷의 파일을 읽을 수 있도록 버킷 정책을 추가합니다.

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Sid": "PublicReadGetObject",
      "Effect": "Allow",
      "Principal": "*",
      "Action": "s3:GetObject",
      "Resource": "arn:aws:s3:::shopeasy-frontend-{ACCOUNT_ID}/*"
    }
  ]
}

EC2 인스턴스에 SSH로 접속하여 프론트엔드를 빌드합니다.

# 1. EC2에 SSH 접속
ssh -i "ShopEasy-Key.pem" ec2-user@EC2_PUBLIC_IP

# 2. 프론트엔드 디렉토리로 이동
cd ~/ecommerce-app/frontend

# 3. 의존성 설치
npm install

# 4. VITE_API_URL을 EC2 퍼블릭 IP로 설정하여 빌드
VITE_API_URL=http://EC2_PUBLIC_IP:5000 npm run build

# 5. 빌드 결과 확인
ls -la dist/

빌드된 파일을 S3 버킷에 업로드합니다.

# EC2에서 실행 (IAM 역할이 S3 권한을 가지고 있어야 함)
aws s3 sync dist/ s3://shopeasy-frontend-{ACCOUNT_ID}/

# 업로드된 파일 확인
aws s3 ls s3://shopeasy-frontend-{ACCOUNT_ID}/ --recursive

웹 브라우저에서 S3 웹사이트 엔드포인트로 접속합니다.

http://shopeasy-frontend-{ACCOUNT_ID}.s3-website.ap-northeast-2.amazonaws.com

ShopEasy 메인 페이지가 정상적으로 로드되면 성공입니다!

S3 웹사이트 URL에서 회원가입 후 로그인이 정상 동작하는지 확인합니다.

• 회원가입 페이지에서 새 계정 생성
• 생성한 계정으로 로그인
• 로그인 후 사용자 이름이 표시되는지 확인

메인 페이지에서 상품 목록이 정상적으로 로드되는지 확인합니다.

• 메인 페이지에 상품 목록이 표시되는지 확인 (RDS에서 데이터 조회)
• 상품 클릭 시 상세 페이지로 이동되는지 확인
• 상품 이미지, 가격, 설명이 정상 표시되는지 확인

상품 상세 페이지에서 리뷰를 작성합니다.

• 별점 선택 및 리뷰 텍스트 작성
• 사진 첨부 후 리뷰 등록 (S3에 이미지 업로드)
• 등록된 리뷰와 사진이 정상 표시되는지 확인 (DynamoDB에서 리뷰 데이터 조회)

장바구니 기능과 주문 기능을 테스트합니다.

• 상품을 장바구니에 추가
• 장바구니 페이지에서 수량 변경 / 삭제
• 주문 진행 및 완료 확인