This document aims to alleviate the difficulties domestic users face due to the lack of Korean resources for learning Framer. We've translated content from the official blog into Korean and added practical information. We hope this provides some assistance to those using Framer.

What is CloudFront?

CloudFront is a content delivery network (CDN) offered by Amazon.
Framer uses CloudFront by default to deliver assets. Therefore, typically, no separate CloudFront configuration is necessary, and it only needs to be set up directly when greater control over the hosting environment is needed.

When should it be configured directly?

• When there is a need to finely control security policies, caching rules, traffic routing, etc.

• When multiple origins need to be managed in an integrated manner

How to Configure CloudFront

1. Go to Settings → Domains in your Framer project.

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

3. Next, switch the Canonical URL option to Advanced in the same menu, enter a custom domain (e.g., my-site.com), and publish your website.

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

Create AWS CloudFront Distribution

1. Navigate to CloudFront in the AWS Management Console.

2. Click Create Distribution.

3. Enter the Framer subdomain in Origin Domain.

   Important: Use my-company.framer.website instead of <something>.framer.app

4. Set the default Cache Behavior as follows:

   • Viewer protocol policy: Redirect HTTP to HTTPS

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

   • Cache policy: CachingOptimized

   • Origin request policy: AllViewerExceptHostHeader

   • Response headers policy: SecurityHeadersPolicy

5. After adjusting the options, click Create distribution.

6. Once deployment is complete, click the link to confirm site access through CloudFront.

Configuring Multiple Origins

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

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

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

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

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

5. After saving, wait for deployment to complete, allowing two origins to be used in a single CloudFront distribution.

Domain Connection

To add a custom domain to the CloudFront distribution, use the Alternate Domain Name (CNAME) feature.
Note: It is convenient to use Route53 if you want to use an apex domain (mysite.com).

This article is a translated and adapted version of the Framer official blog content ‘Hosting with Amazon CloudFront’.