docker部署前后端分离项目

原創

denglaosao

2019-06-11 03:32

架构：后端基于springboot框架搭建，并且通过consul实现服务注册与发现，前端基于vue框架搭建
操作步骤：

docker环境准备
在部署前先要安装docker环境，docker就相当于运行在操作系统上的一个应用程序，所以相比虚拟机有许多的优势；docker的安装也比较简单，本文以centos7为例，
主要通过yum安装。
先安装一些必要的系统工具：
sudo yum install -y yum-utils device-mapper-persistent-data lvm2
添加软件源信息：
sudo yum-config-manager --add-repo http://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo
更新yum缓存：
sudo yum makecache fast
然后就可以安装Dokcer-ce：
安装完后就可以通过如下命令启动docker：
sudo systemctl start docker
systemctl stop docker(关闭命令)
至此docker的环境搭建完成，鉴于国内网络问题，后续拉取docker镜像可能比较慢，可配置镜像加速，对于linux环境，在/etc/docker/daemon.json中加入如下配置：
{
“registry-mirrors”: [“http://hub-mirror.c.163.com”]
}
后端项目部署
由于我们这个项目用了consul实现服务的注册于发现，所以我们先利用docker运行一个consul服务，由于docker官方仓库已经有了consul镜像，所以我们直接利用命令docker pull consul就可以下载consul的镜像文件，然后执行命令
docker images就可以看到下载好的镜像文件如下图：

然后执行如下命令，启动镜像：
docker run -itd -p 8500:8500 --name consul consul:latest
就开启了一个consul服务，命令具体参数的涵义下面有讲。
(1)生成镜像文件
首先将写好的基于springboot框架的web项目打成jar包，然后将Dockerfile文件和上述的jar包放置在同一个目录下，Dockerfile中的内容如下：
FROM openjdk:8-jdk-alpine
VOLUME /tmp
ADD oa-admin-1.0.0.jar app.jar
ENTRYPOINT [“java”,"-Djava.security.egd=file:/dev/./urandom","-jar","/app.jar"]
里面的oa-admin-1.0.0.jar即为刚生成的jar包，最终效果如下：

切换到/usr/local/app/os/admin目录下执行如下命令：
docker build -t oa-admin:v1.0.0 .
上面的命令就是根据dockerfile文件生成镜像，其中oa-admin就是生成的镜像名称，冒号后面的v1.0.0就是镜像的版本号，注意最后面的点不能省略，生成完后我们可以通过docker images查看生成的镜像如下图所示：

这样我们就生成了一个镜像文件。
(2)启动镜像生成容器
然后我们启动这个镜像文件，执行如下命令：
docker run -itd -p 8100:8100 --name oa-admin fe5c74ce9ca3
就可以启动这个镜像了。其中-itd相当于 -i -d -t 写在一起也可以，他们的涵义分别为：
-i: 以交互模式运行容器，通常与 -t 同时使用；
-t: 为容器重新分配一个伪输入终端，通常与 -i 同时使用；
-d: 后台运行容器，并返回容器ID；
–name为生成的容器的名称，后面一串长的字符串为上图中镜像的id，也可以改成镜像名：版本号。
-p 的意思是将容器里面跑的web项目的端口映射到宿主机，这样我们就可以通过宿主机的ip加上映射的端口访问容器里跑的web项目，例如我的宿主机的ip为192.168.1.82(内网),此时我们就可以通过http://192.168.1.82:8100访问我们在容器里运行的web项目。
常用的部署一般这样就可以了，还有一些其他的需求，例如docker容器之间的网络配置、文件的挂载等就不在此多说，可自行百度。
前端项目部署
基于vue的前后端分离的项目的部署可以将前端build之后的文件放在后端项目里面，这样就只要部署一次，不过这样不方便管理，所以此次我们采用前后端分开部署的方式。前端的部署其实我们只需要一个能提供http访问功能的服务就可以了，本次我们利用nginx来部署前端项目。
我们可以利用docker运行一个nginx服务，也可以在本地运行一个nginx，关于nginx的安装在此省略。主要提供如何将前端项目部署在nginx上并提供http访问。
(1) 打包前端项目
前端项目执行npm run build就会在项目的根目录下生成一个dist目录结构如下图所示：

里面已经将我们写好的前端页面包括那些js、css等文件都打在包里面。
然后将这个dist文件放置在nginx目录下的oa目录下，具体根据自己目录配置。
一般来说nginx安装完后的主目录为/usr/local/nginx ，在这个目录下我新建了一个目录oa，然后把dist文件拷进来，此时的目录结构如下：

(2) Nginx配置文件配置
前端项目文件放置在nginx目录下之后，我们就要开始配置ngixn的配置文件nginx.conf;该配置文件一般在/usr/local/nginx/conf目录下，里面有个默认配置文件，我们修改的内容主要为下图所示部分：

其中listen就是监听宿主机上的8888端口，location / 下面配置的root目录就是之前我们dist文件的放置目录，index就是我们访问时会去找这些文件。
配置好了之后我们就可以重启，然后通过192.168.1.82:8888就可以访问到我们的前端项目的首页了。