侧边栏壁纸
博主头像
Johnny博主等级

学无先后,达者为师

  • 累计撰写 11 篇文章
  • 累计创建 4 个标签
  • 累计收到 1 条评论

目 录CONTENT

文章目录

Vue+SpringBoot开发的项目使用Docker进行部署

Johnny
2022-07-09 / 0 评论 / 0 点赞 / 38 阅读 / 2,770 字

使用Docker部署SpringBoot、Vue前后端分离项目

环境准备

  • CentOS 7.x,ip 192.168.62.130
  • 基于 SpringBoot 的后端服务一个,端口号 8081
  • 基于 Vue 的前端工程

说明:这个后端服务是对 MySQL 一张单表 Metadata(实体类)的 CRUD 操作。前端即页面上点击实现增删改查。

第一步:Docker 环境搭建

Docker安装

  1. 卸载旧版本。较旧的 Docker 版本为 dockerdocker-engine。 如果已安装这些程序,请卸载它们以及相关的依赖项。
sudo yum remove docker \
                  docker-client \
                  docker-client-latest \
                  docker-common \
                  docker-latest \
                  docker-latest-logrotate \
                  docker-logrotate \
                  docker-engine

  1. 设置 yum 源。安装 yum-utils 软件包(提供了 yum-config-manager 程序)并设置稳定的 yum 源方便下载 Docker Engine
# 安装 yum-utils
sudo yum install -y yum-utils
# 设置 yum 源为阿里云方便下载 Docker Engine
sudo yum-config-manager --add-repo http://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo

3.安装最新版的 Docker Engin 和容器。期间多次手动 y

sudo yum install docker-ce docker-ce-cli containerd.io

4.验证安装

docker -v
docker version

5.配置镜像加速。Docker 从 Docker Hub 拉取镜像,因为是从国外获取,所以速度较慢。可以通过配置国内镜像源的方式,从国内获取镜像,提高拉取速度。

vi /etc/docker/daemon.json

# 在文件中输入以下内容
{
  "registry-mirrors": ["http://hub-mirror.c.163.com", "https://docker.mirrors.ustc.edu.cn"]
}

# 重新加载某个服务的配置文件
sudo systemctl daemon-reload
# 重新启动 docker
sudo systemctl restart docker

Docker 启停

# 启/停动 docker
systemctl start/stop docker

# 重启 docker
systemctl restart docker

# 设置开机启动/禁止开机启动
systemctl enable/disable docker

# 查看 docker 状态
systemctl status docker

# 查看 docker 内容器的运行状态
docker stats

# 查看 docker 概要信息
docker info

# 查看 docker 帮助文档
docker --help

第二步:Docker 部署后端 jar 服务

1)后端项目打包
将基于 Spring Boot 的后端服务使用 Maven 打包。有很多种方式:

可以在控制台直接:mvn clean package [-Dmaven.test.skip=true|-DskipTests] ,可选的两种方式跳过打包时的测试(前提是你的操作系统了配置好 Maven 的环境变量)
在 IDEA 的 Maven 可视化面板里点击即可,也可在上方勾选跳过测试的图标(绿色的闪电⚡)
在项目的 pom 文件的 下配置 true。(这是因为 spring-boot-maven-plugin 插件集成了maven-surefire-plugin 插件,会自动运行 junit test)

2)准备 Dockerfile 文件

在项目的根路径下新建 deploy 文件夹,里面新建 Dockerfile 文件,这里准备了一个最简的:

# 基础镜像
FROM openjdk
# 作者信息
LABEL maintainer="2466267753@qq.com"
# 开放端口
EXPOSE 8081
# 将 ams-0.0.1-SNAPSHOT.jar 复制到 docker 中,并重命名为 ams.jar
ADD ams-0.0.1-SNAPSHOT.jar ams.jar
# 容器执行命令
ENTRYPOINT ["java", "-jar", "ams.jar"]

