云端环境部署Springboot+Vue+Flask项目教程(Docker)

Yichen.

已于 2023-07-12 15:01:33 修改

阅读量1.7k

点赞数 2

分类专栏：运维 JavaWeb Docker 文章标签： flask spring boot vue.js docker

于 2023-06-16 22:22:06 首次发布

本文链接：https://blog.youkuaiyun.com/wyc1274540748/article/details/131252717

版权

运维同时被 3 个专栏收录

1 篇文章

订阅专栏

JavaWeb

1 篇文章

订阅专栏

Docker

1 篇文章

订阅专栏

该文详细介绍了如何使用Docker部署Flask后端项目、Vue前端应用以及MySQL和Redis数据库。首先，通过生成requirement.txt和Dockerfile来构建Flask镜像。接着，配置并构建Vue项目的Docker镜像，利用Nginx作为反向代理。最后，部署MySQL和Redis数据库，确保后端服务正常运行。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先在服务器安装Docker（Docker安装教程）

1.Flask项目部署（Docker方式）

本地端为算法后端生成requirement.txt和Dockerfile文件

1.Flask项目部署（Docker方式）

本地端为算法后端生成requirement.txt和Dockerfile文件

requirement.txt：用来让docker识别需要安装哪些包

通过在终端执行以下代码生成requirement.txt

pip install pipreqs
pipreqs ./ --encoding=utf8 --force

requirement.txt文件内容：

Flask==2.1.0
joblib==1.2.0
matplotlib==3.5.2
numpy==1.21.5
pandas==1.4.4
paramiko==2.8.1
scikit_learn==1.2.2
scipy==1.9.1
torch==1.12.1

新建Dockerfile文件：Docker会执行里面的指令，用来构建镜像。Dockerfile文件内容：

FROM python:3.9
WORKDIR /app
MAINTAINER Wangyichen
# 工作目录，这个目录对应于镜像内的工作目录，后面的所有涉及到路径的操作都可以
# 使用WORKDIR的相对路径来指定
 # 基础镜像，python3.9
  # 镜像作者信息

COPY requirements.txt requirements.txt
# 拷贝requirements.txt 到 镜像中/app/requirements.txt

RUN pip install -r requirements.txt -i https://pypi.tuna.tsinghua.edu.cn/simple
# 安装pip包
COPY . .
# 将当前文件中的目录复制到/app目录下

ENV FLASK_APP app
# 设置环境变量，让flask run 命令能够找到启动文件的位置

CMD ["flask","run","-h","0.0.0.0","-p","5000"]
# 执行启动命名 flask run -h 0.0.0.0 -p 5000 列表中的每个元素之间代表空格

上传flask项目到云端，构建镜像

由于本地端和服务器Cuda不兼容的问题，取出在本地端训练过的模型，在云端加载不了，目前的一种解决方案（需要删除掉之前在本地端已经保存的模型，否则会报错！！具体操作为删除掉/Model里面每个模型的saver文件夹）

为了便于Clone代码，可以下载Git（Linux下Git安装教程）,或者通过XFTP将文件传到指定文件夹，这里放在/root文件夹下

上述工作准备完成后，构建算法后端镜像

cd进入到/AlgorithmBackCode文件夹下

执行以下指令，Docker Build构建镜像(注意名称必须小写)，此处大概需要几分钟用来下载依赖库

docker build -t algorhthmbackcode1:0.1 .

docker images查看当前镜像

运行镜像（参数含义请查看博客）,此处5000：5000含义为外部（WEB）的5000端口映射到容器内的5000端口

docker run -d --name pythonback -p  5000:5000 algorhthmbackcode1:0.1

查看当前运行的容器

此时可用Postman测试ip:5000端口，测试flask项目是否正常运行。返回正常，部署成功。

2.前端Vue项目部署（Docker）

配置文件修改及准备

在前端./myvue文件夹下新建Dockerfile文件和Nginx.conf文件

Dockerfile：执行里面的指令，用来识别、创建镜像，Dockerfile内容如下：

# 基础镜像
FROM nginx
#创建app目录
WORKDIR /app
# 作者
MAINTAINER wangyichen
#将打包后的dict目录复制到容器的app目录下
COPY ./dist/  /usr/local/dist
# 用自定义的nginx.conf 去覆盖镜像中原本的nginx.conf配置u文件
ADD ./nginx.conf /etc/nginx/nginx.conf
#暴露端口，也就是会在容器的80端口提供你的Vue项目(这个端口可以设置为其他的，别和其他的端口重复就行)
EXPOSE 80

