模块④ 上线 · Build & Ship — i2iLab 学习中心

先看懂 · 三层架构

前端 → 后端 → 模型

前端

你看到的界面(浏览器)。公开的,绝不放 key。

→

后端

你的 agent 服务。藏 key、跑逻辑、连模型。

→

模型

OpenRouter 等。真正生成回复;key 只在后端 env。

🔑 key 铁律:前端是公开的,任何人能看源码。API key 只能待在后端。上线前 grep -rniE "sk-[a-z0-9]{16}" 前端必须为零。

怎么做 · 你指挥,AI 写

后端

把模块②造的 mini CC harness,包成一个 /api/chat 接口:注入 agent.md + skills,key 走 env,去掉危险工具。

前端

对 Claude Code 说:做什么页 / 什么风格 / 连哪个后端。它就写出聊天页——你审阅、调风格、加危机按钮。

部署

静态前端 → GitHub Pages(免费);Python 后端 → Railway(自动识别,key 放 Variables)。一键上线。

web 技术栈速览 · 看懂就够

HTML 骨架CSS 外观JavaScript 交互 API / JSON 前后端对话React/Next 复杂界面才需要FastAPI Python 变 API

你不用手写——但要认得每层是什么、报错时看得懂,才能有效指挥 AI。

动手试一试 · 站内交互

把你前端代码片段粘进来,点扫描——它会像上线前那样找 key 和「前端直连模型」的危险写法。

你的作品要不要真的调模型对话(而不只是展示界面)?