AWS - S3, CloudFront, Route53을 이용한 정적 호스팅

내가 만든 웹을 다른 사람들이 볼 수 있도록 하려면 배포과정이 필요하다.

AWS는 S3라는 저장소를 제공하는데 저렴한 비용으로 정적 호스팅을 할 수 있다는 장점이 있다.

하지만 S3에서 기본적으로 제공하는 URL은 HTTPS와 도메인 설정이 불가능하다.

따라서 CloudeFront와 Route53을 이용해 해당 문제를 해결해야 한다.

CloudFront는 S3에서 제공하지 않는 HTTPS 배포를 가능하게 만들어 준다.

뿐만 아니라 전 세계에 있는 엣지 포인트를 이용해 캐싱처리를 하여 사용자가 가장 가까운 지역의 엣지 포인트로 접속하게 하여

더 빠른 속도를 제공하고 S3보다 저렴한 비용을 지불하도록 도와준다.

Route53은 사용자가 소유한 도메인을 연결해주는 DNS서비스 역할을 한다.

도메인 만들기

우선 무료로 도메인을 만들어 보자.

https://www.freenom.com/ 에 접속한다.

회원가입 후 로그인을 한 후 Servieces 탭의 Register a New Domain을 선택한다.

원하는 도메인을 선택 후 checkout을 눌러 구매 후

active 상태가되면 사용이 가능해진다.

S3에 프로젝트 업로드 하기

AWS S3 서비스에 접속해서 버킷 만들기 선택

버킷 이름을 작성하고 다음

기본 암호화에 체크한 후 다음

모든 퍼블릭 액세스 차단의 체크를 풀고 다음으로 넘어가서 버킷 만들기를 마무리한다.

버킷 속성에서 정적 웹사이트 호스팅을 누르고 인덱스 문서와 오류 문서에 index.html을 작성 후 저장한다.

여기서 생성된 엔드포인트 주소로도 업로드할 프로젝트에 접근할 수 있게 된다.

앞서 버킷을 퍼블릭으로 설정은 했지만 아직 어떠한 기능을 공개할지 정하지 않았기 때문에 그에 필요한 정책을 만들어야 한다.

권한 탭을 누르고 버킷 정책에서 정책 생성기를 클릭

Select Type of Policy에서 S3 Bucket Policy를 선택

Principal에는 적당히 규칙명을 적어주고 Actions에서 Get Object를 선택

