【容器化部署】用 Docker部署 FastAPI+Vue 前后端分离项目
目录
2.2 安装 Docker（CentOS 7.9 专用命令）
4.1 创建 Dockerfile（指定 Python 环境）
引言
传统部署方式中，环境配置不一致、依赖冲突、跨平台兼容等问题常常让开发者头疼。而 Docker 的容器化技术能完美解决这些痛点 —— 通过将应用及其依赖打包成标准化容器，实现 "一次构建，到处运行"。本文将以阿里云服务器为例，手把手教你用 Docker 部署 FastAPI 后端和 Vue 前端，全程脚本化操作，新手也能轻松上手。
一、本地准备：工具与环境搭建
在开始部署前，需在本地电脑安装必要工具，确保后续操作顺畅。
1.1 安装核心工具
-
Docker Desktop：
官网下载对应系统版本（Windows/Mac），Windows 用户安装时务必勾选 "使用 WSL2"（提升性能），Mac 用户直接默认安装即可。安装完成后启动，右下角出现 Docker 图标即表示运行正常。 -
Xshell：
用于远程连接阿里云服务器，免费版足以满足需求。官网下载后安装，无需复杂配置，后续直接用于连接服务器。 -
VS Code（可选但推荐）：
用于修改前后端代码和配置文件，内置终端可直接执行命令，提高效率。
二、服务器初始化：Docker 环境搭建
通过 Xshell 连接阿里云服务器后，首先需要在服务器上安装并配置 Docker 环境。
2.1 连接服务器
- 打开 Xshell，点击 "新建"，填写服务器信息：
- 名称：自定义（如 "阿里云部署"）
- 主机：服务器公网 IP（如
123.123.123.123） - 端口：默认 22
- 点击 "连接"，输入用户名（默认
root）和密码（输入时无显示，输完回车），成功后终端显示[root@xxx ~]#。
2.2 安装 Docker（CentOS 7.9 专用命令）
在 Xshell 终端依次执行以下命令：
# 1. 安装Docker依赖工具
yum install -y yum-utils device-mapper-persistent-data lvm2
# 2. 添加阿里云Docker镜像源（速度比官方快）
yum-config-manager --add-repo http://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo
# 3. 安装Docker社区版（免费）
yum install -y docker-ce docker-ce-cli containerd.io
# 4. 启动Docker服务
systemctl start docker
# 5. 设置开机自启（避免服务器重启后Docker失效）
systemctl enable docker
# 6. 验证安装（显示版本号即成功）
docker --version
2.3 配置阿里云镜像加速（必做！）
Docker 默认镜像源在国外，拉取速度慢，需配置阿里云专属加速地址：
- 登录阿里云控制台，左侧菜单找到 "容器镜像服务"→"镜像工具"→"镜像加速器"，复制你的专属加速地址（如
https://abc123.mirror.aliyuncs.com）。 - 在 Xshell 执行以下命令（替换加速地址）：
# 创建Docker配置目录
mkdir -p /etc/docker
# 写入加速配置（右键粘贴整段命令）
tee /etc/docker/daemon.json <<-'EOF'
{
"registry-mirrors": ["https://你的加速地址.mirror.aliyuncs.com"]
}
EOF
# 重启Docker使配置生效
systemctl daemon-reload
systemctl restart docker
三、前端配置：Vue 项目容器化改造
本地修改 Vue 项目，使其适配 Docker 部署，并构建镜像。
3.1 统一接口地址（解决跨域与 IP 问题）
- 在 Vue 项目
src目录下新建utils/config.js，统一管理 API 地址：
// src/utils/config.js
// 替换为你的服务器公网IP
export const API_BASE_URL = 'http://123.123.123.123:8000/api'
- 修改接口请求文件（如
src/utils/request.js）：
import axios from 'axios'
import { API_BASE_URL } from './config' // 导入配置
const request = axios.create({
baseURL: API_BASE_URL, // 替换原来的localhost:8000
timeout: 5000
})
// 其他拦截器代码不变
export default request
- 检查所有页面中硬编码的 IP（如登录、数据请求处），统一替换为
API_BASE_URL：
// 错误示例
await axios.post('http://localhost:8000/api/login', data)
// 正确示例
import { API_BASE_URL } from '@/utils/config'
await axios.post(`${API_BASE_URL}/login`, data)
3.2 构建前端静态文件
在本地终端（CMD 或 VS Code 终端）执行：
# 进入Vue项目目录
cd C:\你的项目路径\vue-project
# 安装依赖（已安装可跳过）
npm install
# 构建生产环境文件（生成dist文件夹）
npm run build
构建成功后，项目根目录会出现dist文件夹，内含编译后的静态资源。
3.3 创建前端 Docker 配置文件
- 在 Vue 项目根目录新建
Dockerfile（用于构建镜像）：
# 使用轻量的Nginx镜像
FROM nginx:alpine
# 删除Nginx默认配置
RUN rm /etc/nginx/conf.d/default.conf
# 复制自定义Nginx配置（下面会创建）
COPY nginx.conf /etc/nginx/conf.d/
# 将本地dist文件夹复制到容器中Nginx的默认目录
COPY dist/ /usr/share/nginx/html/
# 暴露80端口（Nginx默认端口）
EXPOSE 80
# 启动Nginx（前台运行，避免容器退出）
CMD ["nginx", "-g", "daemon off;"]
- 同目录下新建
nginx.conf（解决路由和反向代理）：
server {
listen 80;
server_name localhost;
# 前端文件目录（与Dockerfile中一致）
root /usr/share/nginx/html;
index index.html;
# 解决Vue路由刷新404问题
location / {
try_files $uri $uri/ /index.html;
}
# 反向代理后端API（替换为服务器公网IP）
location /api/ {
proxy_pass http://123.123.123.123:8000/api/;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
}
}
四、后端配置：FastAPI 项目容器化改造
为 FastAPI 项目创建 Dockerfile 和依赖文件，实现容器化部署。
4.1 创建 Dockerfile（指定 Python 环境）
在 FastAPI 项目根目录（与main.py同级）新建Dockerfile：
# 使用Python 3.12镜像（需与本地开发版本一致）
FROM python:3.12-slim
# 设置容器内工作目录
WORKDIR /app
# 复制依赖文件到容器
COPY requirements.txt .
# 用清华源安装依赖（加速国内下载）
RUN pip install --no-cache-dir -r requirements.txt -i https://pypi.tuna.tsinghua.edu.cn/simple
# 复制所有项目文件到容器
COPY . .
# 暴露8000端口（FastAPI默认端口）
EXPOSE 8000
# 用gunicorn作为生产服务器（比uvicorn更稳定）
CMD ["gunicorn", "main:app", "-w", "4", "-k", "uvicorn.workers.UvicornWorker", "-b", "0.0.0.0:8000"]
4.2 完善 requirements.txt（依赖清单）
同目录下新建requirements.txt，列出所有依赖（根据项目补充）：
fastapi==0.104.1 # FastAPI框架
uvicorn==0.24.0 # ASGI服务器
gunicorn==21.2.0 # 生产级WSGI服务器
pymysql==1.1.0 # MySQL驱动（如有数据库）
sqlalchemy==2.0.23 # ORM工具（如有数据库）
python-multipart==0.0.6 # 支持文件上传
五、构建镜像并上传到服务器
将前后端项目打包成 Docker 镜像，并上传到阿里云服务器。
5.1 构建后端镜像（本地操作）
# 进入后端项目目录
cd C:\你的项目路径\fastapi-project
# 构建镜像（标签格式：镜像名:版本）
docker build -t fastapi-app:v1 .
执行成功后，本地会生成fastapi-app:v1镜像，可通过docker images查看。
5.2 上传后端镜像到服务器（两种方法）
方法一：通过 Docker Hub（推荐新手）
-
本地登录 Docker Hub（先去官网注册账号）：
docker login # 输入用户名和密码 -
给镜像打标签（格式：
用户名/镜像名:版本）：docker tag fastapi-app:v1 你的用户名/fastapi-app:v1 -
推送到 Docker Hub：
docker push 你的用户名/fastapi-app:v1 -
服务器拉取镜像（Xshell 中操作）：
docker pull 你的用户名/fastapi-app:v1
方法二：通过文件传输（无网络时用）
-
本地将镜像保存为 tar 文件：
docker save -o fastapi-app.tar fastapi-app:v1 -
上传到服务器（本地 CMD 执行，替换 IP）：
scp fastapi-app.tar root@123.123.123.123:/home/输入服务器密码，等待上传完成（根据项目大小，可能需要几分钟）。
-
服务器加载镜像（Xshell 中操作）：
docker load -i /home/fastapi-app.tar
5.3 构建并上传前端镜像（与后端步骤相同）
# 进入前端项目目录
cd C:\你的项目路径\vue-project
# 构建镜像
docker build -t vue-app:v1 .
# 上传到服务器（用上述两种方法之一）
六、启动容器：项目上线
在服务器上启动前后端容器，完成最终部署。
6.1 启动后端容器（Xshell 操作）
# 启动FastAPI容器，映射8000端口（宿主机端口:容器端口）
docker run -d --name fastapi-container -p 8000:8000 fastapi-app:v1
# 查看启动状态（STATUS为Up即成功）
docker ps
6.2 启动前端容器（Xshell 操作）
# 启动Vue容器，映射80端口
docker run -d --name vue-container -p 80:80 vue-app:v1
# 查看启动状态
docker ps
七、验证部署与问题排查
7.1 验证项目是否正常运行
打开本地浏览器，输入服务器公网 IP（如http://123.123.123.123）：
- 能看到 Vue 前端页面 → 前端部署成功。
- 能正常登录、加载数据 → 后端接口和反向代理配置成功。
7.2 常见问题排查
-
无法访问页面：
检查阿里云安全组是否开放 80（HTTP）和 8000 端口：
阿里云控制台→ECS→实例→安全组→配置规则→添加 80 和 8000 端口的入站规则。 -
后端接口报错：
查看后端容器日志：docker logs fastapi-container # 查看详细错误信息常见原因：依赖缺失（检查 requirements.txt）、数据库连接失败（检查配置）。
-
前端页面空白：
查看前端容器日志：docker logs vue-container常见原因：
dist文件未正确复制（检查 Dockerfile 路径）、Nginx 配置错误（检查nginx.conf）。 -
重启容器：
若修改了配置，可重启容器生效：docker restart fastapi-container # 重启后端 docker restart vue-container # 重启前端
结语
通过 Docker 部署 FastAPI+Vue 项目，不仅规避了环境配置的繁琐，还能保证开发环境与生产环境的一致性。本文步骤覆盖从本地配置到服务器部署的全流程，核心在于理解 "镜像构建→上传→容器启动" 的逻辑。后续如需更新项目，只需重新构建镜像并替换容器即可，极大简化了维护成本。容器化部署已成为现代应用的标配，掌握这一技能将显著提升你的开发效率。
腾讯云面向开发者汇聚海量精品云计算使用和开发经验，营造开放的云计算技术生态圈。
更多推荐
29
0- 0
已为社区贡献1条内容
所有评论(0)