[AWS-참고] S3 & CloudFront & Route 53을 활용한 정적 웹 호스팅 하기

 

## S3(Simple Storage Service)

S3(Simple Storage Service)는 인터넷용 스토리지 서비스 즉, 파일 서버의 역할을 하는 서비스이며 버킷(Bucket)과 Key로 구성되어있다.

• 버킷(Bucket) : S3에 저장된 객체(= 파일)에 대한 컨테이너(= 최상위 디렉토리)이며, 모든 객체는 반드시 어떤 버킷에 포함이 되어야한다.
• 키(Key) : 버킷 내 객체의 고유한 식별자로 버킷 내 모든 객체는 정확히 하나의 키를 갖는다.

 

 

## CloudFront

html, css, js 및 이미지 파일과 같은 정적 및 동적 웹 콘텐츠를 사용자에게 더 빨리 배포하도록 지원하는 CDN(Content Delivery Network) 서비스이다.

엣지 로케이션(=캐시 서버)이라고 하는 데이터 센터의 전 세계 네트워크를 통해 콘텐츠를 제공한다.

1. 사용자가 원하는 파일(HTML, 이미지 파일등)을 요청한 경우 DNS가 요청을 최적으로 서비스(= 가장 가까운)할 수 있는 엣지로케이션으로 요청을 보낸다
2. 엣지 로케이션에서 원하는 파일이 있는지 확인하고, 파일이 캐시에 있으면 사용자에게 바로 반환하고, 파일이 없는 경우에는 에지 로케이션이 원본 파일이 있는 오리진 서버에 접속하여 파일을 가져온다

 

 

 

## S3 버킷 생성 및 HTML 템플릿 파일 업로드

AWS 콘솔 로그인 후, S3 서비스에 접속하고 '버킷 만들기'를 선택한다.

 

* 버킷 이름을 호스팅 작업을 위해 갖고있는 도메인 주소로 작성해야한다.

작성자의 경우, Freenom이라는 무료 도메인 제공 사이트를 이용하여 도메인 주소를 발급 받았다.

하단 속성을 건드리지않고 버킷 만들기를 진행한다.

 

 

정상적으로 진행이 되었다면 아래와 같은 버킷 목록이 새로 생성된 것을 확인할 수 있으며 해당 링크로 접속한다.

 

 

우측 '업로드' 버튼을 클릭하면 다음과 같은 목록이 나오는데 보유중인 HTML 템플릿 파일들(.html, .js, .css, 이미지 파일 등)을 끌어와서 업로드하거나 추가 버튼을 클릭하여 업로드한다.

 

이번에도 하단 속성은 건드리지 않은 채로 '업로드' 버튼을 클릭하여 업로드를 진행한다

업로드가 정상적으로 진행되었다면 위와 같이 업로드 성공 상태가 뜨는 것을 확인할 수 있다.

 

 

 

 

## CloudFront 설정

CloudFront 서비스로 접속하여 'Create Distribution' 버튼 선택 후 접속되는 페이지에서 'Get Started'를 클릭한다.

 

아래와 같은 속성 입력 페이지에서 'Origin Domain Name'을 방금 만든 S3 버킷의 주소를 선택하고

'Restrict Bucket Access'를 'Yes' 선택

'Origin Access Identity'를 'Create a New Identity' 선택

'Grant Read Permission on Bucket'을 'Yes, Update Bucket Policy' 선택

'Viewer Protocol Policy'을 'Redirection HTTP to HTTPS'

'Default Root Object'에는 메인 HTML 파일을 입력한다.

다른 속성은 기본으로 두고 Create Distribution 버튼을 클릭한다.

 

• Restrict Bucket Access : Origin Domain Name을 S3 버킷으로 선택한 경우 노출되며 'YES' 설정 시, 사용자가 S3 Endpoint에 직접 접근이 불가능하며, CloudFront에서 제공하는 URL만 접근 가능하게 하는 설정이다.
  
  
• Origin Access Identity : 위 'Restrict Bucket Access' 설정에서 참고할 원본 액세스 ID를 선택하는 설정이다. Create a New Identity를 선택할 시 새로운 원본 액세스 ID를 만들게 된다.
  
  
• Grant Read Permissions On Bucket : CloudFront에서 S3 버킷에 접근하기 위해 Read 권한을 부여하는 설정이다. 'Yes, Update...'를 선택 시 자동으로 읽기 권한을 해당 S3 버킷에 부여한다.
  
  
• Viewer Protocol Policy : 사용자가 CloudFront 콘텐츠를 액세스할 때의 프로토콜 설정
  
  
• Default Root Object : CloudFront 배포 도메인의 Root URL로 요청할 때 CloudFront에서 Origin으로부터 요청할 객체를 설정한다.

 

 

 

