AI编程 部署完整教程｜附源码

随着大模型能力的快速提升，“AI 编程”已经从概念走向实际生产场景。无论是代码补全、Bug 分析、单元测试生成，还是基于自然语言生成接口、脚本、组件，AI 都能显著提升研发效率。本文将从零开始，带你完成一个可部署的 AI 编程助手项目：用户输入编程需求，系统调用大模型 API，返回代码、解释和使用建议。

本文内容包括：

• 项目功能介绍
• 技术选型
• 后端接口开发
• 前端页面开发
• 环境变量配置
• Docker 容器化部署
• Nginx 反向代理
• 服务器部署流程
• 常见问题排查
• 完整源码示例

适合人群：有一定 Python、JavaScript、Linux 基础，希望快速搭建 AI 编程工具并上线部署的开发者。

一、项目效果说明

我们要实现的是一个简化版 AI 编程助手，核心功能如下：

1. 用户在网页输入编程需求
   例如：
   “帮我用 Python 写一个批量压缩图片的脚本。”

2. 前端将需求提交给后端接口。

3. 后端调用大模型 API。

4. 大模型返回代码内容、解释和注意事项。

5. 页面展示 AI 返回结果。

项目最终形态类似一个在线 AI Code Assistant，可以部署到自己的服务器上，通过浏览器访问。

二、技术选型

本教程采用前后端分离架构。

1. 后端技术

2. 前端技术

3. 部署技术

三、项目目录结构

建议使用如下目录结构：

ai-code-assistant/
├── backend/
│   ├── main.py
│   ├── requirements.txt
│   ├── .env.example
│   └── Dockerfile
├── frontend/
│   ├── index.html
│   ├── package.json
│   ├── vite.config.js
│   ├── Dockerfile
│   └── src/
│       ├── main.js
│       ├── App.vue
│       └── style.css
├── nginx/
│   └── default.conf
├── docker-compose.yml
└── README.md

其中：

• backend：存放 FastAPI 后端代码。
• frontend：存放 Vue 前端项目。
• nginx：存放 Nginx 配置。
• docker-compose.yml：用于一键启动所有服务。

四、后端开发

首先创建后端目录：

mkdir -p ai-code-assistant/backend
cd ai-code-assistant/backend

1. 安装依赖

创建 requirements.txt：

fastapi==0.115.0
uvicorn==0.30.6
python-dotenv==1.0.1
openai==1.45.0
pydantic==2.8.2

如果你使用的是兼容 OpenAI 格式的大模型服务，也可以继续使用 openai SDK，只需要修改 base_url 即可。

2. 编写环境变量示例

创建 .env.example：

AI_API_KEY=your_api_key_here
AI_BASE_URL=https://api.openai.com/v1
AI_MODEL=gpt-4o-mini

实际部署时，需要复制一份：

cp .env.example .env

然后填写真实配置：

AI_API_KEY=sk-xxxxxxxxxxxxxxxx
AI_BASE_URL=https://api.openai.com/v1
AI_MODEL=gpt-4o-mini

如果你使用的是其他兼容接口，例如某些国内模型平台，通常只需要改成对应的 AI_BASE_URL 和模型名称。

3. 编写 FastAPI 后端代码

创建 main.py：

import os
from typing import Optional

from dotenv import load_dotenv
from fastapi import FastAPI, HTTPException
from fastapi.middleware.cors import CORSMiddleware
from openai import OpenAI
from pydantic import BaseModel, Field


load_dotenv()

AI_API_KEY = os.getenv("AI_API_KEY")
AI_BASE_URL = os.getenv("AI_BASE_URL", "https://api.openai.com/v1")
AI_MODEL = os.getenv("AI_MODEL", "gpt-4o-mini")

if not AI_API_KEY:
    raise RuntimeError("AI_API_KEY is not configured")


client = OpenAI(
    api_key=AI_API_KEY,
    base_url=AI_BASE_URL
)

app = FastAPI(
    title="AI Code Assistant API",
    description="一个简单的 AI 编程助手后端服务",
    version="1.0.0"
)

app.add_middleware(
    CORSMiddleware,
    allow_origins=["*"],
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)


class CodeRequest(BaseModel):
    prompt: str = Field(..., min_length=2, max_length=4000)
    language: Optional[str] = Field(default="auto")
    style: Optional[str] = Field(default="clean")


class CodeResponse(BaseModel):
    result: str


@app.get("/")
def root():
    return {
        "message": "AI Code Assistant API is running"
    }


