1. 前言
继上次写了一篇 CentOS7中使用docker-compose部署SpringBoot+Redis+MySQL+Nginx 博客后,我把前端页面也加入其中,重新整了一套前后端分离的项目,并且还是使用 docker-compose 部署;值得关注的是,做到了快速部署发布。
2. 源码
GitHub 地址:https://github.com/intomylife/Docker
3. 环境
3.1 开发工具
- 后端: IntelliJ IDEA
- 前端: Visual Studio Code
3.2 其它工具
- 连接服务器: Termius
- 文件传输: Cyberduck
- 连接 MySQL: Navicat Premium
- 连接 Redis: Redis Desktop Manager
3.3 版本号
- 后端: SpringBoot 2.0.3.RELEASE
- 前端: Vue 2.5.2
- 其他: JDK 1.8、Maven 3.3.9、Redis 4.0.14、MySQL 5.7、npm 6.11.3、node 12.11.1、Docker 18.09.5,docker-compose 1.24.1
4. 准备工作
注:准备工作需要按步骤顺序进行
4.1 服务器
4.1.1 需要安装 Docker 以及 docker-compose,可参考:
- CentOS7中安装Docker
- CentOS7中安装Docker-Compose
4.1.2 开启 TCP
注:此操作可能会给服务器带来安全隐患(暴露的端口被攻击)。如果不幸已经被挖矿,没关系,戳这里:服务器被挖矿后的解决思路。
4.1.3 TLS 加密
注:当加密后,就不用担心因为暴露了端口被攻击;加密或不加密对于代码的改动量非常小,更多的只是配置操作。
- 首先使用如下脚本在服务器上生成证书文件
- 接下来在步骤的基础上做修改
4.2 本地
注:这里是在 macOS 系统中操作的
4.2.1 安装 Docker
注:vsCode 在构建镜像时需要用到 Docker 命令,所以本地也需要安装 Docker
我是参考菜鸟教程中手动下载安装的,下载得到 .dmg 文件后,拖拽安装就结束了。
—————— 2020.06.06 更新 ——————
这时发现,更新到了版本后,不需要本地启动也可以推送镜像了。那么本地中步骤可以跳过了
4.2.2 拷贝服务器生成的证书
- 在服务器的目录中,拷贝、以及文件
- 拷贝到本地的安装目录中,如我的是目录
4.2.3 配置 hosts 文件
- 打开终端,输入
- 输入密码
- 写入内容,xx.xxx.xxx.xxx 就是安装了 Docker 的服务器地址
- 保存退出
4.2.4 配置 settings.xml 文件
- 找到 Maven 目录中的文件
- 找到节点,配置如下子节点
- 保存退出
4.2.5 vsCode 中安装 Docker 插件
- 打开 vsCode
- 左侧栏中的组件入口
- 输入进行搜索
- 选择第一个,
- 下载完成后,根据提示重启 vsCode
4.2.6 vsCode 中连接远程 Docker
- 打开 vsCode
- ->
- 在搜索框中输入
- 在搜索结果 Docker: Host 下面的文本框中输入,此处的 DockerHost 就是对应上面准备工作中配置的 hosts 文件
- 在搜索框中输入
- 在搜索结果 Docker: Tls Verify 下面的文本框中输入
- 保存设置
4.2.7 vsCode 中连接远程 DockerHub
- 打开 vsCode
- 左侧栏中的插件
- 在顶部弹出的框中选择
- 输入用户名,回车
- 输入密码,回车
- 连接成功
5. 后端
5.1 搭建
此次搭建只整合了 Redis 和 MySQL,如果对具体整合过程感兴趣,可以前往:
- SpringBoot整合Redis
- SpringBoot整合MyBatis-Plus
需要注意的地方如下
5.2 配置文件
注:这里专门把 host 都配置为本地 127.0.0.1 环境,因为在使用 docker-compose 服务编排时会用代码主动做处理,这时一套配置文件就足够了。
5.3 提供服务
代码片段
主要做的事情及细节有:
- 统计访问次数,同时把 Redis 和 MySQL 都强行用上;在 Redis 中写入了足够的访问次数对象的数量后,会同步到 MySQL,也就是降低了 MySQL 的写 IO 操作。
- 显示当前时间,主要是处理了容器时区问题。
5.4 Dockerfile
- 注意此文件的路径为 :src/main/docker/
- 此文件是构建 Docker 镜像的核心文件
- FROM openjdk:8-jdk-alpine:基础镜像环境 JDK1.8
- VOLUME /tmp:指定了挂载目录
- ARG JAR_FILE:与工程中配置的 buildArgs 对应,动态获取打包后的名称
- ADD ${JAR_FILE} app.jar:把生成的 jar 包拷贝到 Docker 容器中并命名为 app.jar
- 最后一行是修改 Tomcat 随机数生成方式,加快 Tomcat 启动
5.5 pom.xml 文件
5.5.1 service
代码片段
- 配置的 <docker.host> 节点中的 DockerHost 对应上面准备工作中配置的 hosts 文件
- 如果你只开启了没有加密,那么此处更改为;即加密时配置:,未加密时配置:
5.5.2 service-core
代码片段
- 配置的 <execution> 节点中的内容是快速部署的关键
6. 前端
6.1 搭建
- 打开终端
- 输入命令如果不存在则输入命令全局安装 vue-cli
- 进入到项目预存放目录
- 输入命令在当前目录创建一个基于 webpack 的项目
- 接下来就是填写一些关于项目的信息就创建完毕
- 输入命令进入项目目录
- 输入命令安装依赖
需要注意的地方如下
6.2 config/index.js 文件
代码片段
- 配置 proxyTable 解决了开发时跨域问题
6.3 utils/request.js 文件
代码片段
- process.env.VUE_APP_BASE_API 读取环境变量,拼接到请求 url 中
- VUE_APP_BASE_API 分别在 config/dev.env.js 和 config/prod.env.js 文件中配置,配置的值为,也就是上面 config/index.js 中配置的会被拦截的请求前缀
6.4 Dockerfile
- FROM node:lts-alpine:基础镜像环境 node
- 设置国内镜像,拷贝依赖信息文件,安装依赖
- 此时的 Docker 镜像,是 Vue 未打包成静态文件的前端代码;这点很重要,因为在启动 Docker 镜像时,需要把 Vue 打包后的静态文件映射出来,这时的流程就是 启动->映射->Vue 打包;否则如果先生成 Vue 打包后的静态文件,再启动->映射的话,容器中生成的静态文件就会被宿主机的空文件夹给覆盖掉
7. docker-compose.yaml
7.1 文件说明
此文件的默认名称为 docker-compose,后缀名可以为 .yml 也可以为 .yaml。
7.2 version
- 构建文件的语法版本信息。version: ‘3’ 表示使用第三代语法。
7.3 services
- 包含此工程中所有的服务列表。
- 服务可以是已存在的镜像(本地或远程),也可以是构建出来的镜像;如果其中有需要构建的镜像,则需要一个 Dockerfile 文件。
7.4 service_redis
Redis 服务描述:
- service_redis:服务名称,可自定义。
- container_name:容器名称,可自定义;也可不写,那会自动生成,生成规则为 【docker-compose.yaml 文件的父目录名称 + _ + 服务名称 + 从一开始的数字】。
- image:指定镜像来启动容器。此处指定为 Redis 官方镜像,版本为 4.0.14。
- environment:为启动的容器添加环境变量。此处配置了容器的时区。
- ports:端口映射,映射规则为 宿主机端口:容器端口。此处映射 宿主机 6379 端口到 容器 6379 端口。
- volumes:配置映射,映射规则为 宿主机:容器,可以映射文件或目录。此处映射了 配置文件,数据目录以及日志目录。
- command:容器启动后执行的命令。此处命令为 使用配置文件来启动 Redis 容器。
- restart:赋固定值 always,表示如果容器启动失败,会一直尝试重连。
注:redis.conf 配置文件中修改了如下几点
- daemonize no:前台启动,在 Docker 中后台启动 Redis 容器会报错
- requirepass :设置密码
- # bind 127.0.0.1:注释掉了,使外网可访问
7.5 service_mysql
MySQL 服务描述:
- service_mysql:服务名称,可自定义。
- container_name:容器名称,可自定义;也可不写,那会自动生成,生成规则为 【docker-compose.yaml 文件的父目录名称 + _ + 服务名称 + 从一开始的数字】。
- image:指定镜像来启动容器。此处指定为 MySQL 官方镜像,版本为 5.7。
- environment:为启动的容器添加环境变量。此处配置了容器的时区,以及数据库 ROOT 密码和权限。
- ports:端口映射,映射规则为 宿主机端口:容器端口。此处映射 宿主机 3306 端口到 容器 3306 端口。
- volumes:配置映射,映射规则为 宿主机:容器,可以映射文件或目录。此处映射了 配置文件,数据目录,初始化 SQL 目录以及日志目录。
- command:容器启动后执行的命令。此处命令为 设置字符编码。
- restart:赋固定值 always,表示如果容器启动失败,会一直尝试重连。
注:my.cnf 配置文件中有一个需要注意的地方如下
7.6 service_springboot
SpringBoot 服务描述:
- service_springboot:服务名称,可自定义。
- container_name:容器名称,可自定义;也可不写,那会自动生成,生成规则为 【docker-compose.yaml 文件的父目录名称 + _ + 服务名称 + 从一开始的数字】。
- image:指定镜像来启动容器。此处指定为自己上传的后端镜像,版本为 1.0。
- environment:为启动的容器添加环境变量。此处配置了容器的时区;并指定了 MySQL 的 host 为 service_mysql 服务,Redis 的 host 为 service_redis 服务,这两个 host 正是对应 SpringBoot 项目的配置文件(application.properties)中两个 host;这也是上面提到的 用代码主动做处理。(注:由于 MySQL 服务和 Redis 服务都只有一个,所有这里指定服务名和容器名都是可以的)
- expose:暴露容器内端口,不映射到宿主机。因为 SpringBoot 服务会被 Nginx 做代理转发,所以不用暴露并映射到外部。
- depends_on:依赖服务。在整个工程启动时,会先启动依赖服务,再启动当前服务。也就是说,这里 SpringBoot 服务会等待 MySQL 服务和 Redis 服务启动完成后,才会开始启动。
- restart:赋固定值 always,表示如果容器启动失败,会一直尝试重连。
7.7 service_vue
Vue 服务描述:
- service_vue:服务名称,可自定义。
- container_name:容器名称,可自定义;也可不写,那会自动生成,生成规则为 【docker-compose.yaml 文件的父目录名称 + _ + 服务名称 + 从一开始的数字】。
- image:指定镜像来启动容器。此处指定为自己上传的前端镜像,版本为 1.0。
- environment:为启动的容器添加环境变量。此处配置了容器的时区。
- volumes:配置映射,映射规则为 宿主机:容器,可以映射文件或目录。此处就是把 Vue 打包后的静态文件映射出来。
注:此服务的作用就是把 Vue 打包成静态页面,映射到宿主机目录;此服务在打包结束后就会自动停止。
7.8 service_nginx
Nginx 服务描述:
- service_nginx:服务名称,可自定义。
- container_name:容器名称,可自定义;也可不写,那会自动生成,生成规则为 【docker-compose.yaml 文件的父目录名称 + _ + 服务名称 + 从一开始的数字】。
- image:指定镜像来启动容器。此处指定为 Nginx 官方镜像,版本为 1.8。
- environment:为启动的容器添加环境变量。此处配置了容器的时区。
- ports:端口映射,映射规则为 宿主机端口:容器端口。此处映射 宿主机 8000 端口到 容器 8000 端口。
- volumes:配置映射,映射规则为 宿主机:容器,可以映射文件或目录。此处映射了 配置文件,数据目录以及日志目录。
- depends_on:依赖服务。在整个工程启动时,会先启动依赖服务,再启动当前服务。也就是说,这里 Nginx 服务会等待 SpringBoot 服务启动完成后,才会开始启动。
- restart:赋固定值 always,表示如果容器启动失败,会一直尝试重连。
注:
-
volumes 映射的数据目录,就是 service_vue 服务从容器中映射出来的 Vue 打包后的静态文件,container_vue 容器 映射到 宿主机,宿主机 映射到 container_nginx 容器,所以这里还需要在 depends_on 中配置 service_vue 服务等待 Vue 打包结束。这样,启动时静态文件就会直接被映射到 Nginx 的访问目录中。
-
nginx.conf 配置文件中需要注意如下地方
- 直接访问 Nginx,就会访问到 Vue 打包后的静态文件,也就是前端页面
- 开头的请求会被转发到 SpringBoot 服务,也就是后端接口;这里也解决了发布后跨域问题
- 与 Vue 中 config/prod.env.js 文件配置的 VUE_APP_BASE_API 对应
8. 使用我的镜像部署发布
8.1 拷贝项目
- 文件具体在 build 目录,可直接下载
- 把 build 目录拷贝到服务器上
- 进入目录
- 日志目录需要赋值权限:chmod -R 777 log/
- 自动生成证书脚本需要执行权限:chmod +x generateCACertificate.sh
注:generateCACertificate.sh 文件是在准备工作中用到的,保存在目录中只是做个备份,跟后面部署发布没有任何关系;所以在查看目录时没有粘贴出来。
8.2 启动
8.3 访问
8.3.1 浏览器中访问 Nginx 容器
在浏览器中输入服务器 ip:8000,可看到信息。
如果多次访问,可以发现:
- count 数会一直累计
- time 为当前时间
8.3.2 Navicat 连接 MySQL 容器
在 Navicat 中新建 MySQL 连接:
- 主机:服务器 ip
- 端口:3306
- 用户名:root
- 密码:
连接成功后,进入到 base_db 库中打开 base_table 表,如果访问超过五次了,这张表里就会有记录的数据了。
8.3.3 rdm 连接 Redis 容器
在 rdm 中新建连接:
- Host:服务器 ip
- Port:6379
- Auth:
连接成功后,进入到 db_2 库中查看。
8.3.4 注意
到现在,还没有结束。
前面的部署是直接使用我上传的 build 目录,镜像使用我上传到 DockerHub 的镜像,来完成部署;接下来,就得你自己在本地使用开发工具打开 GitHub 上的源码进行。
不过,在后端项目中有个地方,要做更改,就是远程仓库用户名,位置在 docker-compose-service 的 pom.xml 中,原代码片段如下
也就仅仅此处需要更改,因为:
- DockerHub 远程库的用户名和密码已经在准备工作中配置到 Maven 的文件中了
- 远程服务器的地址已经在准备工作中配置到 hosts 文件中了
9. 使用你自己的镜像部署发布
9.1 后端
9.1.1 把多工程项目使用 IntelliJ IDEA 打开
- 把项目源码从 GitHub 中下载到你的本地
- 打开 IntelliJ IDEA
- File -> Open
- 打开你下载到本地的项目目录
- docker-compose-rapid-deployment -> docker-compose-service(选择打开此目录)
- 打开 service 工程后
- 再次 File -> Project Structrue
- 选择 Modules, ‘+’ 符号
- Import Module
- 还是打开你下载到本地的项目目录
- docker-compose-rapid-deployment -> docker-compose-commons -> pom.xml
- OK
- Next,Finish
- Apply,OK
9.1.2 部署
- 右侧
- 双击
- 双击
- 双击
- 双击
- 双击
- 双击
- 等待控制台出现如下信息就证明成功把镜像推送到了服务器
- 到服务器中,查看镜像,发现了刚刚新推送的后端镜像
9.2 前端
9.2.1 把前端项目使用 Visual Studio Code 打开
- 把项目源码从 GitHub 中下载到你的本地
- 打开 Visual Studio Code
- 文件 -> 打开
- 打开你下载到本地的项目目录
- docker-compose-rapid-deployment -> docker-compose-front(选择打开此目录)
9.2.2 部署
- 左侧
- 找到右键,
- 顶部会弹一个框出来,填写镜像名称和版本信息,如
- 回车
- 等待控制台出现如下信息就证明成功把镜像推送到了服务器
- 到服务器中,查看镜像,发现了刚刚新推送的前端镜像
9.3 修改 docker-compose.yaml 文件
需要把服务和服务的镜像指定成你刚刚推送的镜像名称。
9.4 启动及访问
与上面使用我的镜像部署时启动及访问一致,就不再赘述。
10. 快速部署
10.1 后端中更改部分输出内容
加了三个感叹号
10.2 部署后端
- 右侧
- 双击
- 双击
- 双击
- 等待控制台出现如下信息就证明成功把镜像推送到了服务器
- 到服务器中,查看镜像,发现了刚刚新推送的镜像,并且还发现了有一个的镜像,其实它就是现在正在启动中的 container_springboot 容器的镜像
- 查看正在运行的镜像,发现 container_springboot 容器的镜像名称变成了镜像 ID,而这个镜像 ID 和上面的镜像 ID 一样
11. 快速发布
11.1 发布
11.2 访问
在浏览器中输入服务器 ip:8000,可看到信息变成了,刚刚添加的三个感叹号成功生效。
12. 遗留问题
当服务器加密后,vsCode 中的 Docker 插件就一直报错证书有问题,不显示服务器上的镜像;如果在 vsCode 的设置中去掉配置,是可以正常显示本地的镜像列表;或者是服务器不加密,在 vsCode 中的设置添加配置,去掉配置,也是能够正常显示服务器的镜像列表。
但是即使加密后,不显示服务器的镜像列表,还是可以正常推送镜像到服务器中的。
这个问题断断续续用了两周找原因,最终还是没找到解决办法…虽然对本篇博客的部署来说,没有太大影响,但是也是够闹心的。
13. 结语
这篇博客我从准备到写完,大概快一个月了,中间也遇到了各种各样的问题,从中也学到了不少东西。阿,快乐。
Navicat Premium 8.1.12激活
希望能够帮助到你
over
今天的文章
Navicat Premium 8.1.12激活(CentOS7中使用docker-compose快速部署前后端分离项目)分享到此就结束了,感谢您的阅读。
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/112767.html