This document was created to help domestic users who are learning Framer overcome difficulties due to the lack of Korean resources. We translated content from the official blog into Korean and added practical information. We hope this provides some help for those using Framer.

What is CloudFront?

CloudFront is a Content Delivery Network (CDN) provided by Amazon.
Framer uses CloudFront by default to deliver assets. Hence, typically, there's no need for separate CloudFront setup, and you should configure it only when more control over the hosting environment is required.

When to configure manually?

• When you need to finely control security policies, caching rules, and traffic routing.

• When you need to manage multiple origins in an integrated manner.

How to Set Up CloudFront

1. In your Framer project, go to Settings → Domains.

2. Add a complimentary Framer subdomain to your site (e.g., my-company.framer.website).

3. Then, change the Canonical URL option to Advanced in the same menu and enter a custom domain (e.g., my-site.com) before publishing the website.

Note: You must use a custom Framer subdomain like my-company.framer.website. Do not use the base domain in the form of <something>.framer.app.

Create AWS CloudFront Distribution

1. Go to CloudFront in the AWS Management Console.

2. Click on Create Distribution.

3. Enter the Framer subdomain in Origin Domain.

   Important: Use my-company.framer.website and not <something>.framer.app

4. Set the Default Cache Behavior as follows:

   • Viewer protocol policy: Redirect HTTP to HTTPS

   • Allowed HTTP methods: GET, HEAD
     (Include OPTIONS, PUT, POST, PATCH, DELETE for password-protected sites)

   • Cache policy: CachingOptimized

   • Origin request policy: AllViewerExceptHostHeader

   • Response headers policy: SecurityHeadersPolicy

5. Adjust the options and click on Create distribution.

6. Once deployment is complete, click the link to verify site access via CloudFront.

Configuring Multiple Origins

For instance, if you want to serve only the /framer-project/ path from the Framer site

1. Select Behaviors → Create Behavior from the existing CloudFront distribution.

2. Enter /framer-project/* in Path pattern.

3. Select Framer project as the origin for that path.

4. Apply the same cache, protocol, and header policies mentioned earlier.

5. After saving, wait for deployment completion; you can use two origins in one CloudFront distribution.

Connecting a Domain

To add a custom domain to a CloudFront deployment, use the Alternate Domain Name (CNAME) feature.
Note: If using an apex domain (mysite.com), Route53 makes it convenient.

This article is a translation and adaptation of Framer’s official blog post, ‘Hosting with Amazon CloudFront’.