如何为Next.js应用配置AWS凭证？解决本地与部署的凭证缺失问题

核心问题排查与解决步骤 #

环境变量未被正确注入应用，或SDK读取的变量名不匹配，分场景处理：

1. 前端项目环境变量前缀要求 #

如果是React/Vue等前端框架，环境变量必须带框架指定前缀才会被打包注入：

• React：变量名以REACT_APP_开头，比如REACT_APP_MY_ACCESS_KEY_ID
• Vue(Vite)：变量名以VITE_开头，比如VITE_MY_ACCESS_KEY_ID

修改.env文件内容：

REACT_APP_MY_ACCESS_KEY_ID=你的密钥ID
REACT_APP_MY_SECRET_ACCESS_KEY=你的密钥
REACT_APP_AWS_REGION=us-west-1

2. AWS SDK v3 显式指定变量名 #

确保从@aws-sdk/credential-providers导入fromEnv，手动指定要读取的环境变量，避免默认规则不匹配：

import { S3Client } from "@aws-sdk/client-s3";
import { fromEnv } from "@aws-sdk/credential-providers";

const client = new S3Client({
  region: process.env.REACT_APP_AWS_REGION,
  credentials: fromEnv({
    accessKeyIdSelector: () => process.env.REACT_APP_MY_ACCESS_KEY_ID,
    secretAccessKeySelector: () => process.env.REACT_APP_MY_SECRET_ACCESS_KEY,
  }),
});

3. 本地开发环境变量加载 #

• 确保.env文件放在项目根目录，且.env已加入.gitignore（避免提交密钥）
• 修改.env后必须重启开发服务器，否则新变量不会生效
• 确认dotenv正确引入：在项目入口文件顶部添加

  // CommonJS
  require('dotenv').config();
  // ES模块
  import 'dotenv/config';
  

4. AWS Amplify 部署配置 #

在Amplify控制台配置环境变量：

1. 进入你的应用 → App Settings → Environment variables
2. 添加对应变量（比如REACT_APP_MY_ACCESS_KEY_ID和REACT_APP_MY_SECRET_ACCESS_KEY）
3. 重新触发构建，Amplify会自动将变量注入构建环境

5. 安全提醒 #

前端直接暴露AWS访问密钥存在泄露风险，推荐改用：

• 使用Amplify Storage服务，无需手动管理凭证
• 后端生成S3预签名URL，前端通过预签名URL上传文件
• 后端部署在AWS时，使用IAM角色而非环境变量传递凭证

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