nginx.conf：它使用配置文件决定如何提供内容、要监听的端口等，nginx.conf内容如下（XXX修改为要部署的IP地址）：

# 其中XXXX为要部署的服务器的IP地址
worker_processes  2;

events {
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;

    sendfile        on;

    keepalive_timeout  65;

    server {
# 这里端口与上面对应
        listen       80;
        server_name  xxxx;

        error_page   500 502 503 504  /50x.html;
# 自定义反向代理的端口，与前端./config下的index.js对应一致
	location /apis/{
            proxy_pass http://xxxxxx:80/;
	}

	location /api/{
	   proxy_pass http://xxxxx:5000/;
	}

        location / {
      root   /usr/local/dist;   # dockerfile中创建的app,里面有打包后的dist文件
      index  index.html;
      try_files $uri $uri/ /index.html;
	}
     }
}

前端项目/config下的index.js文件修改如下，将马赛克部分修改为自己的服务器IP地址,与nginx.conf内的修改一致（由于本项目用到与其他端口通讯，所以这里需要添加proxyTable）

执行如下指令，构建dist镜像，然后将前端项目传送到服务器上

npm run build

镜像构建及运行

拉取Nginx基础镜像

docker pull nginx

在./myvue下执行如下指令，构建镜像

docker build -t front_vue:1.0 .

查看镜像，镜像构建成功

执行以下指令，生成容器运行镜像。此处82：81含义为外部（WEB）的81端口映射到容器内的81端口（端口可自己设定，但要注意服务器防火墙、以及配置文件内的端口对应）

docker run -d --name front_vue1.0 -p 82:81 front_vue:1.0

容器启动成功

浏览器输入ip:82端口，容器运行成功（此处由于服务器加载慢，暂未显示）

3.后端及数据库部署（Docker方式）

Mysql数据库部署

docker拉取MySql5.7 镜像

docker pull mysql:5.7

查看是否拉取成功

docker images

运行容器（各参数请查看其他博客）

docker run --name mysql5.7 -p 3306:3306 -e MYSQL_ROOT_PASSWORD=123456 -d mysql:5.7

查看容器是否运行成功

测试连接云端数据库是否成功，成功说明Mysql容器正常运行

打开本地Navicat，将本地数据库导出为sql语句

在云端新建数据库，在数据库中导入刚才转储的SqL语句，完成数据的导入

数据导入完成，完成云端的Mysql数据库的部署

Redis部署

拉取redis镜像(redis:6.2，代表拉取制定版本的redis,一定要与配置文件对应，否则会报错)

Docker pull redis:6.2

为redis创建配置文件redis.conf(可以从官网获取)和data文件夹，如下：

需要对redis.conf配置文件进行修改，各参数介绍：

# 设置 redis 连接密码（与后端application.yml文件中对应）
requirepass 123456789

# 数据持久化
appendonly yes

# 端口（建议修改）
port 6379（与后端application.yml文件中对应）

# 后台启动
daemonize yes


#  下面这两步不修改的话会造成无法连接的问题
# 修改 protected-mode 为 no
protected-mode no

# 注释 bind 127.0.0.1 (允许远程连接)

启动Redis容器

docker run -d -p 6379:6379 \
> --name redis \
> --restart=always \
> -v /root/industrialplatform/redis_conf/data:/data \
> -v /root/industrialplatform/redis_conf/redis.conf:/etc/redis/redis.conf \
> redis:6.2 \
> redis-server /etc/redis/redis.conf \
> --appendonly yes

docker ps查看容器启动成功

SpingBoot部署

前期准备/配置文件修改

修改Application.yml配置文件，将本地端的相关配置修改为云端

通过Maven打包生成Jar镜像

创建Dockerfile文件，如下：

# Java：8指还有jdk1.8的镜像
FROM java:8
# 作者信息
MAINTAINER wangyichen
# 指定了临时文件目录为/tmp。
# 其效果是在主机 /var/lib/docker 目录下创建了一个临时文件，并链接到容器的/tmp
VOLUME /tmp
# 添加文件到容器的aa.jar,
ADD back-0.0.1-SNAPSHOT.jar app.jar
ENTRYPOINT ["java","-Djava.security.egd=file:/dev/./urandom","-jar","/app.jar"]

上传文件，构建镜像，确保Jar和Dockerfile在同一目录下

执行以下命令构建后端SpringBoot项目镜像

docker build . -t javaback:1.0

执行以下命令创建容器，运行镜像

docker run -d -p 80:80 --name javaback1 javaback:1.0

镜像运行成功

浏览器输入对应端口，运行成功，部署完毕