如何通过API Gateway暴露AWS Lambda中的React静态文件目录？

核心问题原因 #

API Gateway仅配置了根路径/的GET集成，当请求静态资源（如/main.js、/static/css/main.css）时，API Gateway找不到对应的资源路由，直接返回403。同时Lambda Handler当前仅处理根路径请求，未适配静态资源路径的文件读取逻辑。

解决步骤 #

1. 配置API Gateway通配符资源与集成 #

• 登录AWS控制台，进入目标API Gateway的REST API
• 在根资源/下创建新资源，资源路径填写/{proxy+}（通配符匹配所有子路径请求）
• 为/{proxy+}资源添加GET方法，选择Lambda代理集成，关联到已有的React静态应用Lambda函数
• 重新部署API到指定阶段（如prod）

2. 修改Lambda Handler适配静态资源请求 #

更新Lambda代码，使其能根据请求路径读取对应静态文件，并返回正确的响应头：

const fs = require('fs');
const path = require('path');

exports.handler = async (event) => {
  // 处理根路径或React路由路径，默认返回index.html
  let requestPath = event.path === '/' ? '/index.html' : event.path;
  const fullFilePath = path.join(__dirname, 'build', requestPath);

  try {
    // 读取目标文件
    const fileBuffer = fs.readFileSync(fullFilePath);
    // 根据文件后缀设置Content-Type
    let contentType = 'text/html';
    const ext = path.extname(requestPath).toLowerCase();
    switch (ext) {
      case '.js':
        contentType = 'application/javascript';
        break;
      case '.css':
        contentType = 'text/css';
        break;
      case '.png':
        contentType = 'image/png';
        break;
      case '.jpg':
      case '.jpeg':
        contentType = 'image/jpeg';
        break;
      case '.svg':
        contentType = 'image/svg+xml';
        break;
      case '.json':
        contentType = 'application/json';
        break;
    }

    return {
      statusCode: 200,
      headers: {
        'Content-Type': contentType,
        'Cache-Control': 'public, max-age=31536000' // 静态资源开启长期缓存
      },
      body: fileBuffer.toString('base64'),
      isBase64Encoded: true
    };
  } catch (error) {
    // 文件不存在时返回index.html，适配React单页路由
    const indexBuffer = fs.readFileSync(path.join(__dirname, 'build', 'index.html'));
    return {
      statusCode: 200,
      headers: { 'Content-Type': 'text/html' },
      body: indexBuffer.toString()
    };
  }
};

3. 确认打包配置正确性 #

如果使用CDK的NodejsFunction，确保commandHooks正确将React build目录复制到Lambda部署包中：

import { NodejsFunction } from 'aws-cdk-lib/aws-lambda-nodejs';

const reactStaticLambda = new NodejsFunction(this, 'ReactStaticLambda', {
  entry: './src/handler.js',
  commandHooks: {
    postInstall: (inputDir, outputDir) => {
      // 将项目根目录下的build文件夹复制到Lambda打包目录
      return [`cp -r ${inputDir}/../build ${outputDir}/build`];
    }
  }
});

注意：根据你的项目目录结构调整cp命令的路径，确保build目录最终出现在Lambda代码的同级目录下。

4. 验证配置 #

• 重新部署Lambda和API Gateway
• 访问应用根路径，检查静态资源加载状态；测试React路由路径（如/about），确认能正常返回index.html并渲染路由内容

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