AWS

[AWS] AWS S3 + CloudFront로 SPA 배포

seominki 2025. 4. 25. 10:24

SPA(Single Page Application)는 빌드 후 정적 파일 형태이기 때문에 별도에 서버의 로직 없이 파일만 서빙하면 됨으로 정적 파일은 S3에 올리고 CloudFront를 통해 CDN을 통해 콘텐츠를 빠르고 안정적으로 전송한다.

CDN이란(Content Delivery Network)
콘텐츠를 전세계 여러 서버에 복제해놓고 사용자에게 더 빠르게 전달해주는 네트워크 시스템.

S3 버킷 생성

  1. S3 버킷 생성
  2. 퍼블릭 엑세스 차단 설정
  3. 빌드 결과물 업로드

CloudFront

  1. AWS console CloudFront -> 배포 -> 배포 생성
  2. 원본 -> 생성한 S3 버킷 선택 (만약 S3안에 폴더링이 되어 있을 경우 Origin path에 해당 폴더명 작성 ex) /admin )
  3. 원본 엑세스 -> 원본 엑세스 제어 설정 (S3 버킷이 비공개로 유지되면서 CloudFront가 S3 버킷의 파일을 안전하게 가져올 수 있는 권한)
  4. 기본 캐시 동작 -> HTTP, HTTPS 정책 설정
  5. 웹 어플리케이션 방화벽 활성화
  6. Custom SSL certificate를 연결을 통해 별도의 도메인 연결 (ACM에 인증성 등록 *반드시 인증서는 us-east-1에 등록
  7. 기본값 루드 객체는 /index.html (SPA는 대부분 index.html이 진입점)
  8. 배포 생성

이렇게 생성하게 되면 상단에 S3 버킷 정책을 업데이트 해야한다고 뜨는데 정책복사를 하여 S3로 돌아가 해당 버킷의 권한 -> 버킷 정책 편집 -> 복사한 json 붙여넣기

 

생성된 CloudFront 도메인 또는 대체 도메인으로 접속 후 정상적으로 화면이 보이는지 확인하면 완료