vue-fastapi-admin 部署心得
这两天需要搭建一个后台管理系统，找来找去 vue-fastapi-admin 这个开源后台管理框架刚好和我的技术栈所契合。于是就浅浅的研究了一下。
主要是记录如何基于原项目提供的Dockerfile进行调整，那项目文件放在容器外部，便于Diy代码。
经常接触开源项目的小伙伴都知道，通常开源项目给的 镜像 以及 Dockerfile 都是把 项目包含在内的，也就是说你可以直接跑起来体验，但是改代码之后如何反应进去就是个问题。OK，就说这么多，开始我的记录~
一、项目信息
项目名：vue-fastapi-admin
技术栈：vite + vue3 + fastapi+ Naive UI + Nginx + sqlite3
搭建环境：ubuntu22.04
项目地址：
gitee: https://gitee.com/mizhexiaoxiao/vue-fastapi-admin
github: https://github.com/mizhexiaoxiao/vue-fastapi-admin
二、拉取项目
这部分就不细说了，安装 git 工具之后，使用 git clone + 上面的项目地址即可拉取到本地。
三、修改相关文件
这部分有一个技巧，我是通过 豆包 AI去做的，整体思路就是让它去帮你把Dockerfile，后续想通过文件映射的方式启动。
中间遇到了很多问题，也学习到了很多~
这里直接给出最终的相关文件~
Dockerfile（修改）
主要是剔除了前端构建、以及删减了除 pyproject.toml 以外的项目文件。纯纯的只保留python环境构筑的部分。
FROM python:3.11-slim-bullseyeWORKDIR /opt/vue-fastapi-adminCOPY pyproject.toml .RUN --mount=type=cache,target=/var/cache/apt,sharing=locked,id=core-apt \--mount=type=cache,target=/var/lib/apt,sharing=locked,id=core-apt \sed -i "s@http://.*.debian.org@http://mirrors.ustc.edu.cn@g" /etc/apt/sources.list \&& rm -f /etc/apt/apt.conf.d/docker-clean \&& ln -sf /usr/share/zoneinfo/Asia/Shanghai /etc/localtime \&& echo "Asia/Shanghai" > /etc/timezone \&& apt-get update \&& apt-get install -y --no-install-recommends gcc python3-dev bash nginx vim curl procps net-toolsRUN pip install poetry -i https://pypi.tuna.tsinghua.edu.cn/simple \&& poetry config virtualenvs.create false \&& poetry install --no-root \&& rm pyproject.tomlENV LANG=zh_CN.UTF-8
EXPOSE 80
compose.yaml（新增）
我习惯性使用 docker compose 去操作容器，所以额外做了一个compose文件，主要是做端口映射以及项目文件的映射。这是一个前后端分离的项目，使用 nginx 做静态资源部署以及 反向代理 /api/ 请求到 fastapi 的服务。
当前配置启动后，访问宿主机的 8080 端口即可访问到前端的主页，9999 端口主要是暴露后台服务，方便我直接访问 9999/docs 接口查看接口文档的，实际上也可以不用。
version: '3'services:vue-fastapi-admin:image: vue-fastapi-admin:1.0ports:- "9999:9999"- "8080:80"volumes:- ./web:/opt/vue-fastapi-admin/web- ./deploy/web.conf:/etc/nginx/sites-available/web.conf- .:/opt/vue-fastapi-admin- ./deploy/entrypoint.sh:/opt/vue-fastapi-admin/entrypoint.shcommand: sh entrypoint.shenvironment:- LANG=zh_CN.UTF-8
compose-frontend.yaml (新增文件)
这个文件主要是为了方便编译前端代码使用的。
services:frontend:image: node:18container_name: frontendvolumes:- ./web:/app/webcommand: "sh -c 'npm config set registry https://registry.npmmirror.com && cd /app/web && npm install && npm run build'"
build.sh （新增）
这个文件是为了记录构建容器命令创建的，执行后在后台构建，可通过 build.log 文件查看构建状态。
#! /bin/bash
nohup docker build -t vue-fastapi-admin:1.0 . > build.log 2>&1 &
deploy/entrypoint.sh (修改)
主要是加入nginx配置的软连接，web.conf 配置了 api 服务的反向代理。
#!/bin/sh
set -e
rm -f /etc/nginx/sites-enabled/default
ln -s /etc/nginx/sites-available/web.conf /etc/nginx/sites-enabled/
nginx
python run.py
四、项目启动
执行顺序如下：
sh build.sh构建vue-fastapi-admin:1.0镜像docker compose -f compose-frontend.yaml up && docker compose -f compose-frontend.yaml down编译前端代码，完成后删除容器docker compose -f compose up -d启动项目
然后你可以访问 8080 端口查看你的项目：
在这之后，如果你改了前端代码，执行 2 就可以被反应上去，改了后端代码 执行 3 重启容器即可。
写在最后
这是我第一次搭建三方的开源管理项目，感叹自己的渺小，学到了很多新的知识，也意识到自身的问题。感谢无私奉献的大佬们，也愿看到的小伙伴能够少走弯路~
