[섹션 1] 서버리스 정적 웹사이트 호스팅 및 성능 가속화

● 개요

: 서버 없이 구성 가능한 정적 웹 사이트를 호스팅하고, 콘텐츠 전송 네트워크(CDN) 서비스를 이용하여 웹 사이트의 성능 향상

 

 

● AWS 서비스

- Amazon S3 (Simple Storage Service)

- Amazon CloudFront

 

 

● 아키텍쳐 다이어그램

 

-> 웹 페이지 로딩 속도 테스트 및 비교하기 위해 Seoul 리전이 아닌, Virginia 리전 사용

 

ㄱ. S3: 클라우드 객체 스토리지, HTML, 그림, 동영상 저장

ㄴ. CDN(콘텐츠 전송 네트워크): 더 빠른 속도로 정적 및 동적 콘텐츠를 사용자에게 전송 가능하게 함

-> 캐싱 서버에 저장, 사용자와 가까운 캐싱 서버에서 사용자에게 웹 서비스 제공

 

 

● 구현 순서

 

ㄱ. S3 Bucket 생성 및 정적 웹사이트 호스팅

1) S3 Bucket 생성

2) Object(File, 웹 사이트) 업로드

- mycar.html

- car.jpg

3) 정적 웹 사이트 호스팅 기능 활성화

4) Bucket과 Object에 대한 액세스 정책 설정

5) 웹 브라우저에서 웹 사이트 작동 확인

 

ㄴ. CloudFront를 통한 웹사이트 성능 가속화

1) CloudFront Distribution 생성

- Origin, Cache behavior 등

2) 웹 브라우저에서 CloudFront Distribution 작동 확인

3) 웹 사이트 성능 테스트

- S3 정적 웹 사이트 호스팅을 통한 콘텐츠 로드 속도

- CloudFront를 통한 콘텐츠 로드 속도

 

 

● 구현

ㄱ. S3 Bucket 생성 및 정적 웹사이트 호스팅

1) S3 Bucket 생성

2) Object(File, 웹 사이트) 업로드

- mycar.html

- car.jpg

3) 정적 웹 사이트 호스팅 기능 활성화

lab-s3-web-hosting-june > 속성

 

-> 인덱스 문서 = 기본 페이지

-> 정적 웹 사이트 호스팅은 활성화 되었으나, 외부 인터넷을 통한 사용자에게 Bucker, Object에 접근할 수 있는 권한 아직 없기 때문

4) Bucket과 Object에 대한 액세스 정책 설정

a. lab-s3-web-hosting-june > 권한

b. 버킷 정책 편집 > 정책 생성기

Select Type of Policy: S3 Bucket Policy

Principal: *

Actions: Get Object

ARN: 버킷 ARN (붙여넣기)/*

> Add Statement > Generate Policy (복사)

 

5) 웹 브라우저에서 웹 사이트 작동 확인

http://lab-s3-web-hosting-june.s3-website-us-east-1.amazonaws.com (속성 > 정적 웹 사이트 호스팅)

 

ㄴ. CloudFront를 통한 웹사이트 성능 가속화

1) CloudFront Distribution 생성

- Origin, Cache behavior 등

2) 웹 브라우저에서 CloudFront Distribution 작동 확인

-> 배포 도메인 이름으로 웹 사이트 작동 확인

3) 웹 사이트 성능 테스트

< F12 > + 새로고침

- S3 정적 웹 사이트 호스팅을 통한 콘텐츠 로드 속도: 292ms

- CloudFront를 통한 콘텐츠 로드 속도: 105ms