Astro+S3+CloudFront：点击导航链接跳转到错误路径(/WEBSITE/pricing)

部署配置 #

• 部署脚本：

  "deploy": "npm run build && aws s3 sync dist s3://mybucket/WEBSITE --delete"
  

• S3与CloudFront设置：已启用S3静态网站托管，CloudFront源路径指向/WEBSITE
• Astro配置（astro.config.mjs）：

  import { defineConfig } from 'astro/config';
  import tailwindcss from "@tailwindcss/vite";
  
  export default defineConfig({
    base: "/",
    vite: {
      plugins: [tailwindcss()],
    },
  });
  

问题现象 #

点击如下导航链接时出现404错误：

<a href="/pricing" class="text-gray-700 hover:text-black">Pricing</a>

错误详情：

404 Not Found
Code: NoSuchKey
Key: WEBSITE/WEBSITE/pricing/index.html

网络请求流程：

1. 浏览器请求/pricing
2. 收到302重定向至/WEBSITE/pricing
3. 该路径不存在，请求失败
4. 直接在浏览器输入http://www.mysite.com/pricing可正常加载

疑问 #

• 为何点击链接会重定向到/WEBSITE/pricing？
• Astro代码中并未引用/WEBSITE
• 这是CloudFront配置问题还是Astro本身的问题？

解决方案 #

问题根源 #

重定向来自S3静态网站托管的默认规则，和Astro无关。当CloudFront将请求转发到S3静态网站托管端点时，S3会根据自身配置生成重定向，而CloudFront设置的源路径/WEBSITE会导致S3在处理目录请求时错误地将该前缀重复追加到路径中，最终生成无效的WEBSITE/WEBSITE/pricing/index.html键值。

修复步骤 #

1. 调整CloudFront源配置

   • 不要将CloudFront源路径设为/WEBSITE，直接将源指向S3静态网站托管的完整端点（例如http://mybucket.s3-website-us-east-1.amazonaws.com），而非S3的REST API端点。
   • 如果必须使用S3 REST端点作为源，需在CloudFront的**行为（Behavior）**中设置路径模式为/*，并通过CloudFront函数或Lambda@Edge重写请求路径，移除多余的/WEBSITE前缀。

2. 确认Astro配置

   • 保持astro.config.mjs中的base为"/"即可，因为站点根路径对应域名根目录，无需额外前缀。

3. 检查S3重定向规则

   • 登录S3控制台，进入目标存储桶的“静态网站托管”设置，确保没有自定义重定向规则会自动追加/WEBSITE前缀。

补充说明 #

直接输入URL能正常加载，是因为此时CloudFront直接匹配到了S3中WEBSITE/pricing/index.html的文件；而点击链接触发的是S3静态网站托管的目录请求处理逻辑，错误叠加了CloudFront的源前缀，导致路径无效。

内容的提问来源于stack exchange，提问作者Shanu Reddy