从零开始：使用 Ollama 在本地部署开源大模型并集成到 React 应用

掘金前端

无敌的拖拉斯旋风

2026年1月11日 14:27

一、为什么我们需要 Ollama？——本地部署大模型的必要性

在人工智能浪潮席卷全球的今天，大模型已经成为开发者和企业的标配工具。然而，当我们谈论使用大模型时，往往面临两个核心问题：数据安全和成本控制。

传统上，我们依赖 OpenAI、Claude、Gemini 等闭源模型服务。这些服务虽然强大，但存在几个关键问题：

数据安全：所有输入数据都通过互联网传输到第三方服务器，存在敏感信息泄露风险
成本高昂：API 调用费用随着使用量增加而线性增长
依赖外部服务：一旦服务中断，应用将无法使用

而 Ollama 的出现，为我们提供了一个全新的解决方案：将开源大模型部署在本地，让企业能够完全掌控数据和模型。

二、Ollama：本地部署大模型的利器

Ollama 是一个开源工具，专为在本地机器上部署和运行大语言模型而设计。它的核心优势在于：

简单易用：通过命令行即可完成模型部署
兼容性好：提供与 OpenAI API 兼容的接口
资源优化：支持多种模型规模，从 0.5B 到 70B 参数量

Ollama 基础使用

bash

# 下载模型
ollama pull qwen2.5:0.5b

# 运行模型
ollama run qwen2.5:0.5b

默认情况下，Ollama 会在 localhost:11434 端口提供 API 服务，这个端口是兼容 OpenAI 接口的，意味着我们可以使用熟悉的 OpenAI 客户端库来调用它。

为什么选择 11434 端口？

Ollama 选择 11434 端口作为默认服务端口，这并非随意选择。这个端口在 1024-65535 的范围内，属于"用户端口"（非特权端口），避免了需要以 root 权限运行的麻烦。同时，这个端口在 Ollama 的文档和社区中已经约定俗成，使用它能确保与其他开发者和工具的兼容性。

三、在 React 应用中集成 Ollama

接下来，让我们看看如何将 Ollama 集成到 React 应用中。以下是关键代码分析：

1. API 服务封装

javascript

// api/ollamaApi.js
import axios from 'axios';

const ollamaApi = axios.create({
    baseURL: 'http://localhost:11434/v1',
    headers: {
        'Authorization': 'Bearer ollama',
        'Content-Type': 'application/json',
    }
});

export const chatCompletions = async (messages) => {
    try {
        const response = await ollamaApi.post('/chat/completions', {
            model: 'qwen2.5:0.5b',
            messages,
            stream: false,
            temperature: 0.7,
        });
        return response.data.choices[0].message.content;
    } catch (err) {
        console.error('Ollama 请求失败:', err);
        throw err;
    }
};

这段代码创建了一个 Axios 实例，指向 Ollama 的 API 端点。关键点有：

baseURL：指向 http://localhost:11434/v1，这是 Ollama 提供的 OpenAI 兼容接口
headers：需要设置 Authorization: Bearer ollama，这是 Ollama 的身份验证方式
chatCompletions：一个封装好的函数，用于发送聊天请求

2. React Hook 封装

javascript

// hooks/useLLM.js
import { useState, useEffect } from 'react';
import { chatCompletions } from '../api/ollamaApi.js';

export const useLLM = () => {
    const [messages, setMessages] = useState([{
        role: 'user',
        content: '你好',
    }, {
        role: 'assistant',
        content: '你好，我是 Qwen2.5 0.5b 模型',
    }]);
    const [loading, setLoading] = useState(false);
    const [error, setError] = useState(null);

    const sendMessage = async (content) => {
        if (!content.trim()) return;
        
        // 添加用户消息
        setMessages(prev => [...prev, { role: 'user', content }]);
        setLoading(true);
        
        try {
            // 调用 Ollama API 获取响应
            const response = await chatCompletions([
                ...messages,
                { role: 'user', content }
            ]);
            
            // 添加助手响应
            setMessages(prev => [...prev, { role: 'assistant', content: response }]);
        } catch (err) {
            setError('请求失败，请重试');
        } finally {
            setLoading(false);
        }
    };

    const resetChat = () => {
        setMessages([{
            role: 'user',
            content: '你好',
        }, {
            role: 'assistant',
            content: '你好，我是 Qwen2.5 0.5b 模型',
        }]);
    };

    return {
        messages,
        loading,
        error,
        sendMessage,
        resetChat,
    };
};

这个 Hook 封装了与 Ollama 的交互逻辑，关键点包括：

状态管理：messages 存储聊天记录，loading 表示请求状态，error 存储错误信息
消息发送：sendMessage 函数处理用户输入，调用 chatCompletions 获取响应
错误处理：捕获 API 错误并显示给用户

3. React 组件实现

javascript

// App.js
import { useState, useEffect } from 'react';
import { useLLM } from './hooks/useLLM.js';

