본 문서는 Framer를 배우는 국내 사용자들이 한글 자료의 부족으로 겪는 어려움을 해결하고자, 공식 블로그의 내용을 한글로 번역하고 실무에 유용한 정보를 추가했습니다. 프레이머를 사용하는 여러분께 작게나마 도움이 되길 바랍니다.

CloudFront란?

글로벌 서버 네트워크를 통해 웹 콘텐츠를 빠르게 전달하는 CDN 서비스 입니다.

언제 직접 설정할까?

• 보안 정책, 캐싱 규칙, 트래픽 라우팅 등을 직접 제어해야 할 때

• 여러 오리진(Origin)을 통합 관리할 때

CloudFront 설정 방법

Framer 프로젝트 준비

1. Framer에서 Settings → Domains로 이동합니다.

2. 무료 Framer 서브도메인을 추가합니다.
   예: my-company.framer.website

1. Canonical URL을 Advanced로 설정하고, 커스텀 도메인을 입력합니다.
   예: my-site.com

2. 사이트를 퍼블리시합니다.

AWS CloudFront 배포 생성

1. AWS Management Console에서 CloudFront로 이동합니다.

2. Create Distribution을 클릭합니다.

1. Origin Domain에 Framer 서브도메인을 입력합니다.

   중요: <something>.framer.app이 아닌 my-company.framer.website 사용

1. 기본 캐시 동작(Cache Behavior)을 다음과 같이 설정하세요.

   • Viewer protocol policy: Redirect HTTP to HTTPS

   • Allowed HTTP methods: GET, HEAD
     (비밀번호 보호 사이트라면 GET, HEAD, OPTIONS, PUT, POST, PATCH, DELETE)

   • Cache policy: CachingOptimized

   • Origin request policy: AllViewerExceptHostHeader

   • Response headers policy: SecurityHeadersPolicy

1. 옵션을 조정한 뒤 Create distribution를 클릭합니다.

2. 배포가 완료되면 링크를 클릭해 CloudFront를 통한 사이트 접속을 확인하세요.

여러 오리진 구성하기

예를 들어 /framer-project/ 경로만 Framer 사이트에서 제공하고 싶을 때

1. 기존 CloudFront 배포에서 Behaviors → Create Behavior를 선택합니다.

2. Path pattern에 /framer-project/* 입력하세요.

3. 해당 경로의 오리진으로 Framer 프로젝트를 선택합니다.

4. 앞서 설명한 캐시·프로토콜·헤더 정책을 동일하게 적용하세요.

1. 저장 후 배포 완료를 기다리면, 하나의 CloudFront 배포에서 두 개의 오리진을 사용할 수 있습니다.

도메인 연결

CloudFront 배포에 커스텀 도메인을 추가하려면 Alternate Domain Name (CNAME) 기능을 사용합니다.
Note: Apex 도메인(mysite.com)을 사용하려면 Route53을 사용하는 것이 편리합니다.

본 글은 Framer 공식 블로그의 ‘Hosting with Amazon CloudFront’를 번역·각색한 콘텐츠입니다.