Can anyone provide recommendations and guidance on setting up and testing a reverse proxy with Amazon Cloudfront for a Webflow project, specifically when the client is not on the Enterprise plan?

Setting up a reverse proxy with Amazon CloudFront for a Webflow project (when not on the Enterprise plan) allows you to serve your Webflow content through a custom layer—useful for advanced routing, header overrides, or custom domains outside of Webflow’s default setup. Since Webflow's custom domain support without Enterprise doesn’t allow reverse proxying directly, you need to manage this fully from your server or CloudFront distribution.

1. Understand the Limitations

• Webflow does not officially support reverse proxying unless you're on an Enterprise plan that includes custom reverse proxy support.
• Without Enterprise, you'll be bypassing Webflow's usual domain features and using CloudFront to pull Webflow-hosted content (e.g., from yoursite.webflow.io).
• You won’t be able to use Webflow's built-in SSL or CMS previews with this method unless you deeply configure things manually.

2. Set Up a Basic CloudFront Distribution

• Create a CloudFront distribution in the AWS Console.
• Set the Origin Domain Name to your Webflow project’s .webflow.io URL (e.g., yourproject.webflow.io).
• Restrict the default cache behavior to GET, HEAD (unless you need POST for forms).
• Set the Viewer Protocol Policy to "Redirect HTTP to HTTPS".
• Disable caching for dynamic content if needed (originate from Webflow).

3. Configure Custom Headers (Optional)

• Webflow may block some requests if headers aren’t correctly passed.
• In the Origin Request Policy, you may need to send specific headers:
• Host: yourproject.webflow.io
• User-Agent and Accept-Encoding may also be necessary depending on behavior.
• You may need to configure a Lambda@Edge function to rewrite response headers or perform redirects, especially if Webflow's canonical URL or redirects are not behaving as expected.

4. Add SSL Certificate in AWS Certificate Manager

• Use AWS Certificate Manager to issue an SSL certificate for your custom domain.
• Attach this to your CloudFront distribution in the “Alternate Domain Names (CNAMEs)” section.
• This ensures that your custom domain (e.g., www.clientsite.com) serves securely over HTTPS.

5. Point DNS to CloudFront

• In your domain DNS (via Route 53 or elsewhere), set an A record (alias) or CNAME pointing to your CloudFront distribution’s domain (e.g., d123abc.cloudfront.net).
• This directs traffic to CloudFront which then proxies to Webflow.

6. Test the Configuration

• Open your browser and go to your custom domain.
• Ensure all assets load correctly and links/clicks behave as expected.
• Check canonical URLs and other SEO elements to avoid duplication issues.
• Use tools like curl, Chrome DevTools, and Lighthouse to investigate headers, performance, and network behavior.

7. Common Pitfalls

• Webflow Forms may not submit properly under a reverse proxy without explicit POST support and potential header rewriting.
• Client-side routing (e.g., hash or history mode) may break depending on how CloudFront handles requests.
• CMS preview links or editor login will not work through a proxy unless you’re on the Enterprise plan.

Summary

To use a reverse proxy with Webflow and CloudFront without Enterprise, you must create a CloudFront distribution that pulls from your Webflow.io domain, configure headers and SSL in AWS, and point your custom domain’s DNS to CloudFront. While it’s technically possible, expect limitations—especially around forms, logins, and canonical URLs—because Webflow does not support reverse proxying out-of-the-box on non-Enterprise plans.