用 AI Shell 开发并部署抽奖大转盘应用

本案例完整记录了使用华为云 AI Shell，通过自然语言描述需求，让 AI 自动完成代码开发、查询云资源、部署应用的全流程。

案例背景

AI Shell 是华为云开发者空间提供的 AI 辅助开发工具，它是一个完整的 AI Agent，具备以下能力：

• 🤖 自然语言理解：用中文描述需求，AI 自动生成代码
• 🔍 云资源查询：可查询华为云 ECS、Flexus 等资源信息
• 🚀 自动部署：可直接部署应用到指定的云服务器
• 💻 终端操作：可执行 Shell 命令、安装依赖、启动服务

核心优势：开发者只需描述"做什么"，AI Shell 自动完成"怎么做"。

完整操作流程

步骤 1：进入 AI Shell

1. 访问华为云开发者空间 AI Shell 入口：

   https://devstation.connect.huaweicloud.com/aishell
   

2. 使用华为云账号登录

实际操作截图：

【界面说明】 首次进入 AI Shell 时会弹出"临时凭据自动配置"对话框，询问是否将 AK/SK 同步到 AI Shell 环境。点击"同意"按钮继续。

首次进入时会弹出"临时凭据自动配置"对话框，询问是否将 AK/SK 同步到 AI Shell 环境。

点击"同意"按钮，AI Shell 会自动配置华为云访问凭据，后续可直接操作云资源。

步骤 2：认识 AI Shell 界面

同意后，AI Shell 进入主界面：

【界面说明】 AI Shell 主界面包含：Session ID（会话标识）、Context tokens（上下文大小）、Plans（执行计划列表）、Thinking…（执行状态）、底部输入框（自然语言指令输入）。

界面包含以下区域：

┌─────────────────────────────────────────────────────────┐
│  Session: 01KW9MKVCSJE8K66DQ72WDBW3T                   │  ← 会话ID
│  Context: 8,171 tokens                                 │  ← 上下文大小
├─────────────────────────────────────────────────────────┤
│  Plans:                                                 │
│  [ ] 创建 HTML 页面结构                                 │
│  [ ] 创建 CSS 样式文件                                  │
│  [ ] 创建 JavaScript 逻辑文件                           │
│                                                         │
│  Thinking...                                            │  ← 执行状态
├─────────────────────────────────────────────────────────┤
│  💬 输入你的需求...                        [发送]        │  ← 输入框
└─────────────────────────────────────────────────────────┘

关键区域说明：

• Session ID：当前会话的唯一标识
• Context tokens：AI 的上下文大小（影响记忆能力）
• Plans：AI 制定的执行计划，[✓] 已完成，[ ] 待执行
• Thinking…：AI 正在思考/执行
• 底部输入框：输入自然语言指令的地方

步骤 3：开发抽奖应用

在底部输入框中输入以下自然语言指令：

请帮我开发一个抽奖大转盘网页应用，要求：
1. 创建 HTML、CSS、JavaScript 文件
2. 包含 6 个奖区：一等奖、二等奖、三等奖、四等奖、两个"谢谢参与"
3. 每个奖项有可配置的中奖概率
4. 转盘有平滑的旋转动画和减速效果
5. 界面美观，支持响应式布局
6. 每天限制 3 次抽奖机会

实际操作截图：

【操作说明】 在底部输入框输入自然语言指令后，按 Enter 发送。AI Shell 会解析需求、制定计划、逐步执行。

按 Enter 发送指令后，AI Shell 会：

1. 解析需求：理解你的自然语言描述
2. 制定计划：生成执行计划（Plans 列表）
3. 逐步执行：依次完成每个任务
4. 实时反馈：在终端显示执行过程

步骤 4：处理 Permission Request

重要发现：Permission Request 在终端中显示，不是传统 HTML 对话框！

【关键操作】 Permission Request 在终端中显示，按右箭头键（→）选择 “Allow always”，按回车键（Enter）确认。

当 AI Shell 执行文件创建、命令执行等操作时，会触发 Permission Request：

┃ Permission Request
┃ Write file | lottery/index.html
┃ Allow once   Allow always   Reject once   Reject always

操作方式：

1. 按右箭头键（→）选择 “Allow always”
2. 按回车键（Enter）确认

