안녕하세요. 오늘은 베스핀 글로벌 D&A실 김동규님이 작성해 주신 CloudFront 주요 설정 가이드에 대해 알아보겠습니다. 궁금한 부분이 있으시면 댓글을 달아주세요.
1. Apache VHOST 설정

- httpd.conf 에 다음과 같이 설정 (예제)
1. www.foxhusky.tk 접속시 기본 도메인으로 /var/www/html 을 Document root 로 설정
2. www.foxhusky2.tk 접속시 VHOST 설정으로 /var/www2/html 을 Document root 로 설정
3. WEB 서버 앞단의 LB 설정 후 DNS를 LB 로 설정할 경우 각 도메인마다 다른 웹페이지가 로딩됨을 확인할 수 있다.
2.CloudFront 설정
2-1. CloudFront 배포

- CloudFront 배포 생성
원본 웹서버 대신 CDN에서 배포가 이뤄지게 하기 위해서 CloudFront 생성을 시작한다.
2-2. CloudFront 배포

추가 설정을 눌러보면 프로토콜 정보가 나오는데 경우에 따라 https외에 http를 origin으로 바라보아야 하는 경우가 있을 수 있는데 뷰어 일치로 해 두면 http, https 둘 다 사용할 수 있게 된다.
2-3. CloudFront 배포

- 캐시 동작 설정
2-4. CloudFront 배포

1. VHOST를 사용하지 않는 단일 Document root 가 origin이라면 아래 캐시 키 및 원본 요청 정책을 그대로 사용해도 무방하다.
2. VHOST 사용시에는 아래 정책을 그대로 사용시 문제가 되는데 이후 장표에서 설명한다.
2-5. CloudFront 배포

설정에서는 CNAME 추가를 해 주어야 한다. 선택사항이지만 그대로 둘 경우 다음 장에서 확인 가능하듯이 403 오류가 발생한다.
2-6. CloudFront 배포

DNS에서 예제의 도메인을 CloudFront의 배포 도메인으로 CNAME로 설정하여 확인해 보면 다음과 같이 403 오류 화면을 볼 수 있다.
2-7. CloudFront 배포

다시 설정 편집으로 들어가서 CNAME 및 SSL 인증서 선택을 해 준다.
2-8. CloudFront 배포

에러 없이 정상적으로 CDN을 통해 컨텐츠가 표시되는 것을 볼 수 있다. 그런데 LB를 통해서 볼 때와 달리 VHOST 설정된 Document root 의 컨텐츠가 아닌 Default root 컨텐츠 웹페이지가 보여짐을 알 수 있다. 따라서 이 부분에 대한 정책 수정이 필요하다.
2-9. CloudFront 배포

배포 – 동작을 선택하고 편집으로 들어간다.
2-10. CloudFront 배포

- 해결 방법 1
1. 캐시 키 및 원본 요청에서 아래와 같이 옵션을 수정하고 저장한다.
2. 이 경우 브라우저의 주소 정보(HOST)에 따라 설정된 VHOST의 Document root의 컨텐츠를 원본으로 바라보고 캐싱을 해 오게 된다.
2-11. CloudFront 배포

- 해결 방법 1
이제 www.foxhusky2.tk 접속 시 정상적으로 /var/www2/html 웹페이지를 캐싱하여 보여줌을 확인할 수 있다.
2-12. CloudFront 배포

- 해결 방법 2
1. 세부적인 정책 설정이 가능하며 방법 1보다 권장하는 방법이다.
2. CloudFront – 정책에서 캐시 정책 설정 생성
2-13. CloudFront 배포

- 해결 방법 2
1. 캐시 키 설정에서 해결 방법 1과 동일하게 HOST 헤더를 추가한다.
2. TTL은 원본 컨텐츠의 갱신 주기등을 고려하여 설정한다.
2-14. CloudFront 배포

- 해결 방법 2
정책 – 원본 요청에서 생성
2-15. CloudFront 배포

- 해결 방법 2
캐시 정책과 동일하게 원본 요청에도 HOST 를 헤더 추가하도록 한다.
2-16. CloudFront 배포

- 해결 방법 2
CloudFront 의 해당 배포 정책 – 동작에서 편집으로 들어가서 아래 캐시 정책과 원본 요청 정책을 앞서 생성한 정책으로 변경해 준다.
2-17. CloudFront 배포

- 최종 확인
www.foxhusky.tk 및 www.foxhusky2.tk 접속 시 정상적으로 각 Document root에 맞는 페이지를 보여주고 있음을 확인할 수 있다.
감사합니다~ 🙂

문의: info@bespinglobal.com | 대표번호: 02-1688-1280