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

CloudFront란?

CloudFront는 Amazon에서 제공하는 콘텐츠 전송 네트워크(CDN)입니다.
Framer는 기본적으로 에셋을 제공하기 위해 CloudFront를 사용합니다. 따라서 일반적인 경우 별도의 CloudFront 설정은 필요하지 않으며, 호스팅 환경에 대해 더 많은 제어가 필요할 때만 직접 설정하면 됩니다.

언제 직접 설정할까?

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

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

CloudFront 설정 방법

1. Framer 프로젝트에서 설정(Settings) → 도메인(Domains) 으로 이동합니다.

2. 사이트에 무료 Framer 서브도메인(예: my-company.framer.website)을 추가하세요.

3. 이어서 같은 메뉴에서 Canonical URL 옵션을 고급(Advanced) 으로 변경하고, 사용자 지정 도메인(예: my-site.com)을 입력한 뒤 웹사이트를 게시하세요.

Note: 반드시 my-company.framer.website와 같은 사용자 지정 Framer 서브도메인을 사용해야 합니다. <something>.framer.app 형태의 기본 도메인(Base domain) 은 사용하지 마세요.

AWS CloudFront 배포 생성

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

2. Create Distribution을 클릭합니다.

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

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

4. 기본 캐시 동작(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

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

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

여러 오리진 구성하기

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

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

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

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

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

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

도메인 연결

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

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