【Docker 部署】FastAPI + Python + Vue.js

使用 FastAPI + Python + Vue.js 并通过 Docker 进行部署，可以通过以下步骤实现：

1. 项目结构

假设你的项目结构如下：

project-root/
├── backend/
│   ├── main.py
│   ├── requirements.txt
│   └── Dockerfile
├── frontend/
│   ├── src/
│   │   └── App.vue
│   ├── Dockerfile
│   └── package.json
└── docker-compose.yml

2. 后端（FastAPI）配置

backend/main.py

from fastapi import FastAPI

app = FastAPI()

@app.get("/")
async def read_root():
    return {"message": "Hello from FastAPI!"}

backend/requirements.txt

fastapi
uvicorn

backend/Dockerfile

FROM python:3.9-slim

WORKDIR /app

COPY . /app

RUN pip install --no-cache-dir -r requirements.txt

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

3. 前端（Vue.js）配置

frontend/src/App.vue

<template>
  <div>
    <h1>Vue.js + FastAPI</h1>
    <p>{{ message }}</p>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      message: ''
    };
  },
  async created() {
    const response = await axios.get('http://backend:8000/');
    this.message = response.data.message;
  }
};
</script>

frontend/Dockerfile

FROM node:16

WORKDIR /app

COPY . /app

RUN npm install

CMD ["npm", "run", "serve"]

4. Docker Compose 配置

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

version: '3.8'

services:
  backend:
    build: ./backend
    ports:
      - "8000:8000"
    networks:
      - app-network

  frontend:
    build: ./frontend
    ports:
      - "8080:8080"
    networks:
      - app-network

networks:
  app-network:
    driver: bridge

5. 构建和运行

在项目根目录运行以下命令：

docker-compose up --build

6. 访问应用

• 前端应用可通过 http://localhost:8080 访问。
• FastAPI 的接口文档可通过 http://localhost:8000/docs 访问。

7. 注意事项

• 确保前端代码中的 API 请求地址正确指向后端服务（如 http://backend:8000/）。
• 如果需要生产环境部署，建议使用 Nginx 作为反向代理。

通过以上步骤，你可以快速实现 FastAPI + Vue.js 的前后端分离项目，并通过 Docker 进行容器化部署。