EC2 → S3 + CloudFront + HTTPS 정적 웹사이트 배포 전환

기존에 정적파일을 배포하는데 EC2 를 사용했다.

해당 방법보다 S3 + CloudFront + ACM 을 활용하는 방법이 비용 절감이 가능하며 캐싱기능을 통해 더 빠른 응답이 가능하기 때문에, 해당 방법으로 바꾸려고 한다.

 

전체 흐름 요약

1. S3 버킷 생성 및 파일 업로드 → 정적 파일 업로드
2. CloudFront 생성 → OAC 설정 + CNAME + SSL 인증(SSL 인증을 위한 가비아 DNS 설정)
3. S3 정책 설정
4. 가비아 DNS 설정
5. CloudFront 오류 페이지 설정 → 403/404 처리

 

1. S3 버킷 생성 및 Build 파일 업로드

S3 버킷 생성

이때 S3 의 퍼블릭 액세스 차단 설정은 풀지 않은 상태로 버킷을 만든다 (추후 OAC 를 통해 CloudFront 에서만 S3 객체에 접근하기 위함이다.)

해당 단계에서는 버킷 이름을 작성하는것 외엔 따로 설정할것 없이 버킷을 만든다.

---

 

버킷에 build 파일 업로드

 

 

2. CloudFront 생성

우리의 목표는 CloudFront 를 활용하여 우리가 원하는 도메인을 통해 정적 파일에 접근하는 것이며, 이때 통신은 HTTPS 를 통해 하길 원한다.

 

CloudFront 생성

Origin domain -> 우리가 원하는 버킷(방금 생성하고 build 파일을올린)을 골라준다.

---

 

OAC 생성

원본 액세스 -> OAC 설정을 하기위해 원본 액세스 탭에서 원본 액세스 제어 설정(권장) 을 클릭한후 Create New OAC 를 통해 새로운 OAC 를 생성해준다.

 

OAC 생성후 아래로 내려와 설정 탭에서 다음과 같은 설정을 해준다.

CNAME 탭에 우리의 도메인 을 포함한 설정하고 싶은 도메인을 추가한다.

ex) 내 도메인이 test.com 이라면 아래와 같이 사용할 도메인 및 서브 도메인을 추가해준다.

---

 

SSL 인증서 발급

아직 인증서를 생성한게 없으니 인증서 선택에는 아무런 인증서가 뜨지 않는다. 따라서 인증서 요청 버튼을 통해 우리가 원하는 도메인 및 서브 도메인에 대한 SSL 인증서를 받아준다.

도메인 이름에 위에서 설정한 CNAME 과 동일한 도메인을 추가해준다.

그후 요청을 누르면 도메인 탭에 우리가 추가해준 도메인들과 각각에 해당하는 CNAME 이름 CNAME 값 이 떠잇는걸 확인할수있다.

---

 

가비아 DNS 설정 (SSL 인증을 위한)

경로 : My 가비아 → 도메인 → DNS 관리 툴 → (원하는 도메인 오른쪽의 "관리")

우린 가비아 에서 도메인을 구입했기 때문에 해당 사이트에 들어가 도메인의 DNS 관리 툴을 사용하여 인증서 발급이 원활하게 해주면 된다.

 

가비아에서 CNAME 레코드를 추가하려면 다음과 같은 경로로 이동한다:

여기서 CNAME 레코드를 2개 추가해야 한다. 하나는 test.com용, 다른 하나는 www.test.com용이다.

 

만약 AWS에서 아래처럼 값을 받았다면:

도메인	CNAME 이름 (호스트)	CNAME 값
test.com	_abcde123.test.com	_xyz.acm-validations.aws.
www.test.com	_abcde123.www.test.com	_uvw.acm-validations.aws.

 

→ 가비아에서는 이렇게 입력하면 된다:

타입	호스트	값
CNAME	_abcde123	_xyz.acm-validations.aws.
CNAME	_abcde123.www	_uvw.acm-validations.aws.

가비아에서 해당 세팅 완료시 AWS 에서 검증 대기 중 이였던 상태가 모두 성공 으로 바뀔것이다.

CloudFront 배포 페이지로 돌아가 Refresh 버튼을 눌러 인증서를 새로고침하면 우리가 생성한 SSL 인증서가 보일것이다.

해당 SSL 인증서를 설정해주면 우리가 지정한 도메인에 대한 SSL 인증서가 적용 완료된다.

---

기본값 루트 객체 에 index.html을 기본 루트 객체로 지정해 CloudFront 설정을 마무리한다.

 

 

3. S3 정책 설정

CloudFront 생성을 완료했다면, 아래와같이 생성된 페이지로 이동하면서 상단에 S3에 정책을 추가해달라는 문구가 뜰것이다.

경로 : 정책을 업데이트하려면 S3 버킷 권한으로 이동합니다. 를 클릭하여 정책 설정 페이지로 이동 해주면 된다.

 

S3 버킷에서 권한 탭을 눌러 버킷 정책 탭에 편집을 통해 복사한 정책을 붙여넣어 준다.

해당 정책을 붙여넣기 해줌으로서 우리가 생성한 CloudFront 에서 S3 버킷의 접근이 가능해진다.

{
    "Version": "2008-10-17",
    "Id": "PolicyForCloudFrontPrivateContent",
    "Statement": [
        {
            "Sid": "AllowCloudFrontServicePrincipal",
            "Effect": "Allow",
            "Principal": {
                "Service": "cloudfront.amazonaws.com"
            },
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::버킷이름/*",
            "Condition": {
                "StringEquals": {
                    "AWS:SourceArn": "CloudFront의 ARN"
                }
            }
        }
    ]
}

정책 연결후엔 우리가 배포한 CloudFront 의 도메인 이름을 통해 해당 정적 파일 에 접근이 가능해진다.

 

 

4. 가비아 DNS 설정(CNAME 레코드 추가)

경로 : My 가비아 → 도메인 → DNS 관리 툴 → (원하는 도메인 오른쪽의 "관리")

이젠 우리가 원하는 S3 + CloudFront + https 설정을 완료했다.

최종적으론 test.com 또는 www.test.com 으로 접속시 우리가 cloudFront 를 통해 배포한 정적 파일이 보이면 된다.

가비아를 사용한다하면, 가비아의 DNS 설정에 들어가 CNAME 레코드를 생성해주면 된다.

이때 cloudFront 도메인이 https://cloudFront.net 처럼 되어있다면

cloudFront.net. 처럼 변경한후 추가해주면 된다.

 

이렇게하면 우리가 목표했던 S3 에 올린 정적인 파일을 CloudFront 를 통해 원하는 도메인을 통해 접근가능하도록 배포하며, 이때 통신은 Https 를 통해 가능하게 만들수있다.

 

 

5. CloudFront 오류 페이지 설정 (403/404 처리)

경로 : CloudFront -> 오류페이지

추가적으로 내 정적인 파일에선 새로고침시 403 에러가 떳다 따라서 CloudFront 의 오류페이지에 404, 403 예외에 대한 응답을 추가해줬다.

 

추후 EC2 를 사용했을때보다 CloudFront 를 사용함으로서 얼마만큼의 비용절감이 되었는지 정리하겠다.