Astro部署在AWS Amplify上死链跳转首页，如何显示404页面？

方法1：通过Amplify控制台修改重写规则 #

• 登录AWS Amplify控制台，找到目标项目
• 进入部署标签页，点击部署设置
• 在重写和重定向模块点击编辑
• 替换原有规则为以下内容：

  [
    {
      "source": "</^[^.]+$/>",
      "target": "/index.html",
      "status": "200",
      "condition": null
    },
    {
      "source": "/<*>",
      "target": "/404.html",
      "status": "404",
      "condition": null
    }
  ]
  

  规则顺序不可颠倒：第一条适配Astro客户端路由场景，将无后缀的有效路径指向index.html；第二条处理所有不存在的路径，返回404.html并设置404状态码
• 保存修改后重新部署项目

方法2：通过项目本地配置文件设置 #

• 在项目根目录创建或编辑amplify.yml文件
• 写入以下配置（确保baseDirectory对应Astro构建产物目录，默认是dist）：

  version: 1
  frontend:
    phases:
      build:
        commands:
          - npm run build
    artifacts:
      baseDirectory: dist
      files:
        - '**/*'
    cache:
      paths:
        - node_modules/**/*
    rewriteRules:
      - source: </^[^.]+$/>
        target: /index.html
        status: 200
      - source: /<*>
        target: /404.html
        status: 404
  

• 提交修改到代码仓库，Amplify会自动重新部署并应用新规则

关键注意事项 #

• 确保执行astro build后，构建产物目录（如dist）下存在自动生成的404.html文件
• 测试时直接访问不存在的URL（如/invalid-path），确认页面显示自定义404内容，同时浏览器网络请求状态码为404

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