@app.post("/api/generate-code", response_model=CodeResponse)
def generate_code(req: CodeRequest):
    try:
        system_prompt = """
你是一名资深软件工程师和代码审查专家。
请根据用户需求生成高质量代码，并遵循以下要求：

1. 如果用户指定编程语言，请使用指定语言。
2. 如果用户没有指定语言，请根据需求选择最合适的语言。
3. 返回内容必须包含：
   - 实现思路
   - 完整代码
   - 使用方法
   - 注意事项
4. 代码应尽量清晰、可运行、可维护。
5. 如果需求存在安全风险，请提醒用户。
"""

        user_prompt = f"""
用户需求：
{req.prompt}

用户偏好的语言：
{req.language}

代码风格：
{req.style}
"""

        completion = client.chat.completions.create(
            model=AI_MODEL,
            messages=[
                {
                    "role": "system",
                    "content": system_prompt
                },
                {
                    "role": "user",
                    "content": user_prompt
                }
            ],
            temperature=0.3
        )

        content = completion.choices[0].message.content

        return CodeResponse(result=content)

    except Exception as e:
        raise HTTPException(
            status_code=500,
            detail=f"AI generation failed: {str(e)}"
        )

这个接口的核心路径是：

POST /api/generate-code

请求参数示例：

{
  "prompt": "帮我写一个 Python 脚本，读取 Excel 并生成统计报表",
  "language": "Python",
  "style": "clean"
}

返回示例：

{
  "result": "### 实现思路\n...\n### 完整代码\n```python\n...\n```"
}

五、本地启动后端

在 backend 目录下执行：

pip install -r requirements.txt
uvicorn main:app --host 0.0.0.0 --port 8000 --reload

浏览器访问：

http://localhost:8000

如果看到以下内容，说明后端启动成功：

{
  "message": "AI Code Assistant API is running"
}

你也可以访问 FastAPI 自动生成的接口文档：

http://localhost:8000/docs

在这个页面里可以直接测试 /api/generate-code 接口。

六、前端开发

回到项目根目录，创建前端项目：

cd ..
mkdir frontend
cd frontend

1. 创建 package.json

{
  "name": "ai-code-assistant-frontend",
  "version": "1.0.0",
  "private": true,
  "type": "module",
  "scripts": {
    "dev": "vite --host 0.0.0.0",
    "build": "vite build",
    "preview": "vite preview --host 0.0.0.0"
  },
  "dependencies": {
    "@vitejs/plugin-vue": "^5.1.2",
    "axios": "^1.7.7",
    "vite": "^5.4.3",
    "vue": "^3.5.3",
    "marked": "^14.1.2"
  },
  "devDependencies": {}
}

2. 创建 Vite 配置

创建 vite.config.js：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  server: {
    port: 5173,
    proxy: {
      '/api': {
        target: 'http://localhost:8000',
        changeOrigin: true
      }
    }
  }
})

开发环境下，前端请求 /api 会被代理到后端 8000 端口。

3. 创建入口文件

创建 index.html：

创建 src/main.js：

import { createApp } from 'vue'
import App from './App.vue'
import './style.css'

createApp(App).mount('#app')

4. 编写主页面

创建 src/App.vue：

5. 编写样式

创建 src/style.css：

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  background: #f5f7fb;
  color: #1f2937;
}

.page {
  min-height: 100vh;
}

.header {
  padding: 48px 20px 32px;
  text-align: center;
  background: linear-gradient(135deg, #2563eb, #7c3aed);
  color: #fff;
}

.header h1 {
  margin: 0;
  font-size: 40px;
}

.header p {
  margin-top: 12px;
  font-size: 16px;
  opacity: 0.9;
}

.container {
  max-width: 1200px;
  margin: 32px auto;
  padding: 0 20px;
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: 24px;
}

.panel {
  background: #fff;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 8px 28px rgba(15, 23, 42, 0.08);
}

.label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
}

.textarea {
  width: 100%;
  min-height: 260px;
  resize: vertical;
  padding: 14px;
  border: 1px solid #d1d5db;
  border-radius: 10px;
  font-size: 15px;
  outline: none;
}

.textarea:focus,
.select:focus {
  border-color: #2563eb;
}

.row {
  display: flex;
  gap: 16px;
  margin-top: 18px;
}

.field {
  flex: 1;
}

.select {
  width: 100%;
  padding: 11px;
  border: 1px solid #d1d5db;
  border-radius: 10px;
  background: #fff;
}

