docker摆设Flask+Vue3项目

创建数据库

创建数据库配置文件

1. mkdir -p /data/dockerData/mysql/conf
3. cd /data/dockerData/mysql/conf
5. vi my.config

复制代码

  my.config文件内容

1. [mysql]
2. #设置mysql客户端默认字符集
3. default-character-set=UTF8MB4
5. [mysqld]
6. #设置3306端口
7. port=3306
9. #允许最大连接数
10. max_connections=200
12. #允许连接失败的次数
13. max_connect_errors=10
15. #默认使用“mysql_native_password”插件认证
16. default_authentication_plugin=mysql_native_password
18. #服务端使用的字符集默认为8比特编码的latin1字符集
19. character-set-server=UTF8MB4
21. #开启查询缓存
22. explicit_defaults_for_timestamp=true
24. #创建新表时将使用的默认存储引擎
25. default-storage-engine=INNODB
27. #等待超时时间秒
28. wait_timeout=60
30. #交互式连接超时时间秒
31. interactive-timeout=600
32. secure_file_priv=/var/lib/mysql
34. [client]
35. default-character-set=UTF8MB4

复制代码

拉取运行mysql镜像

1. docker pull mysql:5.7
3. 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容器

1. docker exec -it a1ff98487160 /bin/bash

复制代码

登入mysql

1. bash-4.2# mysql -uroot -p
2. Enter password:

复制代码

创建项目数据库

1. #创建数据库
2. create database xxx;
3. #使用数据库
4. use xxx;
6. #导入数据
7. source /var/lib/mysql/data/liu_oa.sql

复制代码

  开通3306端口

1. firewall-cmd --zone=public --add-port=3306/tcp --permanent
3. firewall-cmd --reload

复制代码

打包摆设flask后端项目

生成项目依靠包

1. pip freeze > requirements.txt

复制代码

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

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

复制代码

创建Dockerfile文件

   文件布局
  

   Dockerfile文件内容

1. FROM python:3.8
3. # 设置 pip 镜像源为阿里云镜像
4. ENV PIP_INDEX_URL=https://mirrors.aliyun.com/pypi/simple/
6. # 设置镜像源不验证 SSL
7. ENV PIP_TRUSTED_HOST=mirrors.aliyun.com
9. RUN mkdir /app
10. WORKDIR /app
12. COPY requirements.txt .
13. RUN pip install -r requirements.txt
15. # 复制整个应用程序到 app 目录中
16. COPY *.py /app/
17. COPY blueprints/ /app/blueprints/
18. COPY templates/ /app/templates/
20. # 设置 Flask 环境变量
21. ENV FLASK_APP=app.py
23. EXPOSE 9000
25. # 启动 Flask 应用
26. CMD ["python", "app.py", "--host=0.0.0.0"]

复制代码

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

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

1. docker build -t 镜像名:1.0 .

复制代码

  运行镜像

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

复制代码

  开通端口

1. firewall-cmd --zone=public --add-port=9000/tcp --permanent
3. firewall-cmd --reload

复制代码

  测试

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

复制代码

打包摆设vue3前端项目

前端项目打包

1. npm run build

复制代码

创建nginx配置文件

   default.conf

1. server {
2.     listen       80;
3.     server_name  宿主机ip; # 修改为docker服务宿主机的ip
5.     location / {
6.         root   /usr/share/nginx/html;
7.         index  index.html index.htm;
8.         try_files $uri $uri/ /index.html =404;
9.     }
11.     error_page   500 502 503 504  /50x.html;
12.     location = /50x.html {
13.         root   html;
14.     }
15. }

复制代码

创建Dockerfile文件

文件内容

1. FROM nginx
3. MAINTAINER yohoo
5. RUN rm /etc/nginx/conf.d/default.conf
7. ADD default.conf /etc/nginx/conf.d/
9. COPY dist/ /usr/share/nginx/html/

复制代码

打包dist项目上传至服务器

   目录布局
  

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

1. docker build -t 镜像名:1.0 .

复制代码

  运行镜像

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

复制代码

  开通端口

1. firewall-cmd --zone=public --add-port=88/tcp --permanent
3. firewall-cmd --reload

复制代码

  测试
  

tips

解决页面引入本舆图片大概出现无法加载题目
   创建pub-use.js

1. const getAssetsFile = (url)=>{
2.     return new URL(`../assets/images/${url}`,import.meta.url).href;
3. }
5. export default {getAssetsFile}

复制代码

  vue文件利用

1. import pubUse from "@/utils/pub-use.js";
3. <img :src="pubUse.getAssetsFile('avatar.jpg')"/>

复制代码

镜像上传阿里云

登录

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

复制代码

推送

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

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。