1小时学会FastAPI+Vue项目服务器部署教程（零基础小白版）

课程简介

把本地跑通的 FastAPI + Vue 项目部署到云服务器，让公网 IP 或域名可以直接访问。全程使用 1Panel 面板可视化操作，从安装运行环境、打包上传，到容器编排、反向代理与 HTTPS 上线，跟完能独立完成一次完整部署。课程以实验室预约系统为例演示，步骤同样适用于自己的项目。

%%{init: {
  "theme": "base",
  "themeVariables": {
    "fontFamily": "inherit",
    "primaryTextColor": "#1f2328",
    "lineColor": "#59636e",
    "secondaryColor": "#ddf4ff",
    "tertiaryColor": "#dafbe1",
    "clusterBkg": "#f7f8fa",
    "clusterBorder": "#c3c7cb",
    "titleColor": "#1f2328"
  }
}}%%
flowchart LR
  B[浏览器]
  subgraph S["云服务器 · Docker"]
    N[OpenResty 反向代理]
    F[Vue 静态文件]
    A[FastAPI 容器]
    M[(MySQL)]
  end
  B --> N
  N --> F
  N --> A
  A --> M

  classDef c1 fill:#ddf4ff,stroke:#0969da,color:#1f2328,stroke-width:1.5px
  classDef c2 fill:#dafbe1,stroke:#1a7f37,color:#1f2328,stroke-width:1.5px
  classDef c3 fill:#fff8c5,stroke:#9a6700,color:#1f2328,stroke-width:1.5px
  classDef c4 fill:#ffebe9,stroke:#cf222e,color:#1f2328,stroke-width:1.5px
  class B c1
  class N c2
  class F c2
  class A c3
  class M c4

适合谁

已有本地能跑的 FastAPI + Vue 项目，想部署到公网访问
没接触过服务器，不知道部署从哪里下手
想搞清 1Panel / Docker / Nginx 在部署里各自扮演什么角色

能学到什么

云服务器初始化：1Panel 与 Docker 安装、MySQL 与 OpenResty 一键部署、建库建用户
前后端打包与上传（Windows / macOS 双端指令）
Docker Compose 编排后端服务：网络、环境变量与数据挂载
反向代理配置：单页路由回退、接口转发、上传文件转发
HTTPS 证书申请、日常更新与常见故障排查

环境要求

云服务器：2 核 4G 及以上，Ubuntu 22.04，具备公网 IP 与 root 权限
本地：Windows 或 macOS，Node.js 22+，用于前端打包
一个本地可运行的 FastAPI + Vue 项目

技术栈

环节	技术
服务器面板	1Panel
容器与编排	Docker · Docker Compose
数据库	MySQL 8.x
Web 服务	OpenResty（Nginx）
后端	FastAPI + Uvicorn
前端	Vue 3 构建产物，静态托管
HTTPS	Let's Encrypt

部署路线

安装 1Panel 与 Docker，配置镜像加速
安装 MySQL 与 OpenResty，建库建用户
本地打包前后端；准备 Dockerfile、.env 与 docker-compose.yml
上传文件，在面板导入数据库
创建编排，构建并启动后端容器
创建静态网站托管前端，配置反向代理
申请 HTTPS（可选），熟悉日常更新与排错

图文笔记站内阅读，视频在 B 站对应分集。