Vibe Coding项目 - III
构建聊天机器人前端
使用我们在上一个练习中已有的 MyVibeChatbot 项目，指导 Kiro 构建聊天机器人界面。
构建一个简单的聊天机器人 UI，具有以下要求：
- 我希望文件托管在 S3 上并由 CloudFront 提供服务。
- 出于安全原因，我不希望公开访问我的 S3 存储桶。
- 此外，不要为 S3 存储桶启用版本控制。
聊天机器人 UI 通过 POST 请求与后端交互。
我们将在后续步骤中单独构建后端。
当用户输入消息时，聊天机器人 UI 不发送 POST 请求，而是简单地响应一个 ACK。
请使用 CloudFormation 部署所有内容，并对所有资源使用 "kiro-workshop" 作为前缀。
只需创建所有必需的文件。暂时不要部署。
部署聊天机器人前端
指示 Kiro 部署它:
现在为我部署 CloudFormation 堆栈
打开 AWS 账户，选择正确的区域，并找到 CloudFormation 堆栈。部署可能需要一些时间才能完成。
但是，如果花费时间太长，请检查 CloudFormation 堆栈以找出阻止部署的原因。我们可能需要指导 Kiro 修复任何错误并重新部署。
测试和迭代
- 我们应该能够从输出中找到类似 “https://xxxx.cloudfront.net” 的 URL。将 URL 粘贴到浏览器中，体验我们的聊天机器人。当我们输入任何文本时，聊天机器人应该回复类似 “ACK” 的内容。
- 我们还应该能够找到更新的架构图。
一旦我们确认了这两点，与 Kiro 迭代地完善聊天机器人 UI：
- 审查初始部署
- 测试聊天机器人界面
- 提供改进反馈
- 迭代直到我们有一个可行的解决方案
我们会看到 Kiro 犯错并自动修复它们。这是正常的，也是开发过程的一部分。提供指导和反馈，帮助 Kiro 达到最佳解决方案。
常见问题排查
问题：部署前端更新后，由于 CloudFront 缓存，我们看到的是之前的版本。
解决方案：要求 Kiro 在部署后使 CloudFront 缓存失效。
部署新版本后，请使 CloudFront 缓存失效，以便用户可以立即看到更新的前端。
架构概述
我们完成的部署遵循这种安全架构模式：
┌─────────────┐ ┌─────────────────┐ ┌─────────────────────┐ ┌─────────────────┐
│ 互联网 │───▶│ CloudFront │───▶│ 源访问控制 │───▶│ 私有 S3 │
│ 用户 │ │ 分配 │ │ (OAC) │ │ 存储桶 │
└─────────────┘ └─────────────────┘ └─────────────────────┘ └─────────────────┘
│ │
▼ ▼
┌─────────────────┐ ┌─────────────────┐
│ 仅 HTTPS │ │ 静态文件 │
│ 全球 CDN │ │ (HTML/CSS/JS) │
└─────────────────┘ └─────────────────┘
│
▼
┌─────────────────┐
│ 聊天机器人 UI │
│ (前端) │
└─────────────────┘
│
▼
┌─────────────────┐
│ 未来： │
│ API Gateway + │
│ Lambda │
└─────────────────┘
下一步
随着我们的安全聊天机器人前端部署完成，我们已准备好在下一个练习中构建后端服务。我们将与 Kiro 合作，使用 AWS Lambda 和 API Gateway 创建一个无服务器后端 API，该 API 将处理来自我们前端的聊天请求，并为以后添加 AI 智能提供基础。
┌───────────────────┐ ┌──────────────────┐
│ 聊天机器人 UI │═══▶│ 聊天机器人服务 │
│ (前端) │ │ (后端) │
│ │ │ │
│ • 聊天界面 │ └──────────────────┘
│ • S3 + CloudFront │ 下一步
│ • 安全托管 │
└───────────────────┘
已完成