export default function App() {
    const [inputValue, setInputValue] = useState('');
    const { messages, loading, error, sendMessage, resetChat } = useLLM();
    
    const handleSend = (e) => {
        e.preventDefault();
        if (inputValue.trim()) {
            sendMessage(inputValue);
            setInputValue('');
        }
    };

    return (
        <div className="min-h-screen bg-gray-50 flex flex-col items-center py-6 px-4">
            <div className="w-full max-w-[800px] bg-white rounded-lg shadow-md flex flex-col h-[90vh] max-h-[800px]">
                {/* 聊天界面 */}
                <div className="flex-1 overflow-y-auto p-4 space-y-4">
                    {messages.map((message, index) => (
                        <div key={index} className={`flex ${message.role === 'user' ? 'justify-end' : 'justify-start'}`}>
                            <div className={`max-w-[80%] rounded-lg p-3 ${message.role === 'user' ? 'bg-blue-500 text-white' : 'bg-gray-200'}`}>
                                {message.content}
                            </div>
                        </div>
                    ))}
                    {loading && (
                        <div className="flex justify-start">
                            <div className="bg-gray-200 rounded-lg p-3">正在思考...</div>
                        </div>
                    )}
                    {error && (
                        <div className="flex justify-start">
                            <div className="bg-red-100 text-red-700 rounded-lg p-3">
                                {error}
                            </div>
                        </div>
                    )}
                </div>
                
                {/* 输入框 */}
                <form className="p-4 border-t" onSubmit={handleSend}>
                    <div className="flex gap-2">
                        <input
                            type="text"
                            value={inputValue}
                            onChange={e => setInputValue(e.target.value)}
                            placeholder="输入消息...按回车发送"
                            disabled={loading}
                            className="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
                        />
                        <button
                            type="submit"
                            className="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition disabled:bg-gray-400"
                            disabled={loading || !inputValue.trim()}
                        >
                            发送
                        </button>
                    </div>
                </form>
            </div>
        </div>
    );
}

这个组件实现了完整的聊天界面，包括：

消息列表展示
输入框和发送按钮
加载状态和错误提示
与 useLLM Hook 的集成

四、本地部署大模型的硬件要求与挑战

在决定使用 Ollama 部署本地模型时，硬件要求是首要考虑因素。以下是一些关键点：

1. 硬件需求

模型规模	GPU 显存需求	推荐配置	适用场景
0.5B-1B	2-4GB	无 GPU 也可运行	个人开发、测试
3B-7B	6-12GB	NVIDIA RTX 3060+	中小型应用
13B+	24GB+	NVIDIA RTX 4090+	企业级应用

2. 本地部署 vs 云端部署

本地部署：

✅ 数据安全可控
✅ 无 API 调用费用
✅ 可定制化模型
❌ 需要硬件投入
❌ 需要运维知识

云端部署：

✅ 无需硬件投入
✅ 易于扩展
❌ 数据安全风险
❌ 长期成本高

3. 企业级应用考虑

对于企业级应用，如 "生成前端代码" 这类需求，本地部署有明显优势：

安全性：代码作为敏感信息，不通过互联网传输
定制化：可以根据企业代码规范微调模型
稳定性：不受第三方 API 服务中断影响

五、安全与隐私：本地部署的核心优势

正如我在文章开头提到的，安全是本地部署大模型的最大优势。让我们深入探讨：

1. 数据安全

在使用 OpenAI 等服务时，所有输入数据都会发送到第三方服务器。对于企业应用，这可能意味着：

代码库、业务逻辑、客户数据被第三方存储
违反数据隐私法规（如 GDPR）
无法满足企业内部安全审计要求

而本地部署确保了数据完全在企业内部流转，无需通过互联网传输。

2. 安全最佳实践

即使在本地部署，也需考虑以下安全措施：

禁用外部访问：在防火墙中限制 Ollama 服务的访问
使用身份验证：在 API 请求中添加认证（如 Authorization: Bearer ollama）
定期更新：保持 Ollama 和模型版本最新
模型隔离：为不同应用使用不同模型实例

六、全栈开发视角：从需求到实现

从需求分析到最终实现，这是一个典型的全栈开发流程：

需求分析：需要一个安全的聊天机器人，不依赖外部 API
技术选型：选择开源模型 + 本地部署方案
后端开发：使用 Ollama 部署模型，提供 API 接口
前端开发：使用 React 构建用户界面，集成 Ollama API
测试与优化：确保消息流畅，处理错误情况
部署上线：在生产环境中部署应用

这个流程展示了现代全栈开发中，前端和后端如何协同工作，共同实现一个安全、可靠的应用。

七、结语：拥抱本地部署大模型的未来

随着大模型技术的快速发展，我们正进入一个数据主权和隐私保护日益重要的时代。Ollama 作为本地部署大模型的工具，为我们提供了一个强大而灵活的解决方案。

通过将模型部署在本地，我们可以：

保护敏感数据
降低长期成本
实现高度定制化
提升应用稳定性

正如我在代码中展示的，集成 Ollama 到 React 应用并不复杂，关键在于理解其工作原理和正确处理 API 调用。

在未来的开发中，我会继续探索更多本地部署大模型的可能性，包括：

多模态模型（支持图像、音频等）
更高效的模型量化技术
企业级安全增强

无论您是个人开发者还是企业技术负责人，本地部署大模型都是值得投入的方向。它不仅解决了当前的安全问题，还为未来的 AI 应用奠定了坚实基础。

"在数据即资产的时代，掌握自己的数据和模型，就是掌握未来的主动权。" —— 这就是 Ollama 带给我们的核心价值。

阅读视图

一、为什么我们需要 Ollama？——本地部署大模型的必要性

二、Ollama：本地部署大模型的利器

Ollama 基础使用

为什么选择 11434 端口？

三、在 React 应用中集成 Ollama

1. API 服务封装

2. React Hook 封装

3. React 组件实现

四、本地部署大模型的硬件要求与挑战

1. 硬件需求

2. 本地部署 vs 云端部署

3. 企业级应用考虑

五、安全与隐私：本地部署的核心优势

1. 数据安全

2. 安全最佳实践

六、全栈开发视角：从需求到实现

七、结语：拥抱本地部署大模型的未来