flask+vue服务器docker搭建前后端分离项目

本篇文章旨在分享我最近搭的flask+vue前后端分离的小项目的心得，主要是在服务器docker部署过程中遇到的问题以及解决方式，仅供大家参考。如果有不合理之处欢迎批评指正。

flask项目创建

新手推荐在本地机完善好项目逻辑以后再将项目上传到云服务器端，这是一种更稳妥高效的开发方式。

flask项目上传到云服务端之前先确定自己的项目文件格式如下，保证app.py在项目根目录下，强烈推荐加上__init__.py 即使它是个空文件，方便进行引入，例如例如通过 from app import create_app），则必须存在 __init__.py（即使是空文件）

/your_project  # 项目根目录 │ ├── app.py  # 主应用入口，初始化Flask应用和路由 ├── __init__.py  ├── apps  # 应用核心模块 │   ├── __init__.py  │   ├── blueprints  # 蓝图模块，组织路由逻辑 │   │   └── __init__.py   │   ├── models.py  # 数据库模型定义 │   ├── static  # 静态资源（如果有） │   └── templates  # 模板文件（如果有） └── requirements.txt  # 项目运行需要的依赖，通俗的说就是要安装的软件包

vue项目创建

我感觉vue项目的创建比后端要简单很多，可能是我在创建和打包vue项目时比较顺利。

其中最应该注意的就是前后端分离的项目引入API比较多，为了避免每次迁移项目都要修改每个API，我选择了在main.js中定义export const baseURL = '这里写后端API的根地址';其他组件调用后端API时可以直接取main.js中的baseURL加上对应路由。这样的话在迁移项目的时候只要在main.js中修改baseURL的值就行。

下面就是我主要要分享的docker环节。

为什么要使用docker

        Docker 最明显的特征就是可移植性强。比如说，你拉取了一个官方的 python:3.11-slim 镜像，就可以在任何支持 Docker 的服务器（无论是本地开发机、测试环境还是云服务器）上运行，而无需担心 Python 版本、系统依赖或环境配置的差异。

        既然官方能发布镜像，那么我们能不能搭建一个属于自己特定项目的docker镜像呢?答案是可以。

相信很多同学和我初学docker时一样对docker的概念很模糊，你可以把docker容器理解为一个有特定功能的容器，比如说你在这个容器中运行了一个python后端项目，你把这个容器映射到了云服务器的5000端口，那么你就可以在前端通过服务器公网地址:5000来访问这个容器中的API进行提交POST和GET请求。当然这个前提是你在服务器端开放了对应的5000端口。需要注意的是我这里说的是docker容器。

如果你的项目使用了数据库，在配置后端flask项目之前建议你先把数据库配置好，数据库不建议用docker容器配置，因为docker容器如果意外停止数据库中的数据可能会意外丢失。

flask项目docker容器的创建

首先你要有一个安装了docker的云服务器，如果你的云服务器中没有安装docker请先正确安装docker，这里我推荐使用宝塔一键安装docker，大家可以自行搜索一些相关资料。

创建自己项目镜像可以选择dockerfile，也可以选择自己手动创建，作为初学者我更倾向于先自己手动创建几遍，然后再使用dockerfile。在这里我要和大家分享的是如何手动一步一步创建，如果你要问我为什么不直接分享更方便的dockerfile，那么我就要告诉你其实我也不会这个。。。

接下来废话不多说，首先拉取python官方发布的镜像作为基础

docker pull python:3.11-slim

接下来的操作建议你开一个tmux分屏操作，或者开两个窗口，一个窗口在你云服务器的用户界面，另一个窗口在你创建的临时容器的用户界面。

创建并进入临时容器

docker run -it –name temp-flask python:3.11-slim bash

如果你通过这个docker容器提交的镜像准备长期使用的话，建议你创建一个新的用户并且分配sudo权限然后在这个用户下进行配置。下面就是创建一个新的用户并且在这个用户下进行配置。

下面的bxz是你创建的用户名 

