S3와 CloudFront를 이용한 정적 웹사이트 호스팅

 

< 고객 요청 >

1. A사는 www.insoft-test.com 의 영어사이트와 불어사이트를 운영합니다.

2. www 를 입력하지 않아도 웹 브라우저에 접속이 가능해야 합니다.

3. 불어사이트 URL인 insoft-test.com/ca/fr/ 뿐 아니라 insoft-test.com/ca/fr 로도 웹 브라우저에 접속이 가능해야     합니다.

 

 

 

1. S3 설정 

1-1) 파일이 들어갈 버킷과 리다이렉션용 버킷을 생성합니다.

   리다이렉션용 버킷은 도메인주소와 같게합니다.

 

1-2) insoft-test.com 의 정적웹사이트 호스팅 설정

      www.insoft-test.com 으로 리다이렉션되도록 설정합니다.

      프로토콜은 none 으로 설정해야 http와 https 모두 사용 가능합니다.

 

1-3) insoft.com/ca/fr 로 접속했을 때 웹 브라우저가 떠야 하므로 fr 파일을 생성해주고,

      insoft-test > ca/fr 의 메타데이터를 text/html로 편집합니다.

▶ Content-Type란? 

    - 웹 브라우저에서 파일을 어떻게 처리해야 하는지 알려주는 메타데이터. 보통 확장자에 따라 자동으로 설정됩니다.

      확장자가 없는 파일은 이 메타데이터를 통해 강제로 형식을 지정해 줄 수 있습니다. 

      메타데이터를 설정하지 않고 insoft-test.com/ca/fr 로 웹 브라우저를 열면 내용이 보이지 않고 바로 파일이 다운로        드 됩니다. 그래서 fr 이라는 파일의 Content-Type을 text/html 로 설정해주면 웹 브라우저에서 HTML 파일로 인식        해서 내용을 보여주게 됩니다.

  

 

2. CloudFront 설정

2-1) OAI를 생성합니다.

 

2-2) Distribution 생성

 

2-3) HTTPS 로 리다이렉션 되게 설정, HTTP Methods도 변경합니다.

      Cache Policy는 Caching Disabled 합니다.

 

 

2-4) 요금 계층은 레벨100 으로 지정하고

      Alternate Domain Names 에 사용할 도메인을 적으면 d111111abcedf8.cloudfront.net 과 같은 이름의 

      Domain name이 생성됩니다.

 

2-5) SSL 은 ACM 인증서를 선택합니다.

 

 

2-6) Document Root는 index.html 로 설정 후 완료합니다.

 

 

2-7) Origin and Origin Groups 탭에서 OAI를 사용한 Origin을 추가합니다.

 

 

2-8) Invalidations 탭에서 Object Path를 /ca/fr , /ca/fr/ 두개 생성합니다.

 

 

 

3. Route 53 설정

3-1) hosted zone 생성

 

3-2) 레코드 생성 - CNAME 생성

      (2-4)에서 반환된 d111111abcedf8.cloudfront.net 과 같은 값으로 CNAME을 추가합니다.

      insoft-test.com 에서 www.insoft-test.com으로 리다이렉션되면 라우팅 대상(d111111abcedf8.cloudfront.net)방향          으로 흐릅니다.   

 

 

3-3) 레코드 생성 - A레코드 추가

      S3 리다이렉션 설정이 제대로 동작하지 않아서 S3를 라우팅 대상으로 잡아주었습니다.