NextJs应用部署AWS后出现Amplify GraphQL无凭据错误

问题分析 #

本地运行完全正常，但部署到AWS后，pages/api/下的callback.js调用AppSync GraphQL时出现No Credentials错误，核心原因是：

• Next.js的API路由运行在服务器端(Node.js环境)，而_app.js中的Amplify配置仅作用于客户端浏览器环境，服务器端代码不会自动继承该配置
• 服务器端执行的API路由需要单独初始化Amplify，否则无法获取到API Key等认证信息

解决方案 #

1. 在API路由中单独初始化Amplify #

修改callback.js，在代码开头手动配置Amplify（适配服务器端环境）：

import { Amplify, API, graphqlOperation } from 'aws-amplify';
import config from '../../../aws-exports'; // 注意：根据你的项目目录结构调整路径
import { getAuth } from "../../../../src/graphql/queries"

// 服务器端专属Amplify初始化
Amplify.configure({
  ...config,
  ssr: true, // 启用SSR模式，确保在Node环境下正常工作
});

export default async function callback(req, res) {
  try {
    const record = await API.graphql(graphqlOperation(getAuth, {emailId: "abc@gmail.com"}))
    res.status(200).json({ record });
  } catch (error) {
    console.error('请求失败:', error);
    res.status(500).json({ error: error.message });
  }
}

2. 验证aws-exports.js路径正确性 #

部署时需确保aws-exports.js被正确打包到服务器端代码中：

• 检查导入路径是否与项目实际结构匹配（比如API路由在pages/api/auth/callback.js，根目录的aws-exports.js路径应为../../../aws-exports）
• 构建完成后，查看.next目录下是否包含正确的aws-exports.js文件

3. 确认AppSync API Key有效性 #

登录AWS控制台，检查AppSync的API Key状态：

• 确保API Key未过期、处于启用状态
• 核对aws-exports.js中的aws_appsync_apiKey与控制台中的值一致

4. 可选：用环境变量替代硬编码配置 #

如果担心aws-exports.js中的密钥暴露，可将配置项移至AWS环境变量：

1. 在AWS Amplify控制台的「环境变量」中添加：
   • AWS_REGION：你的区域（如us-east-1）
   • APPSYNC_ENDPOINT：AppSync GraphQL端点
   • APPSYNC_API_KEY：你的API Key
2. 修改callback.js的初始化代码：

   Amplify.configure({
     aws_project_region: process.env.AWS_REGION,
     aws_appsync_graphqlEndpoint: process.env.APPSYNC_ENDPOINT,
     aws_appsync_region: process.env.AWS_REGION,
     aws_appsync_authenticationType: "API_KEY",
     aws_appsync_apiKey: process.env.APPSYNC_API_KEY,
     ssr: true,
   });
   

为什么本地正常？ #

本地开发时，Next.js开发服务器会共享客户端的文件上下文，API路由能间接读取到aws-exports.js的配置；但生产部署后，服务器端代码与客户端代码完全分离，必须单独初始化Amplify才能获取认证信息。

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