如何用反向代理自助托管

反向代理托管是一种将您的 Framer 网站与现有托管服务提供商或基础设施集成的现代方式。它提供了对头部信息、身份验证和内容传输的完全控制。Vercel、Netlify、NGINX、Cloudflare 和 AWS 等主流平台均支持这种托管方式。

请注意，反向代理仅作为 Scaleup 计划的附加组件提供，或包含在我们的企业计划中。您可在此处查看我们的定价。

工作原理

反向代理托管允许您的服务器直接请求并缓存来自 Framer 站点的页面，从而无需在更新后手动上传。您可以在通过主机提供页面之前对其进行修改，例如设置头部信息或添加身份验证。托管平台将客户端请求转发到 Framer 站点，应用修改，将响应本地缓存，并直接从主机提供后续请求。此流程简化了更新过程，并让您对网站拥有更大控制权。

比较 Framer 站点的“直接托管”和“自定义托管”设置示意图。在直接托管中，一条箭头连接“客户端浏览器”到“Framer 站点”。在自定义托管中，流程包含一个中间步骤：“客户端浏览器”连接到“Vercel 或 Netlify”（标记为“反向代理”），然后另一条箭头指向“Framer 站点”（标记为“源站”）。“缓存”一词出现在“反向代理”和“Framer 站点”之间。

使用反向代理托管，您可以实现以下功能：

添加自定义路由，以在单个域名上托管多个站点。
使用自定义域名和SSL 证书。
实施自定义 HTTP 安全头部信息和重定向。
配置自定义 CDN，以提升本地性能。
通过自定义缓存行为优化内容。
添加自定义 WAF进行安全管理。
使用自定义边缘函数实现高级身份验证或指标收集。

常见使用场景

客户通常使用代理托管来：

在一个域名下整合多个网站。代理重写允许不同路径指向不同源（例如，/pricing 指向一个 Framer 站点，/signup 指向另一个，主索引指向一个 Next.js 站点）。
在转发请求前添加身份验证、分析或 Cookie。
创建用于服务器端分析或优化的中间层。
增加额外的缓存层，以增强可靠性和性能。
通过经过审核的企业级基础设施路由流量，适用于大型组织。

不支持的使用场景

Framer 不支持以下反向代理操作：

修改或删除 <head> 中的标签。<head> 中的标签由 Framer 的 JavaScript 管理，更改可能导致不可预测的行为或破坏未来的更新。添加标签是被支持的。
在 <div id="main"> 中添加、修改或删除内容。该标签包含由 React 控制的站点内容。对此标签的修改可能会导致站点崩溃。对 <div id="main"> 外部的 <body> 内容的修改是被支持的，前提是 Framer 脚本保持不变。

如何设置

我们为常用平台提供了设置指南。任何支持反向代理的平台均可使用：

如何使用 Cloudflare 托管
如何使用 Amazon CloudFront 托管

最佳实践

对于预发布环境：

使用像 mysite.framer.website 这样的免费自定义域名。
将代理指向此域名，而不是将您的 Framer 站点链接到主域名。这可确保端到端 SSL 加密，因为 Framer 需要完全域名控制权才能生成 SSL 证书。

其他提示：

在站点通用设置中设置“规范 URL”，以便正确配置 HTML 和站点地图。
使用子路径时，请确保 Framer 项目路径与代理设置保持一致。例如，如果 /products/* 部分由 example.com 下的 Framer 提供支持，请确保 Framer 项目使用 /products/<page> 路径。