vue-fastapi-admin 部署心得

fastapiadmin__0">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-bullseye

WORKDIR /opt/vue-fastapi-admin

COPY 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-tools

RUN pip install poetry -i https://pypi.tuna.tsinghua.edu.cn/simple \
    && poetry config virtualenvs.create false \
    && poetry install --no-root \
    && rm pyproject.toml

ENV 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.0
    ports:
      - "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.sh
    command: sh entrypoint.sh
    environment:
      - LANG=zh_CN.UTF-8

compose-frontend.yaml (新增文件)

这个文件主要是为了方便编译前端代码使用的。

services:
  frontend:
    image: node:18
    container_name: frontend
    volumes:
      - ./web:/app/web
    command: "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 重启容器即可。

在这里插入图片描述