React+MySQL全栈应用AWS Amplify部署失败求助：页面无法访问

一、先确认文件夹结构合规性 #

Amplify部署React前端+Express Lambda后端的标准结构如下，不符合的话会导致部署识别失败：

仓库根目录/
├── frontend/          # React项目文件夹（如create-react-app生成的结构）
│   ├── public/
│   ├── src/
│   ├── package.json
│   └── ...
├── backend/           # Express Lambda后端代码文件夹
│   ├── app.js         # 你的Express入口文件
│   ├── package.json
│   └── ...
└── amplify/           # Amplify初始化后自动生成的配置文件夹
    ├── backend/
    ├── frontend/
    └── team-provider-info.json

如果前端后端混在根目录，或缺少独立文件夹区分，Amplify无法正确识别构建目标，直接引发404。同时前端必须是标准SPA结构，确保public/index.html存在。

二、解决"Page not found"核心原因 #

1. 前端路由配置问题 #

若使用React Router的BrowserRouter，Amplify默认不处理SPA路由重写，需添加规则：

• 进入Amplify控制台 → 你的应用 → 部署 → 重写和重定向 → 新增规则
  • 源地址：</^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf|map|json)$)([^.]+$)/>
  • 目标地址：/index.html
  • 类型：200 (Rewrite)

2. 构建配置未指定前端路径 #

进入Amplify控制台 → 你的应用 → 构建设置 → 编辑，确保前端构建配置正确（假设React在frontend文件夹）：

frontend:
  phases:
    preBuild:
      commands:
        - cd frontend
        - npm install
    build:
      commands:
        - npm run build
  artifacts:
    baseDirectory: frontend/build
    files:
      - '**/*'
  cache:
    paths:
      - frontend/node_modules/**/*

3. 后端Lambda/API网关未正确配置 #

Express后端需通过Amplify CLI关联API网关，否则前端无法调用后端：
运行amplify add api选择REST API，按提示创建Serverless Express Lambda，替换自动生成的模板代码为你的app.js，最后执行amplify push完成部署。

三、完整全栈部署步骤 #

1. 初始化Amplify项目 #

在仓库根目录执行：

amplify init

按提示选择环境、编辑器、前端框架（React），指定前端文件夹路径（如./frontend）。

2. 添加Express Lambda后端 #

amplify add api

• 选择REST类型，命名API
• 选择Create a new Lambda function → Serverless Express function，输入Lambda名称
• 找到Amplify生成的Lambda文件夹（通常在amplify/backend/function/[你的Lambda名称]/src），替换其中的代码为你的app.js及依赖
• 配置API路径（如/items）与Lambda的关联，执行amplify push部署后端

3. 配置MySQL数据库（AWS RDS） #

• 进入Amplify控制台 → 后端环境 → 添加资源 → 选择Database
• 选择MySQL，配置实例（测试可选免费层），设置用户名、密码并保存
• 进入Lambda控制台，给对应Lambda添加环境变量：DB_HOST、DB_USER、DB_PASSWORD、DB_NAME，避免代码硬编码数据库信息

4. 前端配置API地址 #

通过Amplify控制台API部分获取后端端点，在React项目中配置：

// src/api.js
const API_ENDPOINT = process.env.REACT_APP_API_ENDPOINT;

export const fetchData = async () => {
  const response = await fetch(`${API_ENDPOINT}/items`);
  return response.json();
};

在前端.env文件添加REACT_APP_API_ENDPOINT=[你的API端点]，或通过Amplify环境变量注入。

5. 部署前端 #

• 代码推送到GitHub仓库
• Amplify控制台选择连接应用，关联你的GitHub仓库
• 确认构建配置正确后启动部署，部署完成后添加路由重写规则（参考第二部分第1点）

6. 测试验证 #

• 访问Amplify生成的前端URL，确认页面加载正常
• 测试API调用，验证是否能从MySQL数据库获取数据

四、常见排查点 #

• 查看Amplify构建日志，排查依赖安装、构建命令是否出错
• 查看Lambda的CloudWatch日志，检查数据库连接、API逻辑是否有报错
• 确认前端API端点正确，Amplify会自动配置CORS，无需额外处理跨域

内容的提问来源于stack exchange，提问作者funeral of tech