取出打包后的位于 /target 目录下的 jar 包,放到 Dockerfile 同一目录下。在 IDEA 里配置好 SSH 连接 CentOS,然后打开可视化的 Docker 工具,我们采用可视化的操作制作并启动镜像。具体步骤可参考:[IDEA 发布 SpringBoot 项目到 Docker](#IDEA 发布 SpringBoot 项目到 Docker)。项目启动后可在 IDEA 里 Docker 工具的端口绑定处绑定一个对外端口 8081 > 18081。

第四步:Docker 搭建 Nginx 环境

Docker 部署 Nginx 的步骤如下:

# 拉取镜像
docker pull nginx

# 创建 Nginx 容器,因为要拷贝一些文件以及设置挂载目录,需要先启动一个nginx容器
docker run -di --name nginx -p 80:80 nginx

# 创建宿主机目录,用于存放挂载文件
mkdir docker-nginx

# 将容器内的配置文件拷贝到宿主机新建的文件夹内,并重命名
docker cp nginx:/etc/nginx /opt/docker-v-data/docker-nginx
# 重命名为 conf
mv nginx/ conf

# 这时候就可以将当前的容器停掉、删除了
docker stop nginx
docker rm nginx

# 新建宿主机目录用于挂载前端文件
mkdir front
# 此时的文件结构为:
#  [root@bogon:/opt/docker-v-data/docker-nginx]# tree
#  .
#  ├── conf
#  │   ├── conf.d
#  │   │   └── default.conf
#  │   ├── fastcgi_params
#  │   ├── mime.types
#  │   ├── modules -> /usr/lib/nginx/modules
#  │   ├── nginx.conf
#  │   ├── scgi_params
#  │   └── uwsgi_params
#  └── front
#
#  3 directories, 7 files

# 启动我们要用的 nginx,命名为 mynginx,设置挂载目录(配置文件目录、前端文件挂载目录)
docker run -di --name mynginx -p 80:80 \\
		-v /opt/docker-v-data/docker-nginx/conf:/etc/nginx \\
		-v /opt/docker-v-data/docker-nginx/front:/usr/share/nginx/html \\
		nginx


到此,一个设置好挂载目录的 Nginx 容器便启动成功了。这时候在宿主机的

  • /opt/docker-v-data/docker-nginx/conf 目录下:设置配置文件
  • /opt/docker-v-data/docker-nginx/front 目录下:放前端 dist 文件夹

第五步:前端文件打包、部署

(1)前端配置

第一步:前端工程里添加一个文件:前端根目录 /config/prod.env.js,里面添加如下代码:

'use strict'
module.exports = {
    NODE_ENV: '"production"',
    BASE_URL: '"/api"'
}

第二步:在前端 axios 调用后端接口时,需要在路径最前方带上 /api,例如查询所有元数据的后端服务接口为

http://localhost:8081/metadata,原来在前端项目里我们需要写成 /metadata 即可,现在需要写成 /api/metadata

(2)Nginx 部署前端、配置文件修改

npm run build 打包前端文件成一个 dist 文件夹,将这个文件传到 CentOS 的 /opt/docker-v-data/docker-nginx/front 目录下,即挂载目录。

修改宿主机 CentOS 的 /opt/docker-v-data/docker-nginx/conf/nginx.conf

user  nginx;
worker_processes  1;

error_log  /var/log/nginx/error.log notice;
pid        /var/run/nginx.pid;

events {
    worker_connections  1024;
}

http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;
    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    access_log  /var/log/nginx/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    keepalive_timeout  65;

    server {
        listen       80;
        server_name  localhost;
        location / {
        	root /usr/share/nginx/html/dist/;
					index index.html;
					try_files $uri $uri/ /index.html;
        }
        location /api/ {
            # 注意这里不能写 localhost 或 127.0.0.1,因为 Nginx 也是部署在 Docker 上的,且都是采用
            # 的默认的 Bridge 网络模式,每个启动的容器都有自己 ip,类似于 172.17.0.x。如果写 localhost 或 127.0.0.1 本地			# 回环地址,会报错 502 错误。
            # 综上:此处需要写宿主机的 ip:宿主机暴露出的端口(docker ps 可看)
            # 或者写容器内的 ip:后端服务在容器内的端口(docker network inspect bridge 或 docker inspect 容器ID|名称 均可看)
          proxy_pass <http://192.168.62.130:18081/;>
					proxy_set_header Host $host;
					proxy_set_header X-Real-IP  $remote_addr;
					proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
					proxy_set_header Product_Type 2;
        }
    }
    #gzip  on;
    include /etc/nginx/conf.d/*.conf;
}

(3)前端打包发布

npm run build 将前端打成一个 dist 文件夹,将其上传至 /opt/docker-v-data/docker-nginx/front 目录下,即发布成功。

第六步:重启 Nginx 容器

docker restart mynginx

# 查看日志
docker logs -f munginx

IDEA 发布 SpringBoot 项目到 Docker

Spring Boot 构建 Docker 镜像的几种方式

如今,基于 Spring Boot 构建 Docker 镜像的方式有很多种,例如

  • Cloud Native Buildpacks(Spring Boot 2.3+ 版本开始支持)
  • Googlejib-maven-plugin
  • fabric8spotifydocker-maven-plugin

以上几种方式基本都是采用各自的 Maven 插件,将仓库配置在 Maven 的 pom.xml 文件里的 <build> 标签里。Spring Boot 可以快速将 Java 应用程序构建为 Docker 镜像推送至指定远程仓库:

  • DockerHub 官方公共仓库(DockerHub 官方公共仓库国内访问速度堪忧,不推荐)
  • 阿里云镜像仓库(需要在阿里云登录账号自行创建仓库)
  • 自建私有镜像仓库

本文不采用以上任何一种方式,打算采用最原始的办法,自己写 Dockerfile,手动打包。然后使用 idea 的 Docker 与 SSH 远程连接功能,远程构建并启动容器。具体过程如下。

条件准备

  • IDEA:版本越新越好

  • ams-0.0.1-SNAPSHOT.jar:一个集成了 Swagger 的 SpringBoot 演示项目。使用 maven clean package 打成的 jar 包,默认生成在 /target 目录下,将其拷贝到 /resources/static 目录下

  • Dockerfile:自己手动编写,就放在 /resources/static 目录下

  • 一台装有 Docker 的 CentOS,系统版本 7+。本文里其 ip 为 192.168.62.128

在 IDEA 里配置 SSH

其实有很多种方式,最直接的直接见下图

请添加图片描述

在 IDEA 里配置 Docker

这里选择 SSH 选项,然后直接选择上文配置好的装有 Docker 的主机即可。

请添加图片描述

编写 Dockerfile 文件

/resources/static 下新建 Dockerfile 文件,编写

# 基础镜像
FROM openjdk
# 作者信息
LABEL maintainer="2466267753@qq.com"
# 开放端口
EXPOSE 8081
# 将 /target 目录下的 ams-0.0.1-SNAPSHOT.jar 复制到 docker 中,并重命名为 ams.jar
ADD ams-0.0.1-SNAPSHOT.jar ams.jar
# 容器执行命令
ENTRYPOINT ["java", "-jar", "ams.jar"]

运行 Dockerfile 文件

在 IDEA 打开写好的 Dockerfile 文件,可以看到左上角有运行标志,直接点击运行

请添加图片描述

然后可以看到与在 CentOS 上构建时一致的构建日志。可以看到图片右边上方有很多选项:

  • 【日志】可以看到 jar 启动日志

  • 【属性】可以看到镜像 ID、容器 ID、还可以修改容器名称

  • 【环境变量】即容器内的环境变量

  • 【端口绑定】可以设置容器端口与宿主机的端口映射,上文 Dockerfile 我们在容器里暴露了 8081 端口,我们映射到宿主机的18081,点击保存。然后在浏览器输入 http://192.168.45.128:18081/swagger-ui.html 即可打开项目的 swagger 接口文档页面

  • 【卷绑定】可以指定主机与容器的路径挂载

  • 【文件】容器内的文件目录

请添加图片描述

总结
到此,项目已经成功部署到 CentOS 的 Docker 上。可以使用 docker ps 查看,确实正在运行。

在上图也可以看到,左侧树形菜单区域,有对容器的管理。相当于点点鼠标,就替代了在 CentOS 命令行下一行一行命令的书写。

对于 IDEA 里的 SSH 配置与使用、IDEA 里的 Docker 的可视化操作还是很方便的,这个“语法糖”确实很甜。

0

评论区