自定义错误页面配置指南 (AWS CloudFront) 🤔

遇到 404？500？别让用户面对冷冰冰的错误信息！自定义错误页面能让体验更友好 🤩。

步骤 1: 创建自定义错误页面 🎨

首先，设计你喜欢的错误页面 (比如 404.html, 500.html)。确保它们美观、实用，最好能提供导航或搜索功能 🔍。

示例 404 页面：

<!DOCTYPE html>
<html>
<head>
<title>404 - 页面未找到 😥</title>
<style>
  body { font-family: sans-serif; text-align: center; }
  h1 { font-size: 3em; margin-top: 2em; }
</style>
</head>
<body>
  <h1>404 - 页面未找到 😥</h1>
  <p>抱歉，您要找的页面好像走丢了...</p>
  <p><a href="/">返回首页</a></p>
</body>
</html>

步骤 2: 上传到 S3 (或其他源) 📤

将这些 HTML 文件上传到你的 S3 bucket (或者 CloudFront 配置的其他源)。确保 CloudFront 有权限访问这些文件 🔑。

步骤 3: CloudFront 配置自定义错误响应 ⚙️

1. 登录 AWS 控制台，打开 CloudFront 服务。
2. 选择你的 Distribution，点击 "Error Pages" 标签。
3. 点击 "Create Custom Error Response"。
4. 配置：
   • HTTP Error Code: 选择你要自定义的错误码 (如 404, 500)。
   • Response Page Path: 输入错误页面在 S3 中的路径 (如 /error/404.html)。注意斜杠！
   • HTTP Response Code: 选择 200 (OK) (推荐) 或其他合适的响应码。 使用200能防止浏览器显示默认错误页面。
   • Response Headers (可选): 可以添加自定义 Header，例如 Cache-Control。
   • Cache TTL (Seconds): 错误页面在 CloudFront 缓存的时间。
5. 点击 "Create"。

示例配置 📝

• HTTP Error Code: 404
• Response Page Path: /errors/404.html
• HTTP Response Code: 200
• Cache TTL (Seconds): 300

步骤 4: 测试 🧪

配置完成后，测试你的自定义错误页面。访问一个不存在的 URL，看看是否显示了你上传的错误页面 🎉。

注意：CloudFront 的缓存可能需要一段时间更新，耐心等待一下 ⏳。

进阶技巧 ✨

• 针对不同错误码使用不同的页面： 可以为 403、500 等错误码配置不同的错误页面。
• 动态错误页面： 使用 Lambda@Edge 可以生成动态的错误页面，提供更个性化的体验。
• 错误日志监控： 监控错误日志，及时发现和解决问题 🐛。

重要提示 ⚠️

• 确保 S3 bucket 的权限正确配置，CloudFront 才能访问错误页面。
• Response Page Path 必须以斜杠 / 开头。
• HTTP Response Code 推荐使用 200，避免浏览器显示默认错误页面。

配置自定义错误页面，提升用户体验，让你的网站更专业！👍