Zeuk, Zozo's father

Docker Compose 部署 Spring Boot + Vue 前后端分离项目

2018.12.29

最近做了一个 Spring Boot + Vue 的前后端分离项目,前端使用 Nginx 代理请求后端 Spring Boot 提供的 API 接口,这里由另外一台 Oracle 服务器提供数据,就不用部署 Oracle 服务了。

按照传统的部署方式,我可能需要完成如下工作:

  • 安装 Nginx,配置 Nginx 相关信息
  • 安装 JDK 环境,配置环境变量
  • 启动 Spring Boot 项目,整体联调测试,并配置自动启脚本等

上面虽然只有三个步骤,但实际搭建这些环境还是相对麻烦的,如果以后需要迁移到另外一个环境,又得按照上面的步骤重新搞一次,着实繁琐。

那么有什么简单方便的方式部署和迁移这些服务吗? 当然是有的,那就是采用 Docker 容器化技术,这样就省去了大部分环境的搭建过程,直接拉取 Docker Hub 上的现有环境镜像运行即可,但是随着服务的增加,需要启动的 Docker 镜像会越来越多,相对还是比较繁琐,而且也不便于上线和下线管理。而 Docker Compose 就是为了简化这些工作而生。

Docker Compose 是什么

Docker Compose 是 Docker 的一种编排服务,是一个用于在 Docker 上定义并运行复杂应用的工具,可以让用户在集群中部署分布式应用。通过 Docker Compose 用户可以很容易地用一个配置文件定义一个多容器的应用,然后使用一条指令安装这个应用的所有依赖,完成构建。Docker Compose 解决了容器与容器之间如何管理编排的问题。

开始使用 Docker Compose

首先需要在宿主机上安装好 Docker 和 Docker Compose (安装过程本博客有,这里略过)

项目 Docker 化改造

首先我们将项目目录改造成如下结构:

docker-compose-test # 项目根目录
├── docker-compose.yml # DockerCompose 的核心文件,描述如何构建整个服务
├── app
│   └── app.jar # SpringBoot 项目打成的 Jar 包
└── nginx
    ├── conf.d
    │   └── app.conf # Nginx 配置文件
    └── html # 前端 Vue 构建生成的静态文件放在此目录下

docker-compose.yml 文件详解

version: '3'
services:
  nginx:
    container_name: k-nginx
    image: nginx:latest
    restart: always
    ports:
      - 9099:9099
      - 443:443
    volumes:
      - ./nginx/conf.d:/etc/nginx/conf.d
      - ./nginx/html:/usr/share/nginx/html
      - /etc/localtime:/etc/localtime:ro
      - /etc/timezone:/etc/timezone:ro
    depends_on:
      - app
  app:
    container_name: k-app
    image: java:8
    restart: always
    volumes:
      - ./app:/opt/app
      - /etc/localtime:/etc/localtime:ro
      - /etc/timezone:/etc/timezone:ro
    expose:
      - 8080
    command: java -jar /opt/app/app.jar
version: '3' # 表示使用第三代语法来构建 docker-compose.yaml 文件
services: # 表示 compose 需要启动的服务,我们可以看出此文件中有二个服务分别为:nginx、app
container_name: # 容器名称
image: # 从指定的镜像中启动容器,可以是存储仓库、标签以及镜像 ID
restart: always # 总是重新启动容器
ports: # 映射容器端口到宿主机端口,使用 HOST:CONTAINER 的方式指定端口
volumes: # 挂载本地目录下的文件到容器目标地址下
expose: # 暴露容器给 services 下其他容器使用
depends_on: # 可以配置依赖服务,表示需要先启动 depends_on 下面的服务后,再启动本服务
command: # 启动容器后默认执行的命令

Nginx 文件详解

nginx 下的 conf.d 目录下有一个 app.conf 文件,配置了服务转发信息

server {
    listen       9099;
    charset      utf-8;
    access_log   off;

    #charset koi8-r;
    #access_log  /var/log/nginx/host.access.log  main;

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
    }

    location /api {
        rewrite  ^.+api/?(.*)$ /$1 break;
        include  uwsgi_params;
        proxy_pass   http://app:8080; #此处修改为自己的请求地址
    }

    #error_page  404              /404.html;

    # redirect server error pages to the static page /50x.html
    #
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }
}

这块主要配置前端 WEB 静态服务器,监听 9099 端口,设置网站根目录以及转发后缀为 /api 的请求到后端地址,其中 proxy_pass http://app:8080 这块的配置,这里使用是 app 而不是 localhost,是因为他们没有在一个容器中,在一组 compose 的服务通讯需要使用 services 的名称进行访问。

部署项目

将我们整理好的项目上传到服务器,然后进入项目根目录

cd docker-compose-test

启动项目

# 这条命令会直接创建容器并启动所有服务
docker-compose up

看到 Tomcat 启动信息表示服务启动成功,然后按 Ctrl + c 停止服务,使用如下命令后台运行服务

docker-compose start

停止和关闭服务

如果只是需要停止服务,只需要执行如下命令

docker-compose stop

如果想要停止服务并删除容器,则执行以下命令

docker-compose down

总结

相较与传统部署方式,我的配置各种环境,期间还有可能遇到各种环境问题,使用 Docker 和 Docker Compose 后我只需要执行两条命令就能完成服务的上线和下线。

# 上线
docker-compose up
# 下线
docker-compose down

迁移服务器也不用担心各种环境问题,只需要保证新服务器中安装好 Docker 和 Docker Compose 就行了,极大的简化了我们的运维工作。当然 Docker 技术的便利和强大远不止这些,后续也将继续学习把它运用到实际中来。

发表评论