Next.js添加getServerSideProps后AWS Amplify出现503错误求助

我用Next.js开发的项目部署在AWS Amplify上原本正常，为了SEO在pages/categories/[categoriesId]/[nftId].tsx中添加getServerSideProps调用Lambda接口获取数据后，该路由触发503错误。本地运行完全正常，但Amplify日志显示timeout after 30.2 seconds。已将Lambda函数超时调整为1分钟，问题仍存在。

相关代码：

const NftDetails = dynamic(() => import('../../../components/NFTDetails'));
import dynamic from 'next/dynamic';

const CategoryNFT = (data: any) => {
  return <NftDetails props={data} />;
};
export default CategoryNFT;

export const getServerSideProps = async (context: any) => {
  const { nftId } = context.query;
  console.log('NFT ID ----> ', nftId);
  let requestOptions = {
    method: 'GET',
    headers: {
      'Content-Type': 'application/json',
    },
  };
  const res = await fetch(
    `https://******.amazonaws.com/test/asset/get-asset-by-id?asset_id=${nftId}`,
    requestOptions
  );
  const data = await res.json();
  console.log(data);
  return {
    props: { data },
  };
};

排查与解决步骤 #

1. 调整Amplify的SSR超时限制 #

AWS Amplify对Next.js的SSR流程（含getServerSideProps）有独立的30秒默认超时，和Lambda自身的超时设置不关联。哪怕把Lambda调到1分钟，Amplify的SSR进程还是会在30秒时截断请求，引发503。

解决方法：在项目根目录创建/修改amplify.yml，添加超时配置：

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - npm install
    build:
      commands:
        - npm run build
  artifacts:
    baseDirectory: .next
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*
framework:
  version: 'nextjs'
  env:
    variables:
      AMPLIFY_NEXTJS_SSR_TIMEOUT: 60000 # 设置为60秒（单位毫秒）

部署该配置后，Amplify的SSR超时会和你的Lambda超时匹配。

2. 检查Lambda的VPC网络配置 #

如果你的Lambda配置了VPC，Amplify的SSR运行环境（属于公网计算环境）可能无法穿透VPC访问Lambda端点——本地能正常访问是因为你的开发环境可能在VPC内或有VPN连接，而Amplify的SSR进程在公网。

解决方法：

• 若Lambda不需要VPC，直接移除VPC配置，改为公网可访问（同时确保接口通过IAM权限限制访问，避免暴露给所有人）。
• 若必须保留VPC，配置VPC端点（如AWS PrivateLink）或NAT网关，让Amplify的SSR环境能访问VPC内的资源。

3. 优化Lambda执行速度 #

即使延长超时，慢执行也会影响用户体验，且Amplify的超时上限存在限制（最大通常为90秒），优先优化速度更稳妥：

• 检查Lambda内部的数据库查询，添加必要索引消除慢查询。
• 裁剪返回数据，只返回前端需要的字段，减少数据传输量。
• 开启Lambda的预配置并发（Provisioned Concurrency），避免冷启动延迟。

4. 验证Amplify的IAM权限 #

本地运行用的是你的个人AWS凭证，而Amplify部署后用的是自身的服务角色，可能缺少调用Lambda的权限。

解决方法：

• 找到Amplify项目对应的IAM角色（在IAM控制台，角色名格式一般为amplify-<项目名>-<环境名>-<数字>-unauthRole或authRole，也可在Amplify控制台的权限页查看）。
• 给该角色添加调用目标Lambda的权限，示例策略：

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Effect": "Allow",
      "Action": "lambda:InvokeFunction",
      "Resource": "arn:aws:lambda:<区域>:<账号ID>:function:<你的Lambda函数名>"
    }
  ]
}

如果是通过API Gateway调用Lambda，还需给角色添加调用API Gateway的权限。

5. 添加错误捕获排查具体问题 #

超时可能是Lambda调用失败后重试导致的，添加错误捕获能定位真实问题：
修改getServerSideProps：

export const getServerSideProps = async (context: any) => {
  try {
    const { nftId } = context.query;
    console.log('NFT ID ----> ', nftId);
    let requestOptions = {
      method: 'GET',
      headers: {
        'Content-Type': 'application/json',
      },
    };
    const res = await fetch(
      `https://******.amazonaws.com/test/asset/get-asset-by-id?asset_id=${nftId}`,
      requestOptions
    );
    
    if (!res.ok) {
      throw new Error(`API响应错误: ${res.status} ${res.statusText}`);
    }
    
    const data = await res.json();
    console.log(data);
    return {
      props: { data },
    };
  } catch (error) {
    console.error('getServerSideProps执行错误:', error);
    return {
      props: { data: null },
    };
  }
};

部署后查看Amplify日志，就能看到具体的错误原因，而不是只看到超时提示。

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