프론트엔드 S3 배포 + 통합 테스트 - 정답 및 해설

# EC2에 SSH 접속 후

# 1. cors 패키지 확인 (이미 설치되어 있을 수 있음)
cd ~/ecommerce-app/api-server
npm list cors

# 2. 없다면 설치
npm install cors

# 3. API 서버의 .env에 CORS 설정 추가
# CORS_ORIGIN을 S3 웹사이트 URL로 설정
cat >> .env <<'EOF'

# CORS 설정 - S3 프론트엔드 도메인 허용
CORS_ORIGIN=*
EOF

# 4. API 서버 재시작
# pm2를 사용하는 경우:
pm2 restart all

# 또는 직접 실행하는 경우:
# 기존 프로세스 종료 후
node src/index.js &

# 방법 1: Node.js 메모리 제한 늘리기
NODE_OPTIONS="--max-old-space-size=512" VITE_API_URL=http://EC2_IP:5000 npm run build

# 방법 2: 스왑 메모리 추가 (1GB)
sudo dd if=/dev/zero of=/swapfile bs=1M count=1024
sudo chmod 600 /swapfile
sudo mkswap /swapfile
sudo swapon /swapfile

# 스왑 추가 후 다시 빌드
VITE_API_URL=http://EC2_IP:5000 npm run build

# 빌드 완료 후 스왑 해제 (선택)
sudo swapoff /swapfile
sudo rm /swapfile

ACCOUNT_ID=$(aws sts get-caller-identity --query Account --output text)

# 1. 퍼블릭 액세스 차단 상태 확인
echo "=== 퍼블릭 액세스 차단 설정 ==="
aws s3api get-public-access-block \
  --bucket shopeasy-frontend-${ACCOUNT_ID}
# 모든 값이 false여야 합니다

# 2. 버킷 정책 확인
echo ""
echo "=== 버킷 정책 ==="
aws s3api get-bucket-policy \
  --bucket shopeasy-frontend-${ACCOUNT_ID} \
  --output text | python3 -m json.tool
# Resource에 올바른 버킷 이름이 있는지 확인
# arn:aws:s3:::shopeasy-frontend-{ACCOUNT_ID}/*

# 3. 정적 웹사이트 호스팅 상태 확인
echo ""
echo "=== 정적 웹사이트 호스팅 설정 ==="
aws s3api get-bucket-website \
  --bucket shopeasy-frontend-${ACCOUNT_ID}
# IndexDocument와 ErrorDocument가 모두 index.html인지 확인

# 4. index.html 파일이 존재하는지 확인
echo ""
echo "=== 파일 존재 여부 ==="
aws s3 ls s3://shopeasy-frontend-${ACCOUNT_ID}/index.html

ACCOUNT_ID=$(aws sts get-caller-identity --query Account --output text)

# 현재 설정 확인
aws s3api get-bucket-website \
  --bucket shopeasy-frontend-${ACCOUNT_ID}

# 오류 문서를 index.html로 재설정
aws s3 website s3://shopeasy-frontend-${ACCOUNT_ID}/ \
  --index-document index.html \
  --error-document index.html

echo "오류 문서 설정 완료!"

# 빌드된 JS 파일에서 API URL 확인
grep -o 'http://[^"]*:5000' dist/assets/index-*.js

# 출력이 없거나 잘못된 IP가 나오면 다시 빌드해야 합니다

# 올바른 IP로 다시 빌드
VITE_API_URL=http://3.35.xxx.xxx:5000 npm run build

# 다시 S3에 업로드
ACCOUNT_ID=$(aws sts get-caller-identity --query Account --output text)
aws s3 sync dist/ s3://shopeasy-frontend-${ACCOUNT_ID}/ --delete

# EC2 보안 그룹 확인
aws ec2 describe-instances \
  --filters "Name=tag:Name,Values=ShopEasy*" \
  --query "Reservations[].Instances[].{ID:InstanceId,SG:SecurityGroups[].GroupId}" \
  --output table

# 보안 그룹에 포트 5000 인바운드 규칙 추가
# (SG_ID를 실제 보안 그룹 ID로 변경)
aws ec2 authorize-security-group-ingress \
  --group-id sg-xxxxxxxxx \
  --protocol tcp \
  --port 5000 \
  --cidr 0.0.0.0/0

echo "포트 5000 인바운드 규칙 추가 완료!"

# EC2에 SSH 접속 후

# API 서버 프로세스 확인
pm2 list
# 또는
ps aux | grep node

# 포트 5000에서 리스닝 중인지 확인
sudo ss -tlnp | grep 5000

# API 서버가 실행 중이 아니면 시작
cd ~/ecommerce-app/api-server
node src/index.js &
# 또는
pm2 start src/index.js --name shopeasy-api

# 현재 EC2에 연결된 IAM 역할 확인
TOKEN=$(curl -s -X PUT "http://169.254.169.254/latest/api/token" \
  -H "X-aws-ec2-metadata-token-ttl-seconds: 21600")
curl -s -H "X-aws-ec2-metadata-token: $TOKEN" \
  http://169.254.169.254/latest/meta-data/iam/info

# IAM 역할에 프론트엔드 버킷 권한 추가
# (IAM 콘솔에서 또는 CLI로)
ACCOUNT_ID=$(aws sts get-caller-identity --query Account --output text)

# 인라인 정책 추가 예시
cat > /tmp/frontend-deploy-policy.json <<EOF
{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Effect": "Allow",
      "Action": [
        "s3:PutObject",
        "s3:GetObject",
        "s3:DeleteObject",
        "s3:ListBucket"
      ],
      "Resource": [
        "arn:aws:s3:::shopeasy-frontend-${ACCOUNT_ID}",
        "arn:aws:s3:::shopeasy-frontend-${ACCOUNT_ID}/*"
      ]
    }
  ]
}
EOF

# 역할에 정책 추가 (역할 이름을 실제 값으로 변경)
aws iam put-role-policy \
  --role-name ShopEasy-EC2-Role \
  --policy-name ShopEasy-Frontend-Deploy \
  --policy-document file:///tmp/frontend-deploy-policy.json

echo "IAM 정책 추가 완료! (적용까지 몇 초 소요될 수 있습니다)"

ACCOUNT_ID=$(aws sts get-caller-identity --query Account --output text)

# 리뷰 이미지 버킷에 CORS 설정 추가
cat > /tmp/cors-config.json <<EOF
{
  "CORSRules": [
    {
      "AllowedHeaders": ["*"],
      "AllowedMethods": ["GET", "PUT", "POST"],
      "AllowedOrigins": [
        "http://shopeasy-frontend-${ACCOUNT_ID}.s3-website.ap-northeast-2.amazonaws.com"
      ],
      "ExposeHeaders": ["ETag"],
      "MaxAgeSeconds": 3600
    }
  ]
}
EOF

# 리뷰 이미지 버킷 이름으로 변경하세요
aws s3api put-bucket-cors \
  --bucket shopeasy-images-${ACCOUNT_ID} \
  --cors-configuration file:///tmp/cors-config.json

echo "CORS 설정 완료!"