[AWS] Cloudfront + S3 정적 웹사이트 배포

CloudFront란?
CloudFront는 아마존 웹 서비스(AWS)에서 제공하는 콘텐츠 전송 네트워크(CDN) 서비스다. 전 세계에 분산된 엣지 로케이션에 캐시하여 사용자들에게 더 빠르고 안정적인 서비스를 제공한다. 사용자는 더 가까운 엣지 로케이션에서 콘텐츠를 가져오게 되므로 응답 시간이 단축되고, 대용량 트래픽에도 대비할 수 있어 확장성이 향상된다.

 

S3란?
S3는 데이터를 저장하고 필요할 때 검색할 수 있는 확장 가능하고 내구성이 뛰어난 저장소다. 데이터는 버킷(bucket)이라는 개별적인 저장소 컨테이너에 저장되며, 각 객체는 고유한 키를 가진다. 또한, S3는 높은 내구성을 제공하여 데이터 손실이나 손상을 최소화할 수 있다는 장점이 있다.

1. 먼저 버킷을 생성해준다. 

• 모든 퍼블릭 엑세스 차단 설정

• 나머지는 기본설정을 해주고 버킷을 생성해준다.

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

• 버킷 > 속성 > 정적 웹사이트 호스트 편집순서로 이동하면 된다. 

기본페이지를 index.html파일로 설정해 준다. 

3. 부트스트랩 템플릿 다운후 업로드

• 부트스트랩에서 무료로 제공하는 예제 템플릿을 다운해준다. 
  https://startbootstrap.com/#google_vignette

• 다운받은 파일을 버킷에 업로드 시켜준다. 

• S3 호스팅 엔드포인트 주소로 접속해본다. 

• 접속되지 않는 것을 확인할 수 있다. 

퍼블릭 엑세스 요청을 막았기 때문에 Public에 공개된 URL를 통해 접근할 수 없다. 그래서 Cloudfront을 통해 버킷에 접근을 해야한다.

4. Cloudfront을 생성하여 S3와 연동

• 도메인을 버킷을 선택해주고 Cloudfront에 대한 엑세스만 제할 할수 있게 원본 엑세스 제어 설정을 체크하고 OAC를 하나만들어 준다. 

• Redirect HTTP to HTTPS를 선택해준다. 

현재 테스트만 진행할 것이기 떄문에 Origin Shield나 WAF는 사용하지 않도록 하겠다. 

• 기본값 루트 객체를 index.html으로 설정해준다. 

Cloudfront URL에서 S3 페이지를 가져오기위해선 Cloudfonrt URL/index.html을 통해 접속해야하는데 이 과정을 생략하고 바로 URL주소에서 페이지를 처리하기위해서 설정해준다. 

5. S3 버킷 정책 업데이트 진행

• 버킷정책을 복사해준다. 

• 버킷 > 권한 > 버킷정책 > 편집으로 복사해준 Json을 붙여준다. 

6. Cloudfront 도메인 주소 확인

사진 참조 https://techblog.woowahan.com/6217/