Amazon Resource Name (ARN)에는 arn:aws:s3:::<bucket_name>/<key_name> 형식의 문자열을 만든다.
이 글에선 arn:aws:s3:::studyfe.ml/*으로 작성 했다.
그 후 Add Statement와 Generate Policy를 눌러 정책을 만든다.

생성된 정책을 버킷에 붙여넣고 저장

개요 탭을 누르고 업로드를 클릭하여 프로젝트를 업로드 한다.

CloudFront 설정

S3에서 제공해주는 엔드포인트로도 앱을 배포할 수 있지만 CloudFront를 사용하는 이유는 다음과 같다.

• HTTPS 배포
• 전세계 엣지 로케이션을 이용한 더 빠른 속도
• S3 직접 공유보다 저렴한 비용

S3에서 제공하는 주소는 HTTP로 보안에 취약하다. CloudFront는 이를 쉽게 HTTPS로 배포할 수 있게 도와준다.

S3를 이용해 직접 배포할 경우 S3 버킷을 설정한 지역의 저장소로 전세계 사용자가 요청을 보낸다. 따라서 먼 지역의 유저일 수록 속도가 느려질 것이다. 하지만 CloudFront를 사용한다면 전세계 엣지 로케이션에서 캐싱을 해두고 유저가 가까운 엣지에 요청을 보내도록 한다. 따라서 S3보다 속도가 더 빠르다.

또한 CloudFront의 요금이 S3 요금보다 저렴하기 때문에 비용절감 효과가 있다.

CloudFront 서비스로 들어가 Create Distribution을 선택한 후 Get Started를 누른다.

Origin Domain Name에 방금 만든 버킷의 정적 웹사이트 호스팅 주소를 적는다.

Viewer Protocol Policy은 Redirect HTTP to HTTPS로 설정하고

Default Root Object에는 index.html을 작성한 후 Create Distribution을 누른다.

----REACT 프로젝트일 경우 react-router-dom을 사용한다면 다음과 같은 설정이 필요하다----

방금 생성한 Distribution을 선택 후 Distribution Settings를 누른다.

Error Pages에서 Create Custom Response를 선택

HTTP Error Code를 404: Not Found로

Error Caching Minimum TTL을 5로

Customize Error Response를 Yes로

Response Page Path를 /index.html으로

HTTP Response Code를 200 OK로 설정하고 Create를 누른다.

같은 일을 403 Error Code로도 반복한다.

Route53 설정

Route53은 AWS에서 제공하는 DNS 서비스다.

Route53에 접속 후 호스팅 영역 생성을 눌러준다.

설정한 도메인 주소를 입력 후 퍼블릭 호스팅을 선택하고 생성한다.

이제 여기서 생성된 네임 서버 리스트를 도메인에 등록하자.

도메인을 발급한 freenom에 접속하여

Services -> My Domains를 선택 후 Manage Domain을 눌러준다.

Management Tools -> Nameservers를 선택

Use custom nameservers를 누르고 위에서 발급받은 Nameserver를 적은 후 Change Nameservers를 선택

다시 Route53으로 돌아와서 레코드 생성을 누른다.

단순 라우팅을 선택 후 단순 레코드 정의를 누른다.

레코드 정의를 작성한다.

.studyfe.ml로 돼있는 앞 부분에 작성하면 해당 주소로 접속할 수 있다.

예를들어 www를 작성한다면 www.studyfe.ml로 접속할 수 있다.

후에 밑에 설정은

CloudFront 배포에 대한 별칭

버킷을 설정한 리즌

CloudFront의 해당 주소로 설정 후 단순 레코드 정의를 눌러 생성한다.

(CloudFront의 도메인 주소는 CloudFront 서비스로 접속해서 확인할 수 있다)

여기서는 www가 붙은 주소와 그렇지 않은 주소 모두 사용할 수 있도록 레코드 정의를 두 번 해보겠다.

CloudFront의 해당 주소를 선택할 수 있을 때까지 시간이 걸릴 수 있다.

작업이 완료되면 다음과 같은 상태가 된다.

레코드 생성을 누른다.

여기까지 완료했다면 해당 도메인으로 접속이 가능하다.
(만약 접속이 불가하더라도 나머지 과정을 쭉 진행하자)

다만 SSL인증서 발급이 끝나지 않았기 때문에 HTTPS로 정상 작동하지는 않는다.

AWS Certification

HTTPS에는 SSL이라는 인증서가 필요하다. 이는 AWS에서 무료로 제공하고 있다.

AWS Certification에 접속 후

(인증서 발급은 반드시 미국 동부지역을 선택해야 한다!)

리즌 선택을 완료한 후 인증서 요청을 누른다.

공인 인증서 요청을 선택 후 인증서 요청을 누르고 도메인 이름을 적어준다.

도메인 이름이 여러개인 경우 이 인증서에 다른 이름 추가를 눌러 추가할 수 있다.

DNS 검증을 선택후 계속 다음으로 진행

요청을 한 후 도메인 주소를 눌러 Route 53에서 레코드 생성을 누른다.

이 작업은 신청한 도메인마다 진행해줘야 한다.

계속 버튼을 눌러 심사가 완료될 때까지 기다려야 한다.

검증시간은 주소마다 다를 수 있다.

발급이 완료되면 다음 단계를 진행해보자.

CloudFront로 돌아가

Distribution Settings를 선택

Edit 버튼을 선택

Alternate Domain Names에 인증서 발급시 등록한 도메인 주소들을 써준다.

그 후 Custom SSl Certificate를 선택한다.
(인증서 발급이 끝난 후 여기서 선택할 수 있게 되는데 시간이 걸릴 수 있다)

제일 아래로 내려가 Yes Edit을 누르고 기다리면 홈페이지에 정상적으로 인증서가 적용된 모습을 볼 수 있다.