AWS 배포 - (2) S3, CloudFront

이보경·2024년 1월 6일

aws

AWS

목록 보기

4/4

이전 글에서 IAM을 이용해 AWS 리소스에 접근하기 위한 사용자를 생성하고 액세스 키를 발급받아 보았습니다.

다음은 S3를 통해 빌드 결과물인 정적 파일을 저장소에 업로드하여 배포하고,
이를 사용자에게 빠르게 콘텐츠 제공을 할 수 있도록 글로벌 CDN인 CloudFront에도 배포해보고자 합니다.

(각 AWS 서비스에 대한 설명은 이 글을 참고해주세요.)

S3

버킷 생성

버킷 만들기 클릭

ACL 활성화됨
버킷 소유자 선호

모든 퍼블릭 액세스 차단 체크 해제
아래 경고창 확인란 체크

퍼블릭 액세스를 차단할 경우, IAM에서 AWSAccessKeyId, AWSSecretKey를 발급받고 키를 이용해서 S3 객체에 접근할 수 있음
Amazon S3 퍼블릭 액세스 차단 설정을 켜거나 끄면 어떻게 되나요?

버킷 키 활성화
변경 사항 저장 클릭

버킷 정적 웹 사이트 호스팅 설정

버킷이름을 클릭해 상세 페이지로 넘어가서
[탭]-[속성] 클릭
가장 아래에 정적 웹 사이트 호스팅 우측 상단 편집 클릭

다음과 같이 설정

버킷 정책 설정

[탭]-[권한] 클릭
버킷 정책에 편집 클릭

우측 상단의 정책 생성기로 적절하게 설정하면 되는데
찾아보니 주로 아래와 같은 정책을 사용하길래 Get요청만 허용하여 적용하였다.
{
	"Version": "2012-10-17",
	"Statement": [
		{
			"Sid": "PublicRead",
			"Effect": "Allow",
			"Principal": "*",
			"Action": [
				"s3:GetObject",
			],
			"Resource": "arn:aws:s3:::bucket이름/*"
		}
	]
}

이렇게 하면 버킷 생성 및 설정이 끝난다.
생성한 버킷에 빌드한 파일을 업로드해보자

버킷 업로드

[탭]-[객체]
업로드 버튼 클릭

npm run build 후 /build 폴더에 있는 모든 파일들을 드래그해서 업로드
최초 1회만 직접 업로드하고, 이후부터는 github actions를 통해 배포 자동화

지금처럼 파일을 재업로드하거나 cli로 직접 배포하는 방법도 있음

배포 자동화를 하기 전에, 글로벌 CDN에 우리 웹사이트를 올려서 사용자가 더 빠른 웹콘텐츠를 제공받을 수 있도록 해보자

CloudFront

각 설정에 대한 자세한 설명은 이 블로그 글을 참고해주세요

배포 생성

CloudFront 배포 생성 클릭

원본 도메인에 S3 버킷 이름 선택
뷰어 프로토콜 정책은 Redirect HTTP to HTTPS로 설정
허용된 HTTP 방법은 GET, HEAD로 설정
(정적 리소스를 배포할 것이기 때문에 다른 HTTP Method를 허용하지 않아도 됨)

기본값 루트 객체에 index.html 입력
커스텀 도메인을 설정하려면 (선택사항)
1. 대체 도메인 이름에 추가
2. SSL 인증서를 요청해서 HTTPS로 올바르게 접속될 수 있게 설정 필요. 인증서 요청 링크를 눌러 안내에 따라 도메인에 맞는 인증서를 생성하고 선택

배포 생성 클릭