从零开始部署你的第一个机器学习应用：LangChain + 前端实战
大家好，我是一名干了五年后端开发的老兵。这几年，我帮不少团队把 AI 模型从“笔记本上能跑”变成了“线上真能用”。很多新手朋友总以为机器学习部署是科学家的事，其实不然——只要懂点代码、有点耐心，你也能做到。今天这篇教程，就是想用一个真实的小项目，带你亲手把 LangChain 和前端串起来，做出一个能对话的 AI 应用。
为什么需要“部署”？模型不能直接用吗？
你可能在本地用 Jupyter Notebook 跑过 ChatGPT 风格的问答程序，效果很酷。但那只是“玩具”——用户没法访问，也没法和别人分享。
部署，就是把你的模型变成一个网络服务，让任何人通过浏览器（前端）就能使用它。就像微信小程序、网页聊天机器人那样。
而 LangChain，正是帮你快速搭建这类 AI 应用的“脚手架”。它封装了调用大模型、管理记忆、连接数据库等复杂逻辑，让你专注业务。
环境准备：三步搞定开发环境
💡提示：全程只需 Python 和 Node.js，无需 Docker 或云服务器（本地先跑通！）
第一步：安装 Python（3.9+）
- Windows/Mac 用户去 python.org 下载安装
- 安装时勾选 “Add to PATH”
第二步：创建虚拟环境（推荐）
python -m venv ml-deploy-env
source ml-deploy-env/bin/activate # Mac/Linux
# 或
ml-deploy-env\Scripts\activate # Windows
第三步：安装关键库
pip install langchain openai fastapi uvicorn python-dotenv
npm install -g create-react-app # 前端用 React（简单易上手）
⚠️注意：你需要一个 OpenAI API Key，免费账户即可测试。
核心概念三句话讲清楚
LangChain 是什么？
它不是模型，而是“胶水”——帮你把大模型（如 GPT）、数据源、记忆模块粘在一起。前端怎么和 AI 对话？
前端发 HTTP 请求 → 后端（Python）调用 LangChain → 返回答案 → 前端显示。部署的本质是什么？
把你的 Python 代码变成一个 Web 接口（API），前端通过fetch调用它。
实战：做一个“天气助手”聊天机器人
我们来做一个能回答“北京明天天气如何？”的 AI 助手。它会自动联网查天气（用 fake 数据演示），然后给出人性化回答。
步骤一：搭建后端 API（FastAPI + LangChain）
创建文件 main.py：
from fastapi import FastAPI
from langchain.prompts import ChatPromptTemplate
from langchain.chat_models import ChatOpenAI
from pydantic import BaseModel
import os
from dotenv import load_dotenv
load_dotenv() # 从 .env 文件加载 OPENAI_API_KEY
app = FastAPI()
class QueryRequest(BaseModel):
question: str
# 模拟天气查询函数（实际可用 requests 调真实 API）
def fake_weather_tool(city: str) -> str:
return f"根据最新数据，{city}明天晴，25°C。"
@app.post("/ask")
async def ask(query: QueryRequest):
# 构建提示词：告诉 AI 如何回答
prompt = ChatPromptTemplate.from_template(
"用户问：{question}\n"
"请先调用 weather_tool 获取天气，再组织自然语言回答。\n"
"weather_tool({city}) 返回：{weather_info}"
)
city = "北京" # 简化：默认北京
weather = fake_weather_tool(city)
# 调用大模型
model = ChatOpenAI(model="gpt-3.5-turbo", temperature=0)
response = model.predict_messages([
("human", prompt.format(question=query.question, city=city, weather_info=weather))
])
return {"answer": response.content}
同时创建 .env 文件：
OPENAI_API_KEY=你的API密钥
启动后端：
uvicorn main:app --reload
访问 http://localhost:8000/docs 可看到自动生成的 API 文档！
步骤二：搭建前端页面（React）
create-react-app weather-ai-frontend
cd weather-ai-frontend
npm start
编辑 src/App.js：
import { useState } from 'react';
function App() {
const [input, setInput] = useState('');
const [answer, setAnswer] = useState('');
const handleSubmit = async (e) => {
e.preventDefault();
const res = await fetch('http://localhost:8000/ask', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ question: input })
});
const data = await res.json();
setAnswer(data.answer);
};
return (
<div style={{ padding: '20px', maxWidth: '600px', margin: '0 auto' }}>
<h1>天气助手</h1>
<form onSubmit={handleSubmit}>
<input
value={input}
onChange={(e) => setInput(e.target.value)}
placeholder="比如：北京明天天气怎么样？"
style={{ width: '70%', padding: '8px' }}
/>
<button type="submit" style={{ padding: '8px 16px' }}>问AI</button>
</form>
{answer && <div style={{ marginTop: '20px', padding: '10px', background: '#f0f0f0' }}>
{answer}
</div>}
</div>
);
}
export default App;
现在打开 http://localhost:3000，输入问题，就能看到 AI 回答啦！
新手常见问题 & 解决方案
| 问题 | 原因 | 解决办法 |
|---|---|---|
CORS error |
前端访问后端被浏览器拦截 | 在 FastAPI 中添加 fastapi.middleware.cors 中间件（见下方代码） |
OPENAI_API_KEY not found |
环境变量没加载 | 确保 .env 文件在项目根目录，且已 load_dotenv() |
| 页面卡住无响应 | 后端没启动或端口不对 | 检查 uvicorn 是否运行在 8000 端口 |
解决 CORS 的代码补充（加到 main.py）：
from fastapi.middleware.cors import CORSMiddleware
app.add_middleware(
CORSMiddleware,
allow_origins=["*"], # 生产环境应指定具体域名
allow_methods=["*"],
allow_headers=["*"],
)
避坑指南：我当初踩过的雷
不要一上来就搞 Docker
很多教程直接让你容器化，但对新手极不友好。先本地跑通，再考虑部署到云。LangChain 版本很重要
它更新飞快！建议固定版本：pip install langchain==0.1.0（本文基于此版本）前端别用复杂的框架
Vue、Svelte 都行，但 React 生态最成熟，遇到问题 Google 一搜就有答案。API Key 别提交到 GitHub
用.env并加入.gitignore，否则可能被盗刷费用！
下一步学什么？
你现在已经有能力做简单的 AI 应用了。接下来可以：
- 替换 fake_weather_tool 为真实天气 API（如 OpenWeatherMap）
- 给 LangChain 加上记忆功能，让它记住用户之前的提问
- 用 Streamlit 替代前端，快速做内部工具（适合非专业前端）
- 部署到 Vercel + Render：前端上 Vercel，后端上 Render，完全免费！
我当初学的时候，也是从这样一个“假天气”项目开始的。别小看它——当你看到自己写的代码真的在网页上和人对话时，那种成就感，比调通十个 SQL 还爽！
总结
今天我们用不到 100 行代码，完成了：
- 用 LangChain 构建 AI 逻辑
- 用 FastAPI 暴露接口
- 用 React 做交互界面
机器学习部署的核心，从来不是算法多高深，而是让技术真正被人用起来。
动手试试吧！遇到问题欢迎留言，我会尽力解答。下次我们聊聊如何把这套东西免费部署上线～
评论 0