如何通过AWS Amplify将React应用部署到子路径/troubleshoot

你的React应用在Docker+Nginx环境下能正常通过/troubleshoot访问，但AWS Amplify部署失败，核心原因是Amplify默认的SPA路由规则只适配根路径，需要针对子路径配置重写规则，以下是具体解决步骤：

1. 确认现有配置正确性 #

你已经完成的两个关键配置是有效的，无需修改：

• BrowserRouter设置了basename="/troubleshoot"，确保所有路由都基于子路径生成
• package.json中配置homepage="/troubleshoot"，保证build产物的静态资源引用路径正确

2. 添加AWS Amplify重写规则（对应Nginx的try_files） #

Amplify需要配置路由 fallback 来处理SPA的客户端路由，作用和Nginx里的try_files $uri $uri/ /troubleshoot/index.html完全一致：

方法一：通过Amplify控制台配置 #

1. 打开你的Amplify应用控制台，进入Rewrites and redirects页面
2. 点击Add rule，添加以下规则：
   • 源地址：/troubleshoot/<*>
   • 目标地址：/troubleshoot/index.html
   • 类型：选择200 (Rewrite)
3. 保存规则后重新部署应用

方法二：通过项目根目录的amplify.yml配置 #

在项目根目录创建或修改amplify.yml，添加重写规则部分：

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - npm install
    build:
      commands:
        - npm run build
  artifacts:
    baseDirectory: build
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*
  rewrites:
    - source: /troubleshoot/<*>
      target: /troubleshoot/index.html
      status: 200

3. 验证部署后的访问路径 #

部署完成后，访问地址应为https://<你的Amplify域名>/troubleshoot，不要直接访问根路径，确保所有路由跳转都基于该子路径。

为什么Nginx能正常运行？ #

你的Nginx配置专门针对/troubleshoot路径设置了try_files，自动将不存在的路径 fallback到/troubleshoot/index.html，而Amplify默认没有这个子路径的规则，所以需要手动添加。

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