[AWS] Route53, S3를 사용한 정적 웹 사이트 호스팅

2024. 7. 16. 11:22AWS/AWS_Service

반응형

안녕하세요, 달콤한달팽이입니다.🐌🫡


오늘은 S3에 있는 파일을 사용하여 정적 웹 사이트를 호스팅하고,

Route53을 통해 도메인을 설정하는 방법에 대하여 알아보겠습니다.


S3 정적 웹 사이트 호스팅

DB와 연계되는 동적 웹 사이트가 아닌, 단순한 정적 웹 사이트의 경우

S3를 사용함으로써 웹 호스팅이 가능하며, 이는 EC2 한 대를 띄우는 것 보다 훨씬 저렴하단 특징이 있습니다.

또한, S3를 사용하는 만큼 내구성이 좋아 동시에 수 천, 수 만 트래픽이 몰려도 과부화가 발생하지 않는 특장점이 있습니다.

 

공지 및 서버 점검 페이지 등을 띄울 때에 많이 사용되므로 사용법만 알아두면 큰 도움이 될 것 같습니다!

 

그럼 이제, Route53과 S3를 활용하여 정적 웹 사이트를 호스팅하는 방법을 알아보도록 하겠습니다.


1) 사전 준비

 

S3를 활용하여 정적 웹 사이트를 호스팅하기 전에 필요한 사전 준비 사항을 확인해보겠습니다.

 

1. 버킷 & 테스트 파일

 웹 사이트 호스팅에 사용될 index.html 파일과 몇몇 PDF 파일을 추가하였습니다.

 이때 주의해야할 점은 버킷의 이름은 Route53에 등록할 도메인 이름과 동일해야한다는 점입니다!

 

2. 도메인

 도메인을 통하여 웹 사이트를 호스팅할 것이기 때문에 호스팅에 사용될 도메인 값을 Route53의 레코드로 등록해주세요!

 해당 레코드는 앞서 생성한 버킷명과 동일해야하며, 레코드 값은 나중에 수정할 것이므로 아무값이나 넣어주세요.

 

2) S3 버킷 설정 - 권한

웹 사이트는 모든 사람에게 S3 내부 오브젝트가 공개되는 것을 의미하므로, 권한 설정이 필요합니다.

이를 위해 퍼블랙 액세스 차단 편집버킷 권한 수정 작업을 우선적으로 수행해보겠습니다!

 

1. 퍼블릭 액세스 차단 편집

 버킷의 "권한" - "퍼블릭 액세스 차단 편집" 탭에서 "모든 퍼블릭 액세스 차단"을 비활성화 시켜주세요.

 해당 과정을 통해 S3와 객체는 퍼블릭 액세스 설정이 가능해집니다. 

 

2. 버킷 권한 수정 

버킷의 "권한" - "버킷 정책" 탭에서 아래와 같이 정책을 수정해주세요.

해당 정책은 버킷 내부의 모든 객체에 대하여 Get(열람 및 다운로드)가 가능하도록 권한을 부여하겠다는 의미입니다.

 

이제 권한 설정이 완료되었으니, 정적 웹 사이트 호스팅을 위한 준비는 끝났습니다.

본격적으로 정적 웹 사이트를 호스팅해보도록 합시다!

 

3) S3 버킷 설정 - 정적 웹 사이트 호스팅

버킷의 "속성" - "정적 웹 사이트 호스팅" 탭이 비활성화 되어있는 것을 확인 할 수 있습니다.

 

이를 편집하여 웹 사이트 호스팅을 활성화 시켜주고, 앞서 구성한 인덱스 문서를 추가해주세요.

 

위 설정이 모두 완료되었을 경우, 버킷 웹 사이트에 대한 HTTP 엔드포인트가 출력됩니다.

 

주어진 HTTP 엔드포인트를 통해 결과를 확인해보면, index.html이 정상적으로 출력되는 것을 확인하실 수 있습니다.

 

4) Route53 레코드 등록

사용자들은 보통 저러한 긴 HTTP 엔드포인트를 사용하여 웹 사이트를 접근하지 않습니다!

때문에 Route53을 통해 도메인과 엔드포인트를 연결해주는 작업이 필요하죠.

 

이제 앞서 생성해둔 버킷명과 동일한 레코드를 수정하도록 합시다.

A레코드의 별칭을 활성화시키면, 앞서 생성한 엔드포인트를 선택할 수 있습니다!

(만약 엔드포인트가 보이지 않을 경우, Route53의 레코드와 S3 버킷의 이름이 동일한지 확인해주세요!)

 

 

4) 결과 확인

이제 도메인을 통하여 S3 HTTP 엔드포인트와 동일한 html 페이지가 출력되는지 확인해보도록 합시다.

 

마찬가지로, S3에서 지정해둔 경로의 PDF가 정상적으로 보이는지도 확인해주세요!

 

 

웹 페이지와 PDF 파일 모두 정상적으로 보이는 것을 모두 확인하였습니다!


지금까지 S3를 사용하여 정적 웹 페이지를 만들고, Route53을 통해 이를 호스팅하는 방법에 대해 알아보았습니다.

 

지금까지 긴 글 읽어주셔서 감사합니다! 

반응형