Amazon Cloudfront

How to integrate Amazon CloudFront with Webflow

Webflow's native hosting already includes CloudFront and Fastly. This guide applies exclusively to exported Webflow sites hosted on AWS S3, EC2, or custom servers.

For exported sites, integration methods include: Prerequisites for exported sites, Build with CloudFront API, Configure custom domains and SSL certificates, Implement cache invalidation, and Implement Lambda@Edge. Export your site and configure CloudFront when you need Lambda@Edge functions, AWS WAF security rules, or unified AWS billing for compliance.

This guide applies to exported sites only

Webflow-hosted sites already have CloudFront acceleration — use Webflow's manual domain connection guide instead. External CloudFront distributions cause 525 handshake errors with Webflow's managed hosting due to SSL certificate validation requirements.

Standard approach for Webflow-hosted sites

Webflow's hosting automatically uses CloudFront and Fastly for global delivery. Custom domains configured through Webflow's interface benefit from:

• Automatic CloudFront and Fastly edge caching globally
• Managed SSL certificate provisioning and renewal
• Automatic cache invalidation on publish
• Global CDN acceleration without additional setup

Prerequisites for exported sites

Before configuring CloudFront, export your site and set up origin infrastructure.

To export your Webflow site:

1. Navigate to Site settings > Export code
2. Click Prepare ZIP and download the file containing HTML, CSS, JavaScript, images, and assets

Note: Exported sites exclude CMS content, forms, password protection, and e-commerce features.

Choose an origin platform:

• Amazon S3: Create a bucket following the S3 getting started guide. Enable static website hosting, upload files, and configure public read access.
• Amazon EC2: Launch an instance with nginx or Apache. Configure HTTPS and upload files to the web server directory.
• Custom server: Enable HTTPS, configure CORS headers if needed, and upload files.

Test that your site loads correctly at the origin URL with HTTPS before proceeding.

Build with CloudFront API

Follow the distribution creation process:

1. Sign in to CloudFront console
2. Go to Distributions > Create distribution
3. Choose the Web delivery method
4. Configure origin domain (S3 bucket URL, EC2 domain, or custom server)

Configure custom domains and SSL certificates

Certificates must be requested in us-east-1 regardless of content origin (requirements).

Request a certificate by using the following steps:

1. Access AWS Certificate Manager in us-east-1
2. Request a public certificate with DNS validation
3. Include apex domain and subdomains (wildcard *.example.com doesn't cover apex)
4. Add DNS validation records

Attach certificate:

1. In CloudFront distribution settings, select Custom SSL certificate
2. Set Security policy to TLS 1.2 or TLS 1.3

Configure CNAMEs:

1. In distribution General > Edit, add alternate domain names
2. Add CNAME records for subdomains; use ALIAS records for apex domains (Route 53 documentation)

Implement cache invalidation for content updates

Create invalidations using the invalidation process when updating exported sites.

• 1,000 free paths/month; additional paths cost $0.005 each
• Wildcard paths (/images/*) count as single paths
• Use versioned filenames (style.v2.css) to reduce invalidation needs

To create invalidations: Go to distribution > Invalidations > Create invalidation. Enter paths (/index.html, /css/, or / for complete invalidation).

Implement Lambda@Edge for request and response processing

Lambda@Edge runs code at edge locations for request/response processing (guide).

Trigger types:

• Viewer request: Before cache lookup. For authentication, header manipulation, URL rewrites.
• Origin request: On cache miss. For origin selection, header addition.
• Origin response: After origin response. For header modification, error pages.
• Viewer response: Before returning to viewer. For header injection.

What you can build

Integrating Amazon CloudFront with Webflow lets you add enterprise-grade caching, security, and geographic routing to exported sites.

• Global marketing sites: Edge caching with automatic compression for images, videos, and interactive content
• Enterprise sites with AWS WAF: Block malicious traffic, rate limiting, DDoS protection
• Multi-region landing pages: Geographic routing via Lambda@Edge with single Webflow design system
• Authenticated portals: Lambda@Edge viewer request triggers for authentication checks