【操作结果】 处理 Permission Request 后，AI Shell 继续执行任务。

建议选择 “Allow always”，避免后续操作频繁确认。

步骤 5：开发完成

AI Shell 完成后，Plans 显示所有任务已完成：

【完成状态】 AI Shell 完成开发后，Plans 显示所有任务已完成。

完成后的输出：

使用方式
1. 用浏览器打开 lottery/index.html 即可使用
2. 点击中心「抽奖」按钮开始转动
3. 中奖后弹出结果提示框

修改概率配置
编辑 script.js 文件顶部的配置：
const PRIZES = [
    { name: '一等奖', icon: '🏆', probability: 0.05, color: 0 },
    { name: '二等奖', icon: '🎁', probability: 0.10, color: 1 },
    // ...
];

步骤 6：部署到服务器

继续向 AI Shell 发送部署指令：

请将 lottery 文件夹部署到我的华为云服务器：
- 服务器 IP: <YOUR_SERVER_IP>
- SSH 用户名: root
- SSH 密码: <YOUR_PASSWORD>
- 目标目录: /var/www/html/
- 配置 Nginx 提供静态文件服务

【部署指令】 继续向 AI Shell 发送部署指令，提供服务器信息。

AI Shell 会自动：

1. 查询服务器信息
2. 通过 SSH 连接服务器（使用 paramiko）
3. 上传文件到服务器
4. 配置 Nginx
5. 重启 Nginx 服务

步骤 7：验证部署

AI Shell 完成部署后，Plans 显示 “No Plans”：

【最终结果】 AI Shell 完成所有任务，Plans 显示 “No Plans”，应用已成功部署。

实际部署结果：

✅ AI Shell 完成所有任务！

Plans: No Plans

服务器操作:
- 通过 paramiko SSH 连接到服务器
- 上传文件到 /var/www/html/lottery/
- 修改 Nginx 配置
- 重启 Nginx 服务

验证结果:
- URL: https://<YOUR_SERVER_IP>/lottery/index.html
- HTTP 状态: 200 OK
- 文件大小: 1,576 bytes

通过浏览器访问：

https://<YOUR_SERVER_IP>/lottery/

验证抽奖应用是否正常运行。

关键经验总结

1. Permission Request 必须主动处理

问题：AI Shell 执行文件创建、命令执行等操作时会触发 Permission Request，如果不处理会一直等待。

解决：持续监控页面文本，检测到 “Permission Request” 立即处理。

操作方法：

• Permission Request 在终端中显示，不是传统 HTML 对话框
• 按右箭头键（→）选择 “Allow always”
• 按回车键（Enter）确认

代码示例：

from selenium.webdriver.common.keys import Keys
from selenium.webdriver.common.action_chains import ActionChains

# 检测 Permission Request
if "Permission Request" in page_text and "Allow" in page_text:
    terminal = driver.find_element(By.CLASS_NAME, "xterm")
    terminal.click()
    
    actions = ActionChains(driver)
    actions.send_keys(Keys.ARROW_RIGHT).perform()  # 选择 Allow always
    time.sleep(0.3)
    actions.send_keys(Keys.RETURN).perform()  # 确认

2. 部署需要提供明确信息

问题：AI Shell 查询 Flexus 实例时可能失败（hcloud CLI 不支持）。

解决：直接提供服务器 IP、SSH 凭据等信息，让 AI Shell 直接使用。

3. 文件路径要明确

问题：AI Shell 可能找不到本地文件。

解决：明确告知文件路径，例如 “lottery 文件夹在当前工作目录 /root/lottery”。

4. 使用 Selenium 连接已有浏览器

问题：使用 browserbase 等远程浏览器会有各种限制。

解决：启动本地 Chrome 并开启 CDP，用 Selenium 连接：

from selenium import webdriver
from selenium.webdriver.chrome.options import Options

options = Options()
options.add_experimental_option("debuggerAddress", "localhost:9222")
driver = webdriver.Chrome(options=options)

5. 持续监控而非单次检查

问题：AI Shell 执行需要时间，单次检查会错过 Permission Request。

解决：循环监控，每次间隔 10 秒，持续处理 Permission Request，直到 Plans 显示 “No Plans”。

6. 让 AI Shell 自己完成部署

重要：不要自己部署应用，而是让 AI Shell 通过 SSH 自己完成所有部署工作。

