如何在AWS Amplify部署的React应用中配置aws_access_key_id等凭证

核心安全风险提示 #

你当前的实现思路存在严重安全隐患。React应用是纯前端应用，打包后所有代码会下发到用户浏览器运行，若把长期有效AWS凭证直接打包进构建产物中，所有访问你站点的用户都可以通过调试工具获取到你的access_key_id和secret_access_key，完全可以随意操作你的DynamoDB资源，生产环境绝对不能这么用。

配置不生效的直接原因 #

create-react-app的REACT_APP_前缀环境变量是构建时静态替换的，执行npm run build时会直接把代码里的process.env.xxx替换成对应静态值。你之前的构建命令顺序错误，先执行npm run build再往.env文件写入变量，build阶段根本读不到还没生成的.env内容，自然变量为空。

另外Elastic Beanstalk运行的是服务端应用，凭证只会存在于服务端进程环境中不会暴露给用户，而Amplify默认托管的是静态前端资源，不可能自动注入长期凭证，也不具备服务端的相关逻辑。

临时测试场景的修复方案（仅测试用，生产环境禁用） #

如果只是临时测试不需要考虑安全，可以按以下步骤调整：

1. 打开AWS Amplify控制台，进入对应应用的「环境变量」配置页，新增两个变量：REACT_APP_AWS_ACCESS_KEY_ID、REACT_APP_AWS_SECRET_ACCESS_KEY，填入对应凭证值，敏感标记不影响构建读取。
2. 修改Amplify构建设置，调整命令顺序，把写入.env的步骤提前到build之前：

build:
  commands:
    - echo "REACT_APP_AWS_ACCESS_KEY_ID=$REACT_APP_AWS_ACCESS_KEY_ID" >> .env
    - echo "REACT_APP_AWS_SECRET_ACCESS_KEY=$REACT_APP_AWS_SECRET_ACCESS_KEY" >> .env
    - npm run build

调整后重新构建即可生效，不需要修改package.json里的build脚本。

生产环境标准实现方案 #

生产环境不要让前端直接访问DynamoDB，推荐两种方案：

• 方案1：使用Cognito身份池分配临时凭证
  1. 开通Cognito身份池，为未认证/已认证用户配置对应IAM角色，仅开放DynamoDB的必要操作权限
  2. 前端通过AWS SDK获取Cognito签发的临时、权限受限的凭证初始化DynamoDB客户端，配置示例：

  import { CognitoIdentityClient, GetIdCommand, GetCredentialsForIdentityCommand } from "@aws-sdk/client-cognito-identity";
  import { DynamoDB } from "@aws-sdk/client-dynamodb";
  
  const cognitoClient = new CognitoIdentityClient({ region: "us-east-1" });
  const identityId = await cognitoClient.send(new GetIdCommand({ IdentityPoolId: "你的身份池ID" }));
  const credentials = await cognitoClient.send(new GetCredentialsForIdentityCommand({ IdentityId: identityId.IdentityId }));
  const client = new DynamoDB({
    region: 'us-east-1',
    credentials: credentials.Credentials
  });
  

• 方案2：新增后端代理层
  用API Gateway + Lambda封装DynamoDB操作，前端只调用你自己的API接口，Lambda执行角色默认自动获得AWS凭证，不需要你手动配置任何密钥，完全避免密钥泄露风险。

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