搭载AWS Amplify的Next.js应用在Netlify/Vercel部署失败求助

本地运行正常的Next.js应用（搭载AWS Amplify，所有页面通过getServerSideProps以Serverless函数运行），部署到Netlify或Vercel后无法访问/login等页面，两个平台出现相同报错。已尝试配置AWS环境变量但未解决问题。

相关配置文件 #

package.json #

{
  "name": "test",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@aws-amplify/ui-react": "^4.3.6",
    "@emotion/react": "^11.11.0",
    "@emotion/styled": "^11.11.0",
    "@fortawesome/fontawesome-svg-core": "^6.2.1",
    "@fortawesome/free-regular-svg-icons": "^6.2.1",
    "@fortawesome/react-fontawesome": "^0.2.0",
    "@headlessui/react": "^1.7.13",
    "@material-tailwind/react": "^1.2.5",
    "@reduxjs/toolkit": "^1.9.3",
    "@szhsin/react-menu": "^3.4.1",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "@types/googlemaps": "^3.43.3",
    "@types/jest": "^27.5.2",
    "@types/node": "^16.18.11",
    "@types/react": "^18.0.27",
    "@types/react-dom": "^18.0.10",
    "@types/react-fontawesome": "^1.6.5",
    "antd": "^5.5.0",
    "autoprefixer": "^10.4.13",
    "aws-amplify": "^5.1.1",
    "aws-appsync-codegen": "^0.17.5",
    "cookies-next": "^2.1.1",
    "graphql-tag": "^2.12.6",
    "jose": "^4.13.1",
    "next": "^13.1.6",
    "next-redux-cookie-wrapper": "^2.2.1",
    "next-redux-wrapper": "^8.1.0",
    "next-seo": "^5.15.0",
    "rc-collapse": "^3.5.2",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-hook-form": "^7.43.9",
    "react-icons": "^4.7.1",
    "react-lazy-load-image-component": "^1.5.6",
    "react-redux": "^8.0.5",
    "react-slick": "^0.29.0",
    "react-use-websocket": "^4.3.1",
    "slick-carousel": "^1.8.1",
    "tw-elements": "^1.0.0-alpha13",
    "tw-to-css": "^0.0.11",
    "typescript": "^4.9.4",
    "uuid": "^9.0.0",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "dev": "next dev",
    "start": "next start",
    "build": "next build",
    "lint": "eslint --fix \"**/*.{ts,tsx}\"",
    "codegen": "aws-appsync-codegen generate src/graphql/operations/*.ts --schema backend/lib/appsync/build/schema.json --target typescript --output src/graphql/types/types.ts"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@types/react-lazy-load-image-component": "^1.5.2",
    "@types/react-slick": "^0.23.10",
    "@types/uuid": "^9.0.1",
    "eslint": "^8.33.0",
    "eslint-config-next": "13.0.4",
    "sass": "^1.62.1",
    "tailwindcss": "^3.2.4"
  }
}

Amplify初始化代码 #

Amplify.configure({ amplifyConfig, ssr: true });

amplifyConfig结构示例：

{
 aws_project_region: '***********************',
 aws_cognito_identity_pool_id: '***********************',
 aws_cognito_region: '***********************',
 aws_user_pools_id: '***********************',
 aws_user_pools_web_client_id: '***********************',
}

排查解决思路 #

• 完善Amplify SSR配置：Next.js SSR环境下，Amplify需要处理服务器端的认证状态传递。在getServerSideProps中初始化时，需传入请求上下文的cookie和域名信息，确保认证状态在服务器端正确同步：

  export async function getServerSideProps(context) {
    Amplify.configure({
      ...amplifyConfig,
      ssr: true,
      auth: {
        cookieStorage: {
          cookiePath: '/',
          cookieDomain: context.req.headers.host.split(':')[0],
          cookieSecure: process.env.NODE_ENV === 'production',
        },
      },
    });
    // 后续业务逻辑
  }
  

• 检查环境变量注入有效性：
  • 改用环境变量动态生成amplifyConfig，避免硬编码敏感信息：

    const amplifyConfig = {
      aws_project_region: process.env.NEXT_PUBLIC_AWS_PROJECT_REGION,
      aws_cognito_identity_pool_id: process.env.NEXT_PUBLIC_AWS_COGNITO_IDENTITY_POOL_ID,
      aws_cognito_region: process.env.NEXT_PUBLIC_AWS_COGNITO_REGION,
      aws_user_pools_id: process.env.NEXT_PUBLIC_AWS_USER_POOLS_ID,
      aws_user_pools_web_client_id: process.env.NEXT_PUBLIC_AWS_USER_POOLS_WEB_CLIENT_ID,
    };
    

  • 确认Netlify/Vercel中环境变量已正确配置：前端需访问的变量添加NEXT_PUBLIC_前缀；服务器端专用变量无需前缀，但要确保Serverless函数运行时能读取到。
• 验证版本兼容性：当前aws-amplify@5.1.1与next@13.1.6可能存在适配问题，尝试升级Amplify至最新稳定版，或降级到官方文档标注的兼容版本。
• 配置Serverless函数权限：确保Netlify/Vercel的Serverless函数拥有访问AWS Cognito的权限：
  • 若使用IAM角色，需添加允许cognito-idp:*、cognito-identity:*等操作的政策；
  • 若使用访问密钥，需在平台环境变量中设置AWS_ACCESS_KEY_ID和AWS_SECRET_ACCESS_KEY，且对应IAM用户具备必要权限。
• 分析报错日志细节：从Serverless日志中提取关键错误信息（如认证失败、配置缺失、网络请求异常），针对性排查。例如：
  • 日志显示"User pool not found"：检查aws_user_pools_id和区域配置是否正确；
  • 日志显示"Invalid token"：排查cookie传递逻辑和SSR下的认证状态同步是否正常。
• 适配Next.js App Router：若使用Next.js 13的App Router，需按照Amplify官方文档调整初始化逻辑，比如在layout.tsx中使用AmplifyServer进行服务器端配置，而非传统的Amplify.configure。

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