.button {
  width: 100%;
  margin-top: 22px;
  padding: 14px 18px;
  border: none;
  border-radius: 12px;
  background: #2563eb;
  color: white;
  font-size: 16px;
  cursor: pointer;
}

.button:disabled {
  background: #93c5fd;
  cursor: not-allowed;
}

.result-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.result-header h2 {
  margin: 0 0 16px;
}

.copy {
  border: 1px solid #d1d5db;
  background: white;
  border-radius: 8px;
  padding: 8px 12px;
  cursor: pointer;
}

.empty,
.loading {
  color: #6b7280;
  padding: 40px 0;
  text-align: center;
}

.error {
  padding: 14px;
  background: #fee2e2;
  color: #991b1b;
  border-radius: 10px;
}

.markdown-body {
  line-height: 1.75;
  font-size: 15px;
}

.markdown-body pre {
  overflow-x: auto;
  background: #0f172a;
  color: #e5e7eb;
  padding: 16px;
  border-radius: 12px;
}

.markdown-body code {
  font-family: Menlo, Monaco, Consolas, monospace;
}

.markdown-body p code {
  background: #eef2ff;
  color: #3730a3;
  padding: 2px 5px;
  border-radius: 4px;
}

@media (max-width: 900px) {
  .container {
    grid-template-columns: 1fr;
  }

  .header h1 {
    font-size: 32px;
  }
}

七、本地启动前端

在 frontend 目录执行：

npm install
npm run dev

访问：

http://localhost:5173

如果后端也已经启动，那么在页面输入需求后，就可以正常生成代码。

八、后端 Dockerfile

接下来进入部署阶段。先给后端创建 Dockerfile。

路径：backend/Dockerfile

FROM python:3.11-slim

WORKDIR /app

COPY requirements.txt .

RUN pip install --no-cache-dir -r requirements.txt -i https://pypi.tuna.tsinghua.edu.cn/simple

COPY . .

EXPOSE 8000

CMD ["uvicorn", "main:app", "--host", "0.0.0.0", "--port", "8000"]

说明：

• 使用 python:3.11-slim 减小镜像体积。
• 安装依赖时使用清华源，提高国内服务器安装速度。
• 通过 uvicorn 启动 FastAPI 服务。

九、前端 Dockerfile

路径：frontend/Dockerfile

FROM node:20-alpine AS builder

WORKDIR /app

COPY package.json ./

RUN npm install

COPY . .

RUN npm run build


FROM nginx:1.27-alpine

COPY --from=builder /app/dist /usr/share/nginx/html

EXPOSE 80

CMD ["nginx", "-g", "daemon off;"]

这里使用了多阶段构建：

1. 第一阶段使用 Node 构建 Vue 项目。
2. 第二阶段使用 Nginx 托管静态文件。

不过在本教程中，我们还会使用根目录下统一的 Nginx 服务做反向代理，所以这个前端 Dockerfile 可以作为独立部署方案保留。

十、Nginx 配置

创建目录：

mkdir nginx

创建 nginx/default.conf：

server {
    listen 80;
    server_name _;

    root /usr/share/nginx/html;
    index index.html;

    client_max_body_size 10m;

    location / {
        try_files $uri $uri/ /index.html;
    }

    location /api/ {
        proxy_pass http://backend:8000/api/;
        proxy_http_version 1.1;

        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;

        proxy_connect_timeout 60s;
        proxy_read_timeout 300s;
        proxy_send_timeout 300s;
    }
}

注意这一段：

location /api/ {
    proxy_pass http://backend:8000/api/;
}

这里的 backend 是 Docker Compose 中后端服务的名称。Docker Compose 会自动创建内部网络，因此 Nginx 可以直接通过服务名访问后端容器。

十一、Docker Compose 一键部署

在项目根目录创建 docker-compose.yml：

services:
  backend:
    build:
      context: ./backend
    container_name: ai-code-backend
    restart: always
    env_file:
      - ./backend/.env
    expose:
      - "8000"

  frontend-build:
    image: node:20-alpine
    container_name: ai-code-frontend-build
    working_dir: /app
    volumes:
      - ./frontend:/app
      - frontend_dist:/app/dist
    command: sh -c "npm install && npm run build"

  nginx:
    image: nginx:1.27-alpine
    container_name: ai-code-nginx
    restart: always
    depends_on:
      - backend
      - frontend-build
    ports:
      - "80:80"
    volumes:
      - frontend_dist:/usr/share/nginx/html
      - ./nginx/default.conf:/etc/nginx/conf.d/default.conf:ro

