Navicat Premium 8.1.12激活(CentOS7中使用docker-compose快速部署前后端分离项目)

Navicat Premium 8.1.12激活(CentOS7中使用docker-compose快速部署前后端分离项目)

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 加密

注:当加密后,就不用担心因为暴露了端口被攻击;加密或不加密对于代码的改动量非常小,更多的只是配置操作。

  1. 首先使用如下脚本在服务器上生成证书文件

  1. 接下来在步骤的基础上做修改

4.2 本地

注:这里是在 macOS 系统中操作的

4.2.1 安装 Docker

注:vsCode 在构建镜像时需要用到 Docker 命令,所以本地也需要安装 Docker

我是参考菜鸟教程中手动下载安装的,下载得到 .dmg 文件后,拖拽安装就结束了。

—————— 2020.06.06 更新 ——————

这时发现,更新到了版本后,不需要本地启动也可以推送镜像了。那么本地中步骤可以跳过了

4.2.2 拷贝服务器生成的证书

  1. 在服务器的目录中,拷贝、以及文件
  2. 拷贝到本地的安装目录中,如我的是目录

4.2.3 配置 hosts 文件

  1. 打开终端,输入
  2. 输入密码
  3. 写入内容,xx.xxx.xxx.xxx 就是安装了 Docker 的服务器地址
  4. 保存退出

4.2.4 配置 settings.xml 文件

  1. 找到 Maven 目录中的文件
  2. 找到节点,配置如下子节点

  1. 保存退出

4.2.5 vsCode 中安装 Docker 插件

  1. 打开 vsCode
  2. 左侧栏中的组件入口
  3. 输入进行搜索
  4. 选择第一个,
  5. 下载完成后,根据提示重启 vsCode

4.2.6 vsCode 中连接远程 Docker

  1. 打开 vsCode
  2. ->
  3. 在搜索框中输入
  4. 在搜索结果 Docker: Host 下面的文本框中输入,此处的 DockerHost 就是对应上面准备工作中配置的 hosts 文件
  5. 在搜索框中输入
  6. 在搜索结果 Docker: Tls Verify 下面的文本框中输入
  7. 保存设置

4.2.7 vsCode 中连接远程 DockerHub

  1. 打开 vsCode
  2. 左侧栏中的插件
  3. 在顶部弹出的框中选择
  4. 输入用户名,回车
  5. 输入密码,回车
  6. 连接成功

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 搭建

  1. 打开终端
  2. 输入命令如果不存在则输入命令全局安装 vue-cli
  3. 进入到项目预存放目录
  4. 输入命令在当前目录创建一个基于 webpack 的项目
  5. 接下来就是填写一些关于项目的信息就创建完毕
  6. 输入命令进入项目目录
  7. 输入命令安装依赖

需要注意的地方如下

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 配置文件中修改了如下几点

  1. daemonize no:前台启动,在 Docker 中后台启动 Redis 容器会报错
  2. requirepass :设置密码
  3. # 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,表示如果容器启动失败,会一直尝试重连。

注:

  1. volumes 映射的数据目录,就是 service_vue 服务从容器中映射出来的 Vue 打包后的静态文件,container_vue 容器 映射到 宿主机,宿主机 映射到 container_nginx 容器,所以这里还需要在 depends_on 中配置 service_vue 服务等待 Vue 打包结束。这样,启动时静态文件就会直接被映射到 Nginx 的访问目录中。

  2. nginx.conf 配置文件中需要注意如下地方


  • 直接访问 Nginx,就会访问到 Vue 打包后的静态文件,也就是前端页面
  • 开头的请求会被转发到 SpringBoot 服务,也就是后端接口;这里也解决了发布后跨域问题
  • 与 Vue 中 config/prod.env.js 文件配置的 VUE_APP_BASE_API 对应

8. 使用我的镜像部署发布


8.1 拷贝项目

  1. 文件具体在 build 目录,可直接下载
  2. 把 build 目录拷贝到服务器上
  3. 进入目录

  1. 日志目录需要赋值权限:chmod -R 777 log/
  2. 自动生成证书脚本需要执行权限:chmod +x generateCACertificate.sh

注:generateCACertificate.sh 文件是在准备工作中用到的,保存在目录中只是做个备份,跟后面部署发布没有任何关系;所以在查看目录时没有粘贴出来。

8.2 启动


8.3 访问

8.3.1 浏览器中访问 Nginx 容器

在浏览器中输入服务器 ip:8000,可看到信息。
如果多次访问,可以发现:

  1. count 数会一直累计
  2. 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 中,原代码片段如下


也就仅仅此处需要更改,因为:

  1. DockerHub 远程库的用户名和密码已经在准备工作中配置到 Maven 的文件中了
  2. 远程服务器的地址已经在准备工作中配置到 hosts 文件中了

9. 使用你自己的镜像部署发布


9.1 后端

9.1.1 把多工程项目使用 IntelliJ IDEA 打开

  1. 把项目源码从 GitHub 中下载到你的本地
  2. 打开 IntelliJ IDEA
  3. File -> Open
  4. 打开你下载到本地的项目目录
  5. docker-compose-rapid-deployment -> docker-compose-service(选择打开此目录)
  6. 打开 service 工程后
  7. 再次 File -> Project Structrue
  8. 选择 Modules, ‘+’ 符号
  9. Import Module
  10. 还是打开你下载到本地的项目目录
  11. docker-compose-rapid-deployment -> docker-compose-commons -> pom.xml
  12. OK
  13. Next,Finish
  14. Apply,OK

9.1.2 部署

  1. 右侧
  2. 双击
  3. 双击
  4. 双击
  5. 双击
  6. 双击
  7. 双击
  8. 等待控制台出现如下信息就证明成功把镜像推送到了服务器

  1. 到服务器中,查看镜像,发现了刚刚新推送的后端镜像

9.2 前端

9.2.1 把前端项目使用 Visual Studio Code 打开

  1. 把项目源码从 GitHub 中下载到你的本地
  2. 打开 Visual Studio Code
  3. 文件 -> 打开
  4. 打开你下载到本地的项目目录
  5. docker-compose-rapid-deployment -> docker-compose-front(选择打开此目录)

9.2.2 部署

  1. 左侧
  2. 找到右键,
  3. 顶部会弹一个框出来,填写镜像名称和版本信息,如
  4. 回车
  5. 等待控制台出现如下信息就证明成功把镜像推送到了服务器

  1. 到服务器中,查看镜像,发现了刚刚新推送的前端镜像

9.3 修改 docker-compose.yaml 文件

需要把服务和服务的镜像指定成你刚刚推送的镜像名称。

9.4 启动及访问

与上面使用我的镜像部署时启动及访问一致,就不再赘述。

10. 快速部署


10.1 后端中更改部分输出内容


加了三个感叹号

10.2 部署后端

  1. 右侧
  2. 双击
  3. 双击
  4. 双击
  5. 等待控制台出现如下信息就证明成功把镜像推送到了服务器

  1. 到服务器中,查看镜像,发现了刚刚新推送的镜像,并且还发现了有一个的镜像,其实它就是现在正在启动中的 container_springboot 容器的镜像
  2. 查看正在运行的镜像,发现 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

(0)
编程小号编程小号
上一篇 2024-07-25 08:11
下一篇 2024-07-25

相关推荐