[AWS] AWS S3 / CloudFront 를 이용해서 정적 웹서비스 배포하기

AWS S3 / CloudFront 를 이용해서 정적 웹서비스 배포하기

 

S3는 무엇인가?

- 파일 저장서비스
하지만 추가적인 기능들이 있다. 그 중하나가 정적 웹사이트 호스팅 기능이다. 웹 서비스를 다른 사용자들도 쓸 수 있게 인터넷에 배포하는 것

CloudFront는 무엇인가?

- 컨텐츠(파일, 동영상등)를 빠르게 전송하게 해주는 서비스

컨텐츠(파일, 동영상)는 S3에 저장된다. 하지만 실제 S3 저장소의 위치에 따라 위치가 먼 사용자가 이용한다면 이를 전송받는데 시간이 오래걸린다.

이런 문제를 해결하고자 전 세계 곳곳에 컨테츠(파일, 동영상)의 복사본을 저장해놓을 수 있는 임시 저장소를 구축한다. 그러면 한국 S3저장소에 컨텐츠를 업로드해 놓고 미국 사용자가 컨텐츠를 다운로드한다면 미국 S3 저장소에서 가져오기때문에 속도가 훨씬 빨라진다.

 

이런 서비스들을 CDN(Content Delivery Network)라고 부른다. 그래서 Cloud Front를 CDN서비스라고도 부른다.

 

CloudFront를 사용하는 이유

1. 컨텐츠를 전송 받는 성능을 향상시키기위해서 사용
2. HTTPS 적용(S3는 이런 기능이 없다.)
3. 보안 강화.

 

이러한 이유들로 인해 S3와 CloudFront를 같이 써서 웹서비스를 배포한다.
실제로 현업에서 웹서비스 배포시 S3,CloudFront를 활용한다
웹서비스 배포시 AWS 이외에도 Netflfy, Vercel, Cloudflare와 같은 외부 서비스를 사용하기도 한다

 

S3와 CloudFront를 적용해서 웹사이트 배포하기

 

 

사용자들은 S3를 통해 직접 컨텐츠 를 받지 않고 CloudFront를 거쳐서 받는다.

사용자가 CloudFront에 컨텐츠를 달라는 요청을 보내면 컨텐츠가 임시 저장소인 CloudFront에 있다면 바로주고, 없다면 S3에서 바다서 준다.

 

 

 

 

준비사항

1. 버킷 세팅

1-1) 버킷 생성

S3 버킷생성 - 퍼블릭 액세스 차단 해제 - 생성

모든 사용자들이 S3내 컨텐츠를 받아갈 수 있도록 하기위해서 퍼블릭 액세스 차단을 해제한다.

하지만 이것만으론 사용자들이 컨텐츠를 받아갈 수 없다.

 

 

1-2) 버킷 세팅

생성한S3 - 권한 - 정책 편집 - 리소스추가 - S3, GetObject권한, 리소스추가 - 리소스유형, 리소스 ARN지정

Principal: "*" 입력(주체)
리소스 유형: object 입력
리소스 ARN: arn:aws:s3:::[버킷명]/* 입력

 

정책

{
	"Version": "2012-10-17",
	"Statement": [
		{
			"Sid": "Statement1",
			"Principal": "*",
			"Effect": "Allow",
			"Action": [
				"s3:GetObject"
			],
			"Resource": [
				"arn:aws:s3:::docker-cicd-practice/*"
			]
		}
	]
}

 

 

 

1-3)  백엔드서버가 S3에 접근하기 위한 권한받기(IAM 사용자, 액세스키)

 

사용자 생성

IAM 사용자 생성 - S3fullAccess 권한 - 생성

백엔드 서버가 사용할 사용자 액세스키 발급

보안자격증명 - 액세스키만들기 - 외부 어플리케이션 - 액세스키 저장

 

 

 

(준비사항 끝)

 

 

 

S3, CloudFront를 적용한 정적 웹사이트 배포

 

1. S3 정적 웹사이트 배포 

index.html S3에 업로드

버킷 - 속성 - 정적 웹사이트 호스팅 활성화 - index.html 지정

 

2. CloudFront 적용

AWS CloudFront 배포생성 - 원본 도메인(S3설정), 웹사이트 엔드포인트 사용, Redirect HTTP to HTTPS적용,
보안보호 비활성화, 가격분류(배포할 CDN위치 선택, 아시아 사용), 기본값 루트객체(index.html) - 배포생성

 

사용자들은 이제 S3를 직접 이용하지않고, CloudFront를 거쳐서 S3로부터 정적 컨텐츠를 받게된다. 따라서 S3의 uri주소가 아닌 CloudFront의 uri주소가 필요하다.