volumes:
  frontend_dist:

这个配置包含三个服务：

1. backend：运行 FastAPI。
2. frontend-build：构建前端静态文件。
3. nginx：对外提供访问入口，并代理 /api 到后端。

实际生产中，前端构建容器只需要在构建时运行一次。为了教程简单，这里将它放入 Compose 中。如果你希望更规范，可以使用 CI/CD 构建后再发布静态文件。

十二、服务器环境准备

推荐服务器配置：

• 系统：Ubuntu 22.04
• CPU：1 核或以上
• 内存：1GB 或以上
• 硬盘：20GB 或以上

登录服务器：

ssh root@你的服务器IP

更新系统：

apt update
apt upgrade -y

安装基础工具：

apt install -y git curl vim

十三、安装 Docker 和 Docker Compose

执行：

curl -fsSL https://get.docker.com | bash

启动 Docker：

systemctl enable docker
systemctl start docker

检查版本：

docker version

Docker Compose 通常已经作为 Docker 插件安装，可以检查：

docker compose version

如果能看到版本号，说明安装成功。

十四、上传项目源码

你可以使用 Git：

git clone https://your-git-repo/ai-code-assistant.git
cd ai-code-assistant

也可以使用 scp 上传：

scp -r ai-code-assistant root@你的服务器IP:/opt/

然后进入目录：

cd /opt/ai-code-assistant

十五、配置后端环境变量

进入后端目录：

cd backend
cp .env.example .env
vim .env

填写你的模型服务信息：

AI_API_KEY=你的真实API_KEY
AI_BASE_URL=https://api.openai.com/v1
AI_MODEL=gpt-4o-mini

保存后回到项目根目录：

cd ..

十六、启动项目

执行：

docker compose up -d --build

查看容器：

docker ps

如果看到类似以下容器，说明启动成功：

ai-code-backend
ai-code-frontend-build
ai-code-nginx

查看日志：

docker compose logs -f

浏览器访问：

http://你的服务器IP

如果页面正常显示，并且输入需求后可以返回代码，说明部署完成。

十七、绑定域名

如果你有域名，例如：

code.example.com

需要在域名 DNS 解析中添加一条 A 记录：

主机记录：code
记录类型：A
记录值：你的服务器IP

等待解析生效后，修改 nginx/default.conf：

server_name code.example.com;

然后重启 Nginx：

docker compose restart nginx

访问：

http://code.example.com

十八、配置 HTTPS

生产环境建议开启 HTTPS。可以使用 Certbot 或者通过宿主机 Nginx、宝塔面板、云厂商证书服务等方式配置。

如果使用宿主机 Certbot，需要先安装：

apt install -y certbot

不过由于本教程 Nginx 在 Docker 内运行，HTTPS 配置会稍微复杂一些。更简单的方案是使用云厂商负载均衡或宝塔面板反向代理到本项目的 80 端口。

如果你希望继续使用 Docker 内 Nginx，可以挂载证书目录，并增加 443 配置。示例：

