AWS Amplify部署React应用出现Manifest语法错误及%PUBLIC_URL%不生效问题

问题1：%PUBLIC_URL%占位符未替换 #

build操作说明 #

此处的build指React项目的生产构建操作，执行npm run build或yarn build命令触发，是Create React App内置的打包流程，会将源码编译压缩为可直接部署的静态资源，默认输出到项目根目录的build文件夹内，该流程会自动替换所有public/index.html中的%PUBLIC_URL%占位符为public文件夹对应的访问路径。

未生效排查点 #

• 检查AWS Amplify控制台的构建配置（buildspec.yml），确认build阶段执行的是正确的构建命令，且构建输出目录配置为build而非public，若直接部署未经过构建的public文件夹，占位符自然不会被替换
• 检查项目package.json是否配置了homepage字段，该字段值会作为%PUBLIC_URL%的替换值，若未配置默认使用部署站点的根路径
• 本地执行构建命令，打开build/index.html检查占位符是否被替换，若本地替换正常则问题出在Amplify的构建环节，若本地也未替换，需检查是否自定义了CRA构建配置（如使用customize-cra、eject后修改了webpack配置）导致替换逻辑失效

问题2：Manifest语法错误排查 #

Manifest: Line: 1, column: 1, Syntax error报错的核心原因是浏览器请求manifest.json时拿到的不是合法JSON格式内容，90%以上的场景是请求返回了404的HTML页面，HTML首行的<!DOCTYPE html>被当作JSON解析触发语法错误。

排查点 #

• 打开浏览器开发者工具的「网络」标签，刷新页面找到manifest.json的请求，查看响应状态码和响应内容，确认是否返回了HTML页面
• 检查Amplify控制台的「重写和重定向」规则，默认的SPA全站重定向规则/*指向/index.html（200重写）会拦截所有静态资源请求，需要在该规则前新增优先级更高的规则，匹配/manifest.json、/static/*、/favicon.ico等静态资源路径，设置为直接返回对应文件（状态码200）
• 检查本地构建生成的build文件夹内是否存在manifest.json，同时检查public文件夹下的源manifest.json本身是否存在JSON语法错误
• 之前添加的crossorigin="use-credentials"属性无作用可直接删除，仅当manifest.json托管在跨域CDN且需要携带认证信息时才需要该配置，普通部署场景添加反而可能引发跨域问题

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