S3 정적 웹 호스팅과 CloudFront로 가속화하기

서버가 없어도 구성이 가능한 정적 웹 사이트를 만들고 웹 사이트 접근 속도를 높이기 위해 콘텐츠 전송 네트워크(CDN) 서비스를 연동하였다.

S3만으로도 버킷에 저장된 콘텐츠를 통해서 웹 호스팅이 가능하지만
웹 브라우저에서 일어야하는 콘텐츠의 크기가 커지면 로딩이 지연되는 문제가 발생할 수 있다.
이를 해결하기 위해서 CloudFront를 사용한다.

CloudFront는 콘텐츠를 빠르게 읽을 수 있게 캐싱 기능을 제공하며 S3 단독으로 구성된 웹 사이트보다 더욱더 가속화된 웹 서비스를 제공할 수 있다.

필요한 AWS 서비스

S3, CloudFront

아키텍처 다이어그램

아키텍처 구현 순서

1. S3 정적 웹 호스팅 구성하기
   1) S3 버킷 생성
   2) 정적 웹 사이트 호스팅 활성화, 외부에서 접근 가능하도록 정책 생성
   3) 웹 사이트 엔드포인트로 정상적으로 호스팅이 되는지 테스트

2. CloudFront 이용해서 웹사이트 속도 높이기
   1) CloudFront 배포 만들기
   2) 생성된 CloudFront 도메인 확인, 정상적으로 로딩 되는지 확인

---

S3로 정적 웹 사이트 호스팅

1. S3 버킷 생성

1. AWS console에 접속 후 S3를 검색하고 버킷 만들기를 누른다.
   버킷 이름은 중복이 불가능하며 리전은 서울 리전을 선택한다.
   

2. 퍼블릭 액세스는 s3로의 접근에 대한 보안기능이며 이를 해제해주는것은 보안에 매우 안좋지만 실습을 위해 차단을 해제한다. 나머지 설정을 기본으로 하고 버킷 만들기 버튼을 누른다.
   

3. 다음과 같이 버킷이 생성된 것을 알 수 있다.
   

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

1. 버킷이 생성되었으며 이제 정적 웹 사이트 호스팅 기능을 사용하기 위해 이를 활성화해야 한다.
   속성에 들어간다.
   
2. 편집 버튼을 누른다.
   
3. 정적 웹 사이트 호스팅을 활성화하고 인덱스 문서를 index.html로 설정하고 저장을 누른다.
   
4. 다음과 같이 정적 웹 사이트 호스팅이 활성화된 것을 알 수 있다.
   

3. 버킷 정책 생성

버킷 정책은 외부 인터넷에서 aws 내부로의 접근 차단 뿐만 아니라 버킷과 버킷 내의 콘텐츠에 대한 보안도 적용하는 정책이다. 이를 설정해야 외부에서 버킷 내의 콘텐츠에 접근이 가능하다.

1. 권한에 들어간다.
   
2. 버킷 정책의 편집 버튼을 클릭한다.
   
3. 버킷 ARN을 뒤에서 사용하므로 이를 복사하고 정책 생성기 버튼을 클릭한다.
   
4. 타입은 S3 Bucket Policy를 선택한다.
   principal은 모두를 뜻하는 *을 선택한다.
   action은 어떤 권한을 줄것인가를 의미하며 GetObject 권한을 선택한다.
   ARN은 아까 복사한 ARN을 입력해준다.
   그다음 Add Statement 버튼을 눌러준다.
   
5. 4번에서 설정한대로 정책이 생성된 것을 알 수 있다.
   Generate Policy 버튼을 눌러준다.
   
6. 다음과 같이 정책이 생성된 것을 알 수 있으며 이를 복사하고 Close 버튼을 눌러준다.
   
7. 에디터에 복사한 내용을 붙여넣기한다. 버킷 내의 콘텐츠들에 접근을 해야하기 때문에 Resource에 /*를 추가해준다. 앞에서 생성한 S3 버킷내의 모든 Object들을 의미한다.
   

---

파일 업로드 후 테스트

1. 파일 업로드

실습에 사용 할 정적 웹사이트를 S3에 업로드해준다.

2. 웹 사이트 엔드포인트로 정상적으로 호스팅이 되는지 테스트

업르드한 index.html 파일을 선택 후 객체 URL을 새 탭으로 열어본다.

설정이 잘 되었으며 다음과 같이 정상적으로 호스팅이 되는것을 알 수 있다.

---

CloudFront 설정

1. CloudFront 생성

1. AWS console에서 ClodFront를 검색하고 CloudFront 배포 생성 버튼을 클릭한다.
   
2. 원본 도메인은 앞에서 생성했던 S3 버킷으로 설정한다.
   
3. 나머지는 기본 설정으로 두고 가격 분류 설정을 해야한다.
   CloudFront를 통해 어느 지역에 캐싱 기능을 제공할지를 선택해야하며 3가지 선택지 중에 모든 지역을 선택하면 된다.
   다음과 같이 설정을 마무리하면 생성하기 버튼을 눌러준다.
   
4. 다음과 같이 활성화된 CloudFront가 생성된 것을 알 수 있다.
   도메인 네임이 주어진 것을 알 수 있는데 이 도메인 네임으로 S3에 캐싱되고 있는 콘텐츠를 받아오는지 링크 테스트를 진행한다.
   

2. 링크 테스트

1. index3.html 파일을 CloudFront로 읽어들이는 테스트를 진행한다.
   클라우드프론트 도메인이라고 적혀있는 부분에 생성한 CloudFront의 도메인 이름을 넣어주고 저장한다.
   
   

2. 저장한 index3.html 파일을 S3에 업로드한다.
   

3. 도메인 이름/index3.html 으로 접속해보면 다음과 같이 AWS logo를 볼 수 있다.
   
   index3.html의 코드를 다시보면 이미지 소스의 URL은 ClodFront의 도메인이다.
   즉 CloudFront가 캐싱한 AWS logo 이미지를 읽어들인 것이다.
   

4. 개발자 도구에서도 index3.html이 캐싱된 콘텐츠를 읽어들이고 있는지 확인할 수 있다.
   개발자 도구 - network에 들어간 후에 idnex3.html을 클릭해보면 다음과 같이
   X-Cache가 Hit from cloudfront로 되어 있는 것을 알 수 있다.