server {
    listen 443 ssl;
    server_name code.example.com;

    ssl_certificate /etc/nginx/certs/fullchain.pem;
    ssl_certificate_key /etc/nginx/certs/privkey.pem;

    root /usr/share/nginx/html;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }

    location /api/ {
        proxy_pass http://backend:8000/api/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}

同时在 docker-compose.yml 中挂载证书：

volumes:
  - ./certs:/etc/nginx/certs:ro

并开放端口：

ports:
  - "80:80"
  - "443:443"

十九、常见问题排查

1. 页面能打开，但生成代码失败

先查看后端日志：

docker compose logs -f backend

常见原因包括：

• API Key 填写错误
• 模型名称错误
• AI_BASE_URL 地址错误
• 服务器无法访问模型服务
• 大模型账号余额不足

可以进入后端容器测试网络：

docker exec -it ai-code-backend sh

然后执行：

python

简单测试环境变量是否存在：

import os
print(os.getenv("AI_API_KEY"))

2. 前端请求接口 404

检查 Nginx 配置中的代理路径：

location /api/ {
    proxy_pass http://backend:8000/api/;
}

同时确认后端接口路径是：

/api/generate-code

如果 proxy_pass 写法不一致，可能会导致路径被错误拼接。

3. Docker 构建很慢

可以使用国内镜像源。后端 Dockerfile 中已经使用了清华 PyPI 源：

RUN pip install --no-cache-dir -r requirements.txt -i https://pypi.tuna.tsinghua.edu.cn/simple

前端可以配置 npm 镜像：

npm config set registry https://registry.npmmirror.com

也可以在 Dockerfile 中加入：

RUN npm config set registry https://registry.npmmirror.com

4. AI 响应时间过长导致超时

在 Nginx 中增加超时时间：

proxy_read_timeout 300s;
proxy_send_timeout 300s;

本文配置中已经包含：

proxy_read_timeout 300s;

如果模型返回很慢，可以继续调大。

5. 如何更新项目

修改代码后，在服务器执行：

docker compose down
docker compose up -d --build

如果只是修改 .env，可以执行：

docker compose restart backend

如果只是修改 Nginx 配置：

docker compose restart nginx

二十、生产环境优化建议

虽然本文项目已经可以部署使用，但如果要投入真实生产环境，建议继续优化。

1. 增加用户登录

避免接口被公开滥用，可以增加：

• 用户注册登录
• JWT 鉴权
• 管理员后台
• 用户调用次数限制

2. 增加限流机制

AI 接口通常按量计费，如果不做限制，容易被恶意刷接口。可以使用：

• Redis 记录调用次数
• Nginx 限流
• 后端中间件限流

例如 Nginx 可配置：

limit_req_zone $binary_remote_addr zone=api_limit:10m rate=5r/m;

然后在接口位置使用：

limit_req zone=api_limit burst=10 nodelay;

3. 增加日志记录

建议记录：

• 用户请求时间
• 请求内容摘要
• 消耗 token
• 响应耗时
• 错误信息

但注意不要记录敏感信息，例如 API Key、用户密码、隐私数据。

4. 支持流式输出

当前接口是等待大模型完整返回后再展示。如果希望体验更像 ChatGPT，可以改成流式输出。

FastAPI 可以使用 StreamingResponse，前端可以使用 fetch 读取流。这样用户不用等待完整结果生成，体验会更好。

5. 支持历史记录

可以增加数据库，例如：

• SQLite：适合单机轻量应用
• PostgreSQL：适合生产环境
• MySQL：常见业务系统选择

记录用户每次生成的代码，方便后续查看和二次编辑。

二十一、README 示例

项目根目录可以添加 README.md：

# AI Code Assistant

一个基于 FastAPI、Vue 3、Docker、Nginx 构建的 AI 编程助手。

## 功能

- 根据自然语言生成代码
- 支持选择编程语言
- 支持 Markdown 展示
- 支持 Docker 一键部署

## 本地开发

### 后端

```bash
cd backend
cp .env.example .env
pip install -r requirements.txt
uvicorn main:app --reload --port 8000

前端

cd frontend
npm install
npm run dev

Docker 部署

docker compose up -d --build

访问：

http://localhost

---

## 二十二、完整部署命令汇总

如果你已经准备好了全部源码，可以直接按下面步骤部署：

```bash
apt update
apt install -y git curl vim

curl -fsSL https://get.docker.com | bash
systemctl enable docker
systemctl start docker

git clone https://your-git-repo/ai-code-assistant.git
cd ai-code-assistant

cp backend/.env.example backend/.env
vim backend/.env

docker compose up -d --build
docker compose logs -f

访问：

http://服务器IP

总结

本文完整演示了一个 AI 编程助手的开发与部署流程。从后端 FastAPI 接口、前端 Vue 页面，到 Docker Compose 编排、Nginx 反向代理，再到服务器上线和常见问题排查，基本覆盖了一个 AI 应用从源码到上线的完整链路。

这个项目虽然功能简单，但结构清晰，非常适合作为 AI 编程类产品的起步模板。你可以在此基础上继续扩展，例如增加用户系统、对话历史、流式输出、文件上传、项目级代码分析、Git 仓库解析、自动生成测试用例等功能。

如果你希望打造更完整的 AI 编程平台，建议后续重点优化三点：

1. 交互体验：支持流式输出、多轮对话和代码高亮。
2. 安全控制：增加鉴权、限流和敏感信息过滤。
3. 工程能力：加入日志、监控、数据库和自动化部署。

掌握本文这套流程后，你不仅可以部署 AI 编程助手，也可以快速改造成 AI 写作助手、AI 客服、AI 数据分析助手、AI 运维助手等多种大模型应用。