企业官网建设流程全解析

如何把 Claude Customer Support Agent 部署到 AWS Amplify 并配置 Bedrock 服务角色权限？

【免费下载链接】claude-quickstartsA collection of projects designed to help developers quickly get started with building deployable applications using the Claude API项目地址: https://gitcode.com/GitHub_Trending/an/claude-quickstarts

customer-support-agent是 claude-quickstarts 仓库里的一个客服聊天应用：前端是 Next.js 聊天页面，后端调用 Claude 模型生成回复，同时通过 Amazon Bedrock Knowledge Bases 检索知识库内容作为上下文（RAG）。把它部署到 AWS Amplify 时，README 要求做两件额外的事：把 Anthropic 密钥和 AWS 凭证传入构建环境，并让 Amplify 的服务角色具备访问 Amazon Bedrock 的权限。本文按项目 README 中 "Deploy with AWS Amplify"、"Service Role" 和 "How to Get Your Keys" 几节整理这条路径。

文档给出的前提条件：

• 一个已开通 Amazon Bedrock 访问权限的 AWS 账号；
• 一个 Anthropic Claude API Key；
• Node 版本满足 package.json 中engines.node: >=18.17.0的要求。

部署前：创建知识库并准备密钥

创建 Bedrock 知识库并获取 ID

README 中的创建流程（在 AWS Console 中操作）：

1. 选择 Amazon Bedrock，在左侧菜单 "More" 下点击 "Knowledge base"。
2. 点击 "Create knowledge base"，给知识库命名；文档说明可以保留 "Create a new service role" 选项。
3. 选择数据来源。文档示例使用 Amazon S3；如果使用 S3，需要先创建 bucket 上传文件，也可以在建库之后再上传。
4. 选择存储位置：可以是 S3 bucket、文件夹，甚至单个文档。
5. 选择 embedding 模型（文档示例使用 Titan Text Embeddings 2），然后选择 "Quick create a new vector store"。
6. 确认创建，完成后在知识库概览页（knowledge base overview）复制知识库 ID。

拿到 ID 后，写入 ChatArea.tsx 中的knowledgeBases数组，这是应用运行时用来做上下文检索的知识库定义：

