下面我将详细介绍如何使用DeepSeek API搭建一个功能完整的聊天网站，从前端到后端再到部署的全过程。
1. 准备工作
1.1 获取DeepSeek API密钥
访问DeepSeek官网注册账号
进入开发者平台获取API密钥
1.2 技术栈选择
前端：React.js + Vite (轻量快速)
后端：Node.js + Express (简单易用)
部署：Vercel (全栈部署平台)
2. 前端实现
2.1 创建React项目
npm create vite@latest deepseek-chat --template react cd deepseek-chat npm install
2.2 安装必要依赖
npm install axios react-icons @uiw/react-markdown-preview
2.3 核心聊天组件代码
src/components/ChatInterface.jsx
jsx
import { useState, useRef, useEffect } from 'react';
import axios from 'axios';
import Markdown from '@uiw/react-markdown-preview';
export default function ChatInterface() {
const [messages, setMessages] = useState([]);
const [input, setInput] = useState('');
const [isLoading, setIsLoading] = useState(false);
const messagesEndRef = useRef(null);
// 自动滚动到底部
useEffect(() => {
messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
}, [messages]);
const handleSend = async () => {
if (!input.trim() || isLoading) return;
// 添加用户消息
const userMessage = { role: 'user', content: input };
setMessages(prev => [...prev, userMessage]);
setInput('');
setIsLoading(true);
try {
// 调用后端API
const response = await axios.post('/api/chat', {
messages: [...messages, userMessage]
});
// 添加AI回复
setMessages(prev => [...prev, {
role: 'assistant',
content: response.data.reply
}]);
} catch (error) {
console.error('API调用失败:', error);
setMessages(prev => [...prev, {
role: 'assistant',
content: '抱歉，发生错误，请稍后再试。'
}]);
} finally {
setIsLoading(false);
}
};
return (
在项目根目录创建api文件夹： mkdir api
cd api
npm init -y
npm install express axios cors dotenv api/index.js javascript require('dotenv').config();
const express = require('express');
const cors = require('cors');
const axios = require('axios');
const app = express();
const PORT = process.env.PORT || 3001;
// 中间件
app.use(cors());
app.use(express.json());
// DeepSeek API配置
const DEEPSEEK_API_URL = 'https://api.deepseek.com/v1/chat/completions';
const DEEPSEEK_API_KEY = process.env.DEEPSEEK_API_KEY;
// 聊天端点
app.post('/chat', async (req, res) => {
try {
const { messages } = req.body;
const response = await axios.post(DEEPSEEK_API_URL, {
model: 'deepseek-chat',
messages: messages.map(msg => ({
role: msg.role,
content: msg.content
})),
temperature: 0.7,
max_tokens: 2000
}, {
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${DEEPSEEK_API_KEY}`
}
});
const reply = response.data.choices[0].message.content;
res.json({ reply });
} catch (error) {
console.error('DeepSeek API错误:', error.response?.data || error.message);
res.status(500).json({ error: '调用AI服务时出错' });
}
});
app.listen(PORT, () => {
console.log(`后端服务运行在 http://localhost:${PORT}`);
}); 创建.env文件： DEEPSEEK_API_KEY=你的API密钥
PORT=3001 vite.config.js javascript import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
export default defineConfig({
plugins: [react()],
server: {
proxy: {
'/api': {
target: 'http://localhost:3001',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, '')
}
}
}
}) cd api
node index.js npm run dev 现在访问http://localhost:5173应该可以看到聊天界面了。 在Vercel官网注册/登录 安装Vercel CLI: npm install -g vercel 登录: vercel login 创建vercel.json配置文件: json {
"version": 2,
"builds": [
{
"src": "api/index.js",
"use": "@vercel/node"
},
{
"src": "vite.config.js",
"use": "@vercel/static-build",
"config": {
"distDir": "dist"
}
}
],
"routes": [
{
"src": "/api/(.*)",
"dest": "api/index.js"
},
{
"src": "/(.*)",
"dest": "dist/$1"
}
]
} 修改后端代码以适应Vercel环境: javascript // 修改api/index.js的导出方式
module.exports = app; vercel
vercel --prod javascript // 在后端添加数据库连接
const mongoose = require('mongoose');
mongoose.connect(process.env.MONGODB_URI);
const conversationSchema = new mongoose.Schema({
userId: String,
messages: Array,
createdAt: { type: Date, default: Date.now }
});
const Conversation = mongoose.model('Conversation', conversationSchema);
// 修改聊天端点保存历史
app.post('/chat', async (req, res) => {
try {
const { messages, userId } = req.body;
// ...原有API调用代码
// 保存对话
await Conversation.findOneAndUpdate(
{ userId },
{ $push: { messages: { $each: [userMessage, aiMessage] } } },
{ upsert: true, new: true }
);
res.json({ reply });
} catch (error) {
// 错误处理
}
}); javascript // 前端添加文件上传组件
const handleFileUpload = async (file) => {
const formData = new FormData();
formData.append('file', file);
const response = await axios.post('/api/upload', formData, {
headers: { 'Content-Type': 'multipart/form-data' }
});
setMessages(prev => [...prev, {
role: 'user',
content: `[文件] ${file.name}\n${response.data.text}`
}]);
};
// 后端添加文件处理端点
const multer = require('multer');
const upload = multer({ dest: 'uploads/' });
app.post('/upload', upload.single('file'), async (req, res) => {
// 处理文件内容提取
// 返回提取的文本
}); javascript // 后端添加API密钥验证中间件
const apiKeyMiddleware = (req, res, next) => {
const apiKey = req.headers['x-api-key'];
if (apiKey !== process.env.API_SECRET) {
return res.status(403).json({ error: '未授权的访问' });
}
next();
};
app.use('/chat', apiKeyMiddleware); javascript const rateLimit = require('express-rate-limit');
const limiter = rateLimit({
windowMs: 15 * 60 * 1000, // 15分钟
max: 100 // 每个IP限制100次请求
});
app.use(limiter); deepseek-chat/
├── api/
│ ├── index.js # 后端主文件
│ ├── package.json
│ └── .env # 环境变量
├── public/
├── src/
│ ├── components/
│ │ └── ChatInterface.jsx
│ ├── App.jsx
│ └── main.jsx
├── vite.config.js
├── vercel.json # Vercel配置
└── package.json 这样你就完成了一个基于DeepSeek API的完整聊天网站！根据你的需求，可以继续扩展用户认证、对话历史、文件上传等功能。 看了今天的文章是不是觉得自己动手搭建网站是不是很容易了呢？ 3. 后端实现
3.1 创建后端服务
3.2 后端API代码
3.3 环境变量配置
4. 项目配置
4.1 配置Vite代理
5. 运行项目
5.1 启动后端服务
5.2 启动前端开发服务器
6. 部署到Vercel
6.1 创建Vercel项目
6.2 配置部署
6.3 部署命令
7. 高级功能扩展
7.1 添加对话历史
7.2 添加文件上传功能
8. 安全增强
8.1 添加API密钥保护
8.2 添加速率限制
9. 项目结构最终版
