본문 바로가기
서버/AWS

[AWS]12. S3 기반 정적 웹 사이트 호스팅 (Route53, Cloudfront)

by jamong1014 2024. 1. 20.
반응형

구성도

 

먼저 S3는 HTML, CSS, JS 같은 정적 데이터를 처리하는 파일들을 업로드하여 EC2와 같은 서버를 별도로 만들지 않아도 웹 서비스를 구현할 수 있다.

 

단 동적 데이터를 처리하는 PHP, JSP 등과 같은 파일들은 EC2 서버 구축 해야 함

실습

  1. 정적 데이터 파일로만 구성된 템플릿 (부트스트랩 템플릿 다운)
  2. S3에 파일 업로드
  3. 정적 웹 사이트 호스팅
  4. Cloudfront 캐싱 서버 배포
  5. Cloudfront 대체 도메인 지정/SSL 인증성 발급(ACM)
  6. Route53 레코드 Cloudfront 연결

1. 템플릿 다운로드

 

startbootstrap.com

 

Start Bootstrap

 

startbootstrap.com

이 사이트에서 템플릿을 무료로 제공하니 마음에 드는 템플릿을 다운받아보자

 

템플릿 구성 파일


2. S3에 파일 업로드

먼저 업로드할 버킷을 만들어줘야 한다.

버킷 만들기 - 생성된 버킷 선택

*버킷 만들 때 여러 가지 옵션이 나오는데 이름만 정하고 나머지는 기본 옵션으로 지정하고 생성하면 된다.

본인은 jamong1014라는 버킷 생성

 

업로드 된 상태

다운 받은 파일을 그대로 업로드 필드란에 드래그하면 된다.

 

모든 퍼블릭 액세스 차단 해제

 

기본적으로 외부에 대해 액세스가 차단되어 있기 때문에 외부 접근이 가능하게 하려면 차단을 해제해주어야 한다.

권한 - 퍼블릭 액세스 차단(버킷 설정) - 편집(모든 퍼블릭 액세스 차단 해제)

 

그럼 업로드된 파일들도 ACL을 사용하여 퍼블릭으로 설정할 수 있다.


3. 정적 웹 사이트 호스팅

 

속성 - 정적 웹 사이트 호스팅 편집

정적 웹 사이트 호스팅 활성화 - 버킷에 업로드했던 index.html로 기본 페이지를 지정


4. Cloudfront 캐싱 서버 배포

Cloudfront - 배포 생성

 

원본 도메인 선택란

 

원본 도메인을 입력해야 하는데 클릭해서 나오는 S3 주소가 아닌 S3 웹 호스팅 엔드 포인트 주소를 입력해줘야 한다.

 

엔드 포인트 주소 확인은 아까 S3 버킷에서 '정적 웹 사이트 호스팅' 란에서 확인할 수 있다.

정적 웹 사이트 엔드포인트 주소


5. Cloudfront 대체 도메인 지정/SSL 인증성 발급(ACM)

 

 

Cloudfront - 생성한 배포 - 설정 편집

 

이제 Cloudfront에서 배포한 캐싱 서버를 도메인과 연결하려면 대체 도메인과 ACM(SSL 인증서)을 설정해줘야 한다.

'foolblack.net' 은 aws에서 구매한 도메인이기 때문에 따로 호스팅 네임서버 연결 작업을 해주지 않았다.

(본인 다른 도메인들은 전부 Cloudflare에 물려있음)

 

즉 Route53에서 호스팅 또는 구매한 도메인을 써주고 해당 도메인에 대한 인증서 요청을 통해 ACM을 설정해 주면 된다.

 

ACM 설정 - 다음

 

호스팅 또는 구매한 도메인 입력

나머진 기본으로 하고 요청하면 된다.

(인증서 요청하는데 시간이 좀 걸림)

 

그럼 이런 식으로 나오게 된다.


6. Route53 레코드 Cloudfront 연결

 

레코드를 생성 - 레코드 유형은 A 레코드 - 별칭 - CloudFront 배포에 대한 별칭 - 호스팅 할 캐싱 서버(Cloudfront에서 배포한 서버 도메인을 적어주면 됨) - 단순 라우팅

식으로 설정하면 끝이다.

 

해당 도메인으로 캐싱 서버가 잘 작동되는 모습

 

반응형

댓글