const knowledgeBases: KnowledgeBase[] = [ { id: "your-knowledge-base-id", name: "Your KB Name" }, // Add more knowledge bases as needed ];

上面的your-knowledge-base-id与Your KB Name是 README 原文中的占位值，需要替换为你自己的知识库 ID 和名称。

一个容易踩坑的点：应用在 utils.ts 中创建 Bedrock 客户端时写死了region: "us-east-1"，代码注释要求 "Make sure this matches your Bedrock region"。也就是说，知识库所在区域必须与代码连接的区域一致，否则检索会失败。

获取 Claude API Key

README 给出的步骤：登录 console.anthropic.com，点击 "Get API keys"，复制密钥备用。

创建带 AmazonBedrockFullAccess 的 IAM 用户并取得 Access Key

构建配置和高级设置中需要填 AWS 凭证，README 的 "How to Get Your Keys" 一节给出获取流程：

1. 登录 AWS Management Console，进入 IAM 控制台，在左侧边栏点击 "Users"。
2. 点击 "Create user"，在 Set Permission 页面选择 "Attach policies directly"，权限页选择AmazonBedrockFullAccess策略。
3. 审阅并创建用户；在 Summary 页面点击 "Create access key"，类型选择 "Application running on an AWS compute service"，填写描述（可选）后创建。
4. 页面会显示 Access Key ID 和 Secret Access Key。README 特别强调：Secret 只在创建时可见一次，务必当场妥善保存。

部署前（可选）：先本地跑一遍验证

在提交 Amplify 部署之前，可以先按 README 的 "Getting Started" 在本地确认密钥和知识库配置正确：

1. 克隆仓库后执行npm install。
2. 在根目录创建.env.local：

ANTHROPIC_API_KEY=your_anthropic_api_key BAWS_ACCESS_KEY_ID=your_aws_access_key BAWS_SECRET_ACCESS_KEY=your_aws_secret_key

三个值分别替换为你的 Anthropic 密钥、上一步创建的 Access Key ID 和 Secret Access Key。

3. 执行npm run dev，打开http://localhost:3000。

判断依据有两处。其一，README 的 Key Features 列出了 "Real-time thinking & debug information display" 和 "Knowledge base source visualization"，聊天页会展示每轮对话的调试信息和 RAG 来源；在界面上能看到 RAG 检索结果，说明密钥与知识库 ID 都生效了。其二，服务端日志会输出密钥检测行，来自 utils.ts：

🔑 Have AWS AccessKey? true/false 🔑 Have AWS Secret? true/false

这两行为true、且页面调试区能看到 RAG 上下文时，再进入 Amplify 部署比较稳妥。

在 AWS Amplify 中创建应用并部署

README 的部署步骤：

1. 在 AWS Console 中选择 Amplify，点击 "Create new app"。
2. 选择 GitHub（或你偏好的 provider）作为代码源。
3. 选择本仓库。
4. 编辑 YAML 构建文件。仓库中对应的文件是 amplify.yml，内容与 README 一致：

version: 1 frontend: phases: preBuild: commands: - npm ci --cache .npm --prefer-offline build: commands: - npm run build # Next.js build runs first - echo "ANTHROPIC_API_KEY=$ANTHROPIC_API_KEY" >> .env - echo "KNOWLEDGE_BASE_ID=$KNOWLEDGE_BASE_ID" >> .env - echo "BAWS_ACCESS_KEY_ID=$BAWS_ACCESS_KEY_ID" >> .env - echo "BAWS_SECRET_ACCESS_KEY=$BAWS_SECRET_ACCESS_KEY" >> .env artifacts: baseDirectory: .next files: - "**/*" cache: paths: - .next/cache/**/* - .npm/**/*

各段的作用：preBuild用.npm缓存执行npm ci；build阶段先跑npm run build（按 README "NPM Scripts" 一节，这是默认的全量应用构建，即左右侧边栏都启用），随后把环境变量写入.env，供服务端运行时读取；产物目录是 Next.js 构建输出的.next；缓存覆盖.next/cache和.npm。

5. 选择创建新的服务角色，或使用已有角色（权限配置见下一节）。
6. 点击 "Advanced settings"，添加环境变量：

ANTHROPIC_API_KEY=your_anthropic_api_key BAWS_ACCESS_KEY_ID=your_aws_access_key BAWS_SECRET_ACCESS_KEY=your_aws_secret_key

AWS 凭证变量名前面的B是有意的：README 解释，AWS 不允许 Amplify 中的变量名以 "AWS" 开头，所以改用BAWS_前缀；应用代码读取的正是BAWS_ACCESS_KEY_ID和BAWS_SECRET_ACCESS_KEY（见 utils.ts）。注意 YAML 的 build 步骤还会写入KNOWLEDGE_BASE_ID，而 README 在 Advanced settings 中只列出了上面三个变量，是否需要配置由你的实际情况决定。

7. 点击 "Save and deploy" 启动部署。

为 Amplify 服务角色配置 AmazonBedrockFullAccess

部署完成后，如果上一步选择了"创建新服务角色"，README 的 "Service Role" 一节要求手动补权限：

1. 进入 deployments 页面。
2. 选择刚创建的部署。
3. 点击 "App settings"。
4. 复制 Service role ARN。
5. 到 IAM 控制台按这个 ARN 找到该角色。
6. 为角色挂载AmazonBedrockFullAccess策略。

README 对此步骤的说明是：这确保你的 Amplify 应用具备与 Amazon Bedrock 交互所需的权限。没有这一步，线上环境的 Bedrock 检索调用就会因角色无权限而失败。

验证部署结果

按文档，可以从三个层面确认部署完成：

• 部署流程：点击 "Save and deploy" 后进入部署过程，README 对完成的表述是 "Your application will now be deployed using AWS Amplify"。
• 权限配置：服务角色上已挂载AmazonBedrockFullAccess策略，这是文档给出的权限侧成功条件。
• 运行时 RAG 状态：与本地验证相同，聊天页的调试信息展示每轮 RAG 结果；如果检索失败，route.ts 中的服务端日志会输出🚨 RAG Retrieval failed but did not throw!或RAG Error: ...，此时应优先核对知识库 ID 是否写入了ChatArea.tsx、AWS 凭证变量是否正确传入、以及知识库区域是否与代码中写死的us-east-1一致。

限制

• README 附录明确声明：本项目是原型（prototype），按 "as-is" 提供，不面向生产使用，可能包含 bug、错误或不一致之处，不附带任何担保。把它当作学习和快速搭建的起点，而不是可直接投产的方案。
• Bedrock 区域在代码中硬编码为us-east-1（utils.ts），知识库必须建在同一区域；README 建库一节则说 "your desired AWS region"，实际以代码注释为准。

【免费下载链接】claude-quickstartsA collection of projects designed to help developers quickly get started with building deployable applications using the Claude API项目地址: https://gitcode.com/GitHub_Trending/an/claude-quickstarts