[AWS] S3 + CloudFront : 정적 웹사이트 배포하기

개요

프론트엔드 vue.js 배포를 위해 S3 + CloudFront를 사용하기로 했다.

https://aws.amazon.com/ko/blogs/korea/amazon-s3-amazon-cloudfront-a-match-made-in-the-cloud/?utm_source=chatgpt.com

 

Vue.js로 개발했기 때문에 정적 웹페이지 호스팅을 지원하는 S3를 사용하고,

CDN 서비스를 통해 빠르고, 보안을 강화하기 위해서 CloudFront를 같이 쓰기로 했다

---

방법

정적 파일을 s3 버킷에 업로드하고, CloudFront로 배포

• 버킷 생성하기

S3로 접근하지 않고, CloudFront를 통해 접근할 것이기 때문에 모든 액세스 차단하기 

 

• vue 빌드하기

npm run serve

 

• dist 폴더 안에 파일 모두 업로드

 

• CloudFront 배포 생성하기 

 

• 생성한 S3 버킷 선택

 

• enable origin shield : CloudFront의 캐싱 계층에서 오리진에 이르는 모든 요청이 Origin Shield를 통과하여 캐시 적중 가능성을 높임 

공식 문서

 

• Redirect Http to Https : http로 접속 시 https로 접속하게 해준다

 

• 기본값 루트 객체 : index.html

 

배포 생성 후, 정책 복사

s3 이동 -> 권한 -> 정책에 붙여넣기 

 

cloudfront 이동 -> 배포 도메인으로 이동하면 접속 완료

---

참고

S3+Cloudfront를 활용한 정적 웹 배포