정상적으로 생성이 되었다면 다음과 같은 CloudFront 목록이 새로 생성되어있고 'Status'가 'In Progress'인 것을 확인할 수 있다.
Status 항목이 'Deployed'가 되었다면 해당 목록의 링크를 클릭하여 다음과 같은 설정 페이지로 진입한다.

 

 

Error Pages > 'Create Custom Error Response'를 클릭하면 다음과 같은 페이지가 뜨는 것을 확인할 수 있다

 

해당 설정은 에러 코드가 반환될 시 응답 페이지를 설정하는 곳이다.
다음과 같은 설정을 입력하고 저장한다.

속성 이름	속성 값
HTTP Error Code	403:Forbidden
Error Caching Minimum TTL	5
Customize Error Response	Yes
Response Page Path	커스텀 에러 페이지
HTTP Response Code	200:OK

생성된 목록의 'Domain Name' 속성 값으로 웹페이지 접근을 시도하면 https 프로토콜이 적용되지 않은 상태로
페이지가 제공되는 것을 확인할 수 있다.

 

 

 

 

 

 

## Route 53 등록

'호스팅 영역' 페이지에서 '호스팅 영역 생성'을 클릭하여 접속되는 아래 설정 입력 페이지에서
'도메인 이름'에 소유하고 있는 도메인 이름을 입력하고 '호스팅 영역 생성' 버튼을 클릭한다.

 

 

그럼 아래와 같은 레코드 값이 생성되는 것을 확인할 수 있는데,
NS 레코드의 값들을 본인이 소유중인 도메인 서버의 레코드 관리 페이지에 입력한다.

 

 

 

 

 

## SSL 인증서 요청

Https 프로토콜을 사용하기 위해선 SSL 인증서가 필요하며 AWS에서는 'Certificate Manager' 서비스로 SSL 인증서를 요청할 수 있다.

'Certificate Manager' > 인증서 요청을 선택하면 아래와 같은 요청 페이지로 접속되며 '공인 인증서 요청'을 선택 후 '인증서 요청' 버튼을 클릭하여 인증서 요청 단계 페이지로 접근한다.

 

도메인 이름 입력창에 소유중인 도메인 주소를 입력한다.

 

'DNS 검증'을 선택하고 '다음' 버튼 클릭

 

값 입력 없이 '검토' 버튼을 클릭한다.

 

'확인 및 요청' 클릭

 

 

다음과 같은 CNAME 레코드가 생성되는 것을 볼 수 있으며
'Route 53에서 레코드 생성' 버튼을 클릭하여 해당 레코드를 Route 53에서 생성한다.

 

 

잠시 후 검증 상태가 '발급 완료'로 바뀔 것이다.
그리고 Route 53의 레코드 목록에 방금 생성한 CNAME 레코드가 생성된 것을 확인할 수 있다.

 

 

 

 

 

## Route 53 - CloudFront 연결

 

네임서버를 연결한 Route 53과 CloudFront를 연결하기 위해 CloudFront 설정 페이지로 접속한다.

Edit 버튼을 클릭하여 'Edit Distribution' 페이지의 'Alternate Domain Names' 입력 창에

소유중인 도메인 이름을 입력하고, 'SSL Certificate' 속성에서 'Custom SSL Certificate (example.com)' 항목을 선택하고 하단 입력 창에 위의 'SSL 인증서 요청'에서 생성한 SSL 인증서를 선택하고, 'Yes,Edit' 버튼을 클릭한다.

 

Status 항목이 'Deployed'가 되었다면 'Route 53'에서 해당 도메인의 레코드 목록 페이지로 이동 후 '레코드 생성' 버튼을 클릭하여 다음과 같은 '라우팅 정책 선택' 페이지로 이동한다.

'단순 라우팅'을 선택하고 '다음' 버튼을 클릭하여 '레코드 구성' 페이지로 접속한다.

 

 

'단순 레코드 정의'를 클릭하여 다음과 같이 '레코드 유형'을 'A - IPv4 주소...'로 선택하고,

값/트래픽 라우팅 대상은 'CloudFront 배포에 대한 별칭'을 선택하면 하단 리전 및 주소는 해당 CloudFront의 정보가 자동으로 파싱되므로 값을 선택하고 '단순 레코드 정의' > '레코드 생성'을 클릭하자.

CloudFront에 대한 A 레코드가 생성된 것을 확인 후 해당 도메인으로 접근하면 https 프로토콜이 적용된 웹 페이지가 호스팅된 것을 확인할 수 있다.

 

 

 

 

 

출처 : 

https://gooners0304.tistory.com/m/entry/AWS-S3-CloudFront-Route-53%EC%9D%84-%ED%99%9C%EC%9A%A9%ED%95%9C-%EC%A0%95%EC%A0%81-%EC%9B%B9-%ED%98%B8%EC%8A%A4%ED%8C%85-%ED%95%98%EA%B8%B0