adduser -m bxz

 然后设置你的密码，一直回车，然后会弹出一个选项，直接选择Y。这样你的docker容器就有了一个新的用户。接下来输入下面的指令切换到你创建的用户。

su – bxz

输入下面指令查看你的用户所在的文件夹，一般都是/home/你的用户名

echo ~bxz

刚刚你开了个tmux分屏，在另一个界面中输入下面指令把你的后端项目传到你的临时容器对应的用户下。

docker cp 你的项目名 <你的容器ID或名称>:/home/bxz/

复制完成后，你可以ls检查一下是否成功传输。文件的所有者可能是 root。你可以进入容器对应的分屏，执行以下命令把文件所有权变更为 bxz 用户：

chown -R bxz:bxz /home/bxz/flask01

下面进行虚拟环境配置，因为你创建的是python镜像的容器，所以可以直接输入下面指令

python3 -m venv myenv
source myenv/bin/activate

如果在用户名前面看到（myenv）那么你就成功激活了虚拟环境，下面在这个虚拟环境下安装依赖，配置虚拟环境的好处是可以保护系统环境还有就是方便迁移和部署。

下面进入你的项目文件，ls之后你会看到你之前创建的requirements.txt文件，这里面放的是你的项目所需要的依赖，下面进行依赖的安装，依赖安装之前建议你先进行换源，这样下载速度比较快

cd flask01 #flask01换成你的项目名称
pip install -r requirements.txt

等待一段事件之后依赖就安装完成了，接下来尝试启动python项目

python3 app.py

如果你完整安装了依赖那么你的python项目就能成功启动了（如果你使用了数据库还要先配置好数据库的内容），接下来就是最重要的环节了——把你的容器提交为自己的镜像。注意这个命令要在你的云服务器的用户下执行而不是python容器的用户下。

docker commit temp-flask my-flask-image:latest

docker images

这样你就能看到你有了一个新的镜像my-flask-app，接下来就可以对你自己的镜像进行部署了,我这边是把后端跑在了5000端口

docker run -it -p 5000:5000 –name my-flask-container my_flask_image:v1 bash

接下来手动启动flask项目

source myenv/bin/activate
cd flask01
python3 app.py

如果你前面的操作都正确，那么这一步也不会出什么差错，恭喜你已经拥有了属于自己的镜像。

vue项目docker容器的创建

浏览器只能识别基础的静态页面（除非你安装了特定插件），所以在上线vue项目之前还要对它进行打包，我用的编辑器是vscode，直接在终端输入nmp run build等待一段时间后项目目录下会出现一个dist文件夹，这个文件夹里面的内容就是我们要在服务器端部署的前端项目。部署方式比上面的后端更简单。

vscode终端输入下面命令先把dist目录上传到服务器端

scp -r dist/ user@your-server:/home/bxz/vue-project

服务器端分配文件权限

chmod -R 755 ./dist

然后拉取nginx官方镜像

docker pull nginx
docker images

如果你在vue项目中路由下使用了history模式，那么你在服务器端配置dist时还要多一个配置服务器的步骤，否则会出现刷新页面弹出404的错误。

下面是服务器配置的操作，如果你没有启用history模式就不用这个，还是建议启用这个模式，这样用户点击导航栏切换页面时浏览器不用重新加载页面，而是直接渲染，速度比较快，有助于增强用户体验

mkdir -p ~/nginx-config
cat > ~/nginx-config/default.conf <<EOF
server {
listen 80;
server_name localhost;
location / {
root /usr/share/nginx/html;
index index.html;
try_files \\$uri \\$uri/ /index.html;
}
}
EOF

然后挂载并运行docker容器

docker run -d \\
-p 8080:80 \\
-v $(pwd)/dist:/usr/share/nginx/html \\
-v ~/nginx-config:/etc/nginx/conf.d \\
–name vue-nginx \\
nginx

如果你在防火墙打开了8080端口并且前后端通信的配置没有错误的话，那么恭喜你已经完成了自己网站的搭建。

创作不易，只为能帮助到你。如有不准确之处还望大佬批评指正。