React项目Resume PDF在AWS Amplify部署后无法正常下载求助

问题核心 #

本地开发时PDF下载正常，但部署到Amplify后文件损坏，根源通常是：

• 打包工具处理PDF时未配置正确的MIME类型
• public文件夹路径使用错误（相对路径而非绝对路径）
• Linux服务器的大小写敏感性导致文件路径不匹配

可行解决方案 #

1. 正确使用public文件夹与绝对路径 #

将Resume.pdf移动到项目根目录的public文件夹下（可创建子文件夹如public/Assets），直接用绝对路径指向文件：

// 移除import Resume from './Assets/Resume.pdf'这一行
// 修改下载链接的href为绝对路径
<OverlayTrigger placement='bottom' overlay={tooltipResume}>
  <a href="/Assets/Resume.pdf" download="HyungKim_Resume.pdf">
    <FilePerson style={{color:'white',height:'30',width:'30',marginRight:'2rem'}}/>
  </a>
</OverlayTrigger>

注意：文件名和路径要严格匹配大小写（Amplify部署在Linux环境，大小写敏感）。

2. 在AWS Amplify中配置正确的MIME类型 #

如果想保留src/Assets目录的导入方式，需为PDF文件设置正确的Content-Type：

• 进入Amplify控制台，打开你的应用 → App settings → Rewrites and redirects
• 点击Add rule，添加以下规则：
  • Source address: *.pdf
  • Target address: /$1
  • Type: 200 (Rewrite)
  • 点击Add header，输入Content-Type作为键，application/pdf作为值
• 保存规则后重新部署项目

3. 避免将PDF作为模块导入 #

导入PDF会让打包工具生成带哈希的文件名，可能导致Amplify无法正确识别文件类型。直接使用public文件夹的绝对路径是React项目处理静态下载文件的推荐方式，能绕过打包工具的潜在问题。

内容的提问来源于stack exchange，提问作者Hyung Rak Kim