SpringBoot Vue Jenkins部署

准备工作：

云服务器
Xshell（非必须，使用方便而已）
在服务器上安装Docker、Jdk、Git、maven、Jenkins

后端配置

首先看下配置的结构

然后看下具体配置：

1. .dockerignore文件：

!easytoindustry-0.0.1-SNAPSHOT.jar

2. Dockerfile配置文件

# 该镜像需要依赖的基础镜像
FROM hub.c.163.com/library/java:latest
# 将当前目录下的jar包复制到docker容器的/目录下
ADD ./easytoindustry-0.0.1-SNAPSHOT.jar ./easytoindustry.jar
# 运行过程中创建一个api.jar文件
RUN bash -c 'touch /easytoindustry.jar' && \
echo "Asia/Shanghai" > /etc/timezone
#暴露的端口号
EXPOSE 8082
# 指定docker容器启动时运行jar包
ENTRYPOINT ["java", "-Djava.security.egd=file:/dev/./urandom", "-jar","/easytoindustry.jar"]
# 指定维护者的名字
MAINTAINER wyf

3. easytoindustry-0.0.1-SNAPSHOT.jar

即把项目的jar包放在这即可

Jenkins部署后端项目

首先打开Jenkins的可视化界面（以下路径全为云服务器安装的路径）

• 找到系统管理的全局工具配置
  
  

将这三个保存退出即可

• 找到系统管理的插件管理
  点击可选插件安装插件，如图：
  
  安装插件后重启Jenkins
• 之后点新建任务创建任务名称
  
  选择maven项目进行创建
• 来到最重要的一步，配置
  
  选择git把写好的后端项目仓库地址放上去

勾选所选内容

建立添上：

clean install -Dmaven.test.skip=true -Ptest

选择执行shell

#!/bin/sh
#docker 镜像/容器名字或者jar名字 这里都命名为这个
SERVER_NAME=officialwebsite/officialwebsite
#容器id
CID=$(docker ps | grep "officialwebsite" | awk '{print $1}')
#镜像id
IID=$(docker images | grep "officialwebsite" | awk '{print $3}')
#当前日期
DATE=`date +%Y%m%d`
 
#清除旧容器
if [ -n "$CID" ]; then
echo "存在officialwebsite容器，CID=$CID"
echo "停止旧容器"
docker stop officialwebsite
echo "删除旧容器"
docker rm officialwebsite
fi
 
# 清除旧镜像
if [ -n "$IID" ]; then
echo "存在officialwebsite镜像，IID=$IID"
echo "删除镜像"
docker rmi $IID
fi
 
#构建镜像
echo "开始构建镜像"
docker build  -f ./src/main/docker/Dockerfile  -t $SERVER_NAME:v${DATE} ./target
echo "构建镜像成功!"
 
 
# 运行docker容器
echo "创建并启动$SERVER_NAME容器..."
BUILD_ID=dontKillMe docker run --name officialwebsite  -p 8082:8082 -d $SERVER_NAME:v${DATE}
echo "$SERVER_NAME容器启动完成"

把shell脚本添上去，保存！！！

点击立即构建，出现蓝色即表示构建成功

红色的话就去jenkins构建项目的控制台查看错误信息

然后访问服务器ip:端口号访问后端项目，大功告成，后端就配置完成了

前端配置

在项目根目录下创建两个文件----》

1. nginx.conf

worker_processes auto;

events {
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/octet-stream;

    sendfile        on;
    keepalive_timeout  65;


    client_max_body_size   20m;
    server {
         listen       8090;# vue端口
         server_name  ip;#服务器IP

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

             error_page   500 502 503 504  /50x.html;
             location = /50x.html {
                 root   html;
             }
             location ^~/officialwebsite/ {
                   proxy_pass  https://ip:8088/;#后端api接口
                 }
          }
}

2.Dockerfile

# 设置基础镜像
FROM nginx
# 定义作者
MAINTAINER bannerstudio
# 将dist文件中的内容复制到 /usr/share/nginx/html/ 这个目录下面
COPY dist/  /usr/share/nginx/html/
COPY nginx.conf /etc/nginx/nginx.conf
EXPOSE 8090
# aaa
RUN echo 'Hello World'

配置Jenkins的前端

• 直接构建一个项目
  

填写shell脚本

#!/bin/sh
#docker 镜像/容器名字或者jar名字 这里都命名为这个
SERVER_NAME=bannerwebsiteweb/bannerwebsiteweb
#容器id
CID=$(docker ps | grep "bannerwebsiteweb" | awk '{print $1}')
#镜像id
IID=$(docker images | grep "bannerwebsiteweb" | awk '{print $3}')
#当前日期
DATE=`date +%Y%m%d`
 
#清除旧容器
if [ -n "$CID" ]; then
echo "存在bannerwebsiteweb容器，CID=$CID"
echo "停止旧容器"
docker stop bannerwebsiteweb
echo "删除旧容器"
docker rm bannerwebsiteweb
fi
 
# 清除旧镜像
if [ -n "$IID" ]; then
echo "存在bannerwebsiteweb镜像，IID=$IID"
echo "删除镜像"
docker rmi $IID
fi
 
#构建镜像
echo "开始构建镜像"
pwd
ls
docker build  -f ./Dockerfile  -t $SERVER_NAME:v${DATE} .
echo "构建镜像成功!"
 
 
# 运行docker容器
echo "创建并启动$SERVER_NAME容器..."
BUILD_ID=dontKillMe docker run --name bannerwebsiteweb -p 8090:8090 -d $SERVER_NAME:v${DATE}
echo "$SERVER_NAME容器启动完成"

点击构建，显示蓝色即创建成功，测试前端页面

（注意：前后端端口记忆跨域要做好，各种端口号保持对应。）

这样Jenkins部署SpringBoot和Vue的项目就完成了