AI Shell 的部署方式：

• 使用 Python paramiko 库建立 SSH 连接
• 通过 SFTP 上传文件
• 执行 Shell 命令配置 Nginx
• 重启服务

AI Shell 执行过程详解

Plans 执行流程

AI Shell 会自动制定并执行以下计划：

Plans:
[✓] 检查本地 lottery 文件夹
[✓] 查询可用的 Flexus 实例
[✓] 选择并确认目标实例
[✓] 上传文件到服务器
[✓] 配置 Nginx 静态文件服务
[✓] 验证 80 端口可访问并返回 URL

关键执行步骤

1. 创建文件：

   [✓] bash_exec (command=mkdir -p /root/lottery)
   [✓] write_file (path=lottery/index.html, content_length=1576)
   [✓] write_file (path=lottery/style.css, content_length=4283)
   [✓] write_file (path=lottery/script.js, content_length=...)
   

2. SSH 连接：

   [✓] bash_exec (command=python3 << 'EOF'
   import paramiko
   ssh = paramiko.SSHClient()
   ssh.connect('<YOUR_SERVER_IP>', 22, 'root', '<YOUR_PASSWORD>')
   ...
   

3. 配置 Nginx：

   [✓] 修改 Nginx 配置，添加 lottery location
   [✓] nginx -t 测试配置
   [✓] systemctl reload nginx
   

抽奖应用功能说明

功能特点

• 🎡 6 个奖区：一等奖、二等奖、三等奖、四等奖、两个"谢谢参与"
• 🎯 概率控制：每个奖项可配置中奖概率
• 🔄 平滑动画：使用贝塞尔曲线实现自然的减速效果
• 🎨 精美设计：渐变色彩、阴影效果、脉冲动画
• 📱 响应式：适配移动端显示
• 🔢 次数限制：默认每天 3 次抽奖机会

自定义配置

修改奖品和概率（编辑 script.js）：

const PRIZES = [
    { name: '一等奖', icon: '🏆', probability: 0.05, color: 0 },
    { name: '二等奖', icon: '🎁', probability: 0.10, color: 1 },
    { name: '三等奖', icon: '🎯', probability: 0.15, color: 2 },
    { name: '四等奖', icon: '⭐', probability: 0.20, color: 3 },
    { name: '谢谢参与', icon: '💫', probability: 0.25, color: 4 },
    { name: '谢谢参与', icon: '💫', probability: 0.25, color: 5 }
];

常见问题

Q1: 如何判断 AI Shell 完成了任务？

A: 检查 Plans 列表，所有任务显示 [✓] 或 Plans 显示 “No Plans”。

Q2: Permission Request 找不到按钮？

A: Permission Request 在终端中显示，需要用键盘操作（→ + Enter），不是点击按钮。

Q3: 部署失败怎么办？

A:

1. 检查 SSH 凭据是否正确
2. 确认服务器安全组开放了 22 端口
3. 提供明确的文件路径和目标目录
4. 让 AI Shell 自己处理，不要手动干预

Q4: 如何获取最终访问 URL？

A: 在完成文本中搜索 “http://” 或 “https://”，提取 URL。或者直接访问 https://服务器IP/lottery/。

Q5: AI Shell 会使用什么方式部署？

A: AI Shell 会使用 Python paramiko 库通过 SSH 连接服务器，使用 SFTP 上传文件，执行 Shell 命令配置服务。

相关资源

• AI Shell 官方文档（https://support.huaweicloud.com/productdesc-devstation/devstation_01_0001.html）
• 华为云开发者空间（https://devstation.connect.huaweicloud.com/）
• AI Shell 使用 Skill（~/.hermes/skills/devops/ai-shell-usage/SKILL_md）

案例总结

本案例完整展示了 AI Shell 的核心价值：

AI Shell 让开发者从"怎么做"中解放出来，专注于"做什么"。

关键要点：

• ✅ 让 AI Shell 自己完成所有工作（开发+部署）
• ✅ 只需监控和处理 Permission Request
• ✅ Plans 显示 “No Plans” 表示完成
• ✅ 验证最终部署结果

本案例由实际操作生成，包含 120+ 张真实截图
最后更新：2026-06-30
AI Shell 完成部署：✅ 应用已成功部署并通过验证