React部署AWS Amplify后public文件夹文件无法访问求助

不用急着将文档迁移到S3，先排查以下几个常见问题：

• 确认build产物中的PDF文件
  本地执行npm run build后，检查build根目录下是否存在transcript.pdf。Amplify部署的是build文件夹的内容，若构建过程中PDF未被正确复制到build目录，就会出现404导致空白页。React默认会将public文件夹下的静态资源同步到build目录，可手动验证这一点。

• 简化URL路径写法
  尝试将链接改为直接使用根相对路径：

  <a
    href="/transcript.pdf"
    target="_blank"
    rel="noopener noreferrer"
    className="white-link"
  >
    View my full transcript here.
  </a>
  

  Amplify部署的单页应用根路径已对应build目录，直接写根相对路径可避免process.env.PUBLIC_URL在Amplify环境中未正确注入的问题。

• 检查Amplify重写规则
  若你的Amplify配置了SPA重写规则（将所有请求指向index.html），会导致PDF这类静态资源被错误重定向。需在Amplify控制台的「Rewrites and redirects」中添加一条优先级更高的例外规则：

  • 源地址：/transcript.pdf
  • 目标地址：/transcript.pdf
  • 类型：200 (Rewrite)
    确保这条规则位于SPA重写规则之前，让Amplify优先匹配并返回PDF文件。

• 清理Amplify部署缓存
  Amplify默认对静态资源启用缓存，可能旧缓存导致无法加载新上传的PDF。可在Amplify控制台的部署记录中，选择最新部署并点击「Redeploy this version」，勾选「Clear cache」后重新部署。

若以上方法都无法解决问题，再考虑将PDF存储到S3：创建S3存储桶并配置公开访问（或通过CloudFront分发），上传PDF后直接使用S3的公开链接，这种方式更稳定，也便于管理大体积静态资源。

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