docker部署Flask+Vue3项目

创建数据库

创建数据库配置文件

mkdir -p /data/dockerData/mysql/conf

cd /data/dockerData/mysql/conf

vi my.config

my.config文件内容

[mysql]
#设置mysql客户端默认字符集
default-character-set=UTF8MB4
 
[mysqld]
#设置3306端口
port=3306
 
#允许最大连接数
max_connections=200
 
#允许连接失败的次数
max_connect_errors=10
 
#默认使用"mysql_native_password"插件认证
default_authentication_plugin=mysql_native_password
 
#服务端使用的字符集默认为8比特编码的latin1字符集
character-set-server=UTF8MB4
 
#开启查询缓存
explicit_defaults_for_timestamp=true
 
#创建新表时将使用的默认存储引擎
default-storage-engine=INNODB
 
#等待超时时间秒
wait_timeout=60
 
#交互式连接超时时间秒
interactive-timeout=600
secure_file_priv=/var/lib/mysql
 
[client]
default-character-set=UTF8MB4

拉取运行mysql镜像

docker pull mysql:5.7

docker run  --privileged -d -p 3306:3306 -v /data/dockerData/mysql/conf/my.config:/etc/mysql/my.config -v /data/dockerData/mysql/logs:/logs -v /data/dockerData/mysql/data:/var/lib/mysql -e MYSQL_ROOT_PASSWORD=密码 --name mysql5.7 镜像id

将sql文件传入/data/dockerData/mysql/data文件夹

进入mysql容器

docker exec -it a1ff98487160 /bin/bash

登入mysql

bash-4.2# mysql -uroot -p
Enter password: 

创建项目数据库

#创建数据库
create database xxx;
#使用数据库
use xxx;

#导入数据
source /var/lib/mysql/data/liu_oa.sql

开通3306端口

firewall-cmd --zone=public --add-port=3306/tcp --permanent

firewall-cmd --reload

打包部署flask后端项目

生成项目依赖包

pip freeze > requirements.txt

项目入口文件(app.py)修改

if __name__ == '__main__':
    app.run(host="0.0.0.0", port=9000, debug=True)

创建Dockerfile文件

文件结构

Dockerfile文件内容

FROM python:3.8

# 设置 pip 镜像源为阿里云镜像
ENV PIP_INDEX_URL=https://mirrors.aliyun.com/pypi/simple/

# 设置镜像源不验证 SSL
ENV PIP_TRUSTED_HOST=mirrors.aliyun.com

RUN mkdir /app
WORKDIR /app

COPY requirements.txt .
RUN pip install -r requirements.txt

# 复制整个应用程序到 app 目录中
COPY *.py /app/
COPY blueprints/ /app/blueprints/
COPY templates/ /app/templates/

# 设置 Flask 环境变量
ENV FLASK_APP=app.py

EXPOSE 9000

# 启动 Flask 应用
CMD ["python", "app.py", "--host=0.0.0.0"]

将项目打成压缩包发送到服务器

解压进入项目目录中，构建镜像

docker build -t 镜像名:1.0 .

运行镜像

docker run -d -p 9000:9000 --name 容器名 镜像id

开通端口

firewall-cmd --zone=public --add-port=9000/tcp --permanent

firewall-cmd --reload

测试

[root@docker_01 ~]# curl http://localhost:9000
[
  {
    "author": "yohoo",
    "content": "\u6211\u7684\u5bc6\u7801\u662f123456",
    "create_time": "Fri, 11 Oct 2024 17:03:09 GMT",
    "id": 2,
    "title": "\u6211\u662fyohoo\u54c8\u54c8\u54c8"
  },
  {
    "author": "zzz",
    "content": "\u575a\u6301\u4e0d\u61c8 \u594b\u6597",
    "create_time": "Fri, 11 Oct 2024 16:05:33 GMT",
    "id": 1,
    "title": "\u600e\u4e48\u5b66\u597dpython"
  }
]

打包部署vue3前端项目

前端项目打包

npm run build

创建nginx配置文件

default.conf

server {
    listen       80;
    server_name  宿主机ip; # 修改为docker服务宿主机的ip

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html =404;
    }

    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   html;
    }
}

创建Dockerfile文件

文件内容

FROM nginx

MAINTAINER yohoo

RUN rm /etc/nginx/conf.d/default.conf

ADD default.conf /etc/nginx/conf.d/

COPY dist/ /usr/share/nginx/html/

打包dist项目上传至服务器

目录结构

解压进入项目目录中，构建镜像

docker build -t 镜像名:1.0 .

运行镜像

docker run -d -p 88:80 --name 容器名 镜像id

开通端口

firewall-cmd --zone=public --add-port=88/tcp --permanent

firewall-cmd --reload

测试

tips

解决页面引入本地图片可能出现无法加载问题

创建pub-use.js

const getAssetsFile = (url)=>{
    return new URL(`../assets/images/${url}`,import.meta.url).href;
}

export default {getAssetsFile}

vue文件使用

import pubUse from "@/utils/pub-use.js";

<img :src="pubUse.getAssetsFile('avatar.jpg')"/>

镜像上传阿里云

登录

[root@docker_01 liu_oa_docker]# docker login --username=淘宝id registry.cn-hangzhou.aliyuncs.com
Password: 
WARNING! Your password will be stored unencrypted in /root/.docker/config.json.
Configure a credential helper to remove this warning. See
https://docs.docker.com/engine/reference/commandline/login/#credentials-store

Login Succeeded

推送

docker tag [ImageId] registry.cn-hangzhou.aliyuncs.com/命名空间/仓库名:[镜像版本号]
docker push registry.cn-hangzhou.aliyuncs.com/命名空间/仓库名:[镜像版本号]