[Devops] AWS S3, CloudFront를 활용한 정적 웹페이지 호스팅

AWS S3를 활용한 정적 웹페이지 호스팅

 AWS S3를 통한 정적 웹페이지 호스팅 : 맨 아래 페이지의 정적 웹 페이지 호스팅을 하기 위해 아래 그림에 보이는 페이지에 맨 아래의 '정적 웹 사이트 호스팅'란에서 '편집' 버튼을 누른다. 편집 페이지에서 정적 웹 페이지 호스팅을 클릭한 후 편집 내용을 저장한다.

 

 하지만, 여기서 끝내면 403 에러(권한 에러) 가 뜬다. 그래서 S3 버킷 페이지의 '권한' 란을 클릭한 후, '모든 엑세스 비활성화' 체크박스를 헤제시켜서 모든 곳에서 액세스가 가능하도록 해준다. 하지만 여전히 403 에러가 뜬다. 이유는 항목들에 대한 권한이 없기 때문이다. 그렇기에 '버킷 정책(Bucket Policy)'를 편집해준다.

 아래의 내용을 복붙해서 정책을 편집한다. (resource에 arn 주소 넣는 부분은 수정할 것)

{
	"Version": "2012-10-17",
	"Statement": [
		{
			"Sid": "PublicReadGetObject",
			"Effect": "Allow",
			"Principal": "*",
			"Action": "s3:GetObject",
			"Resource": "your arn address/*"
		}
	]
}

 이렇게 되면 마무리된다. 버킷에 있는 파일에 접근이 가능해진다.

 

CloudFront를 활용해서 정적 웹 페이지 가속화하기

AWS CloudFront는 콘텐츠 전송 네트워크(CDN) 역할을 하는 클라우드 서비스로, AWS CloudFront가 S3의 일종의 캐시 역할을 해주면서 매번 AWS S3에 접근하는 것을 막아주고 성능을 향상시켜준다.

 

CloudFront를 생성하다가 위의 사진과 같이 OAI를 사용할 건지 사용하지 않을 건지 묻는 부분이 있다. OAI 는 CloudFront가 S3에 접근해서 파일들을 가져올 수 있지만, 사용자가 직접 S3에 접근해서 데이터를 가져올 수 없게 만드는 것이다. 

 

즉, Amazon S3 버킷에서 제공하는 콘텐츠에 대한 액세스를 제한하기 위한 방법은 다음과 같다. 

1. 원본 액세스 ID(OAI)라는 특수 CloudFront 사용자를 만들어 배포와 연결합니다.
2. CloudFront에서 OAI를 사용하여 버킷의 파일을 액세스해 사용자에게 제공할 수 있도록 S3 버킷 권한을 구성합니다. 사용자가 S3 버킷에 대한 직접 URL을 사용하여 파일에 액세스할 수 없도록 해야 합니다.

CloudFront 를 생성할 때에도, "Default root Object" 란에서 S3 버킷을 생성할 때와 마찬가지로 default path를 지정해줘야 한다. 그렇게 생성을 마무리하고 난 뒤 S3로 접근할 때와 CloudFront와의 성능 차이를 확인해보겠다.

CloudFront

s3

예상과는 달리, 크롬에서 여러번 웹사이트를 방문하니 크롬 측에서 콘텐츠를(jpg, avi 등) cache에 담아둬서, memory cache가 발생해서 콘텐츠를 가져오는데 시간이 거의 걸리지 않았지만, 캐시가 발생하지 않았다면 CloudFront가 S3에 비해 빠르게 콘텐츠를 가져오는 것을 확인할 수 있다.

 

References

• https://docs.aws.amazon.com/ko_kr/AmazonCloudFront/latest/DeveloperGuide/private-content-restricting-access-to-s3.html