jenkins自动化部署：前后端分离

jenkins自动化部署：前后端分离

前言

这段时间准备和小伙伴着手做一个小项目，顺便把自己平时学习的东西，给汇总一下。故在每次部署的时候，都感觉特别麻烦，这个时候就想到了jenkins自动化部署，来解放双手。所以这里就顺便把自己学习jenkins自动化部署，给做一个笔记，防止后面自己忘记了。

jenkins安装

首先jenkins安装，我采用的docker镜像来进行安装的。

docker search jenkins      // 查看docker镜像
docker pull jenkinsci/blueocean    // 拉取jenkins镜像

镜像拉取完了之后，我们就好准备启动命令。注意这里一定要挂在容器卷。

docker run --name jenkins-yhl -d -p 8080:8080 -p 50000:50000 -v /root/docker/jenkins/jenkins-data:/var/jenkins_home -u 0 b08c88ded80a

命令里的b08c88ded80a为镜像ID，大家替换成自己的即可。

-v /root/docker/jenkins/jenkins-data:/var/jenkins_home ：

1. /root/docker/jenkins/jenkins-data为服务器路径。
2. /var/jenkins_home 为容器路径
3. 这里的容器卷大家可以理解为"共享文件夹"，把容器内的文件给映射出来。

启动成功，正常情况会返回容器ID

然后访问浏览器：http://服务器ip:8080 如果访问不了，检查一下是否开启防火墙，开启了防火墙的话，需要把8080端口给暴露出来。

注意：第一次启动的时候正在加载jenkins大概会等待3-10分钟。最后访问成功效果如下：

这里的密码大家可以在自己的挂在容器卷里就可以直接看到

cat /root/docker/jenkins/jenkins-data/secrets/initialAdminPassword

得到命令后，直接在粘贴到输入框里

然后下面的步骤大概就是选择安装推荐的插件即可

插件安装成功后，会进行创建用户，这里输入自己想要创建的用户即可。

保存完成后，我们进入主界面

jenkins插件安装

选择系统管理-插件管理

这里我们需要安装这四个插件

SSH plugin				 // 可以在jenkins所在服务器执行shell脚本
Publish Over SSH         // 远程部署，当jenkins和不在同一台的时候，需要用到
NodeJS					 // 部署前端的打包的时候需要用到
Gitee					 // 下载gitee上的代码

安装完这三个插件后，我们需要配置自己的jenkins环境

选择系统管理-系统配置

配置：SSH remote hosts

配置：Publish over SSH

配置完系统配置，然后我们需要配置：系统管理-全局工具配置

jdk配置

maven配置

node

这些环境配置完后，我们就可以开始创建工程，进行自动化部署了。

创建工程，部署springboot项目

上面的环境配置完成后，我们可以进行创建工程了。这里我们选择创建：自由风格的项目

创建完成后，我们来到源码管理

配置完源码管理，我们来到构建触发器，这我选择的是每天18点种自动部署。

搭建也可以选择Gitee webhook 触发构建，这个构建，就是检查到gitee上有，有提交就自动部署。

我们需要把http://8.133.163.121:8080/gitee-project/backend给填到gitee上的

照着如图配置即可，然后点击添加即可

最后到了构建这一步，我们选择添加构建步骤：选择调用顶层maven目标。这里我们选择自己jenkins自动安装的maven版本（就是我们在全局工具配置里面的配置的），然后执行的命令的是clean package这个就不错解释了，

然后下面的pom文件，是你要打包的项目的pom路径。注意这里可能和你们的pom文件路径不一致。 以你们自己的实际的pom文件为准。

添加maven的主要作用就是帮我们打包项目，现在这个项目我们已近打包完成，然后我们需要这个打包的文件，给放在我们指定位置。所以我们还需要添加个构建步骤：

shell脚本

echo "shell脚本开始了"
cp /root/docker/jenkins/jenkins-data/workspace/backend/my-backend/backend/target/backend-1.0.0-SNAPSHOT.jar /root/docker/MyProject/
docker restart backend
echo "shell脚本结束了"

命令非常简单，就是把容器卷里的脚本复制到指定目录下，然后重启docker容器（我自己创建了容器，挂在了这个jar包，所以这里我们只需要重启容器就可以）。到这里我们的后端自动化部署就搞定了。

创建工程，部署前端

前端工程，我们是挂在nginx下，实现动静分离的效果。

nginx配置文件如下

user  nginx;
worker_processes  1;

error_log  /var/log/nginx/error.log warn;
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;
    upstream myserver{
	 server 8.133.163.121:8089;
    }
    
    server{
       listen       80;
       server_name  localhost;
	  location / {
	  	root  /usr/share/nginx/html/dist;
	    	index index.html index.htm;
	  }
	  # 安全漏洞，点击劫持
	  add_header X-Frame-Options SAMEORIGN;
	  # 代理后端地址
	  location /frontend {
	  	proxy_pass http://myserver;
	  }
	  error_page   500 502 503 504  /50x.html;
	  proxy_connect_timeout 1;
	  proxy_send_timeout 300;
	  proxy_read_timeout 600; 
    }
    sendfile        on;
    #tcp_nopush     on;

    keepalive_timeout  65;

    #gzip  on;

    include /etc/nginx/conf.d/*.conf;
}

准备好配置文件后，我们就来创建jenkins工程了，和上面一样，我们创建自由风格的项目

源码管理：这里和后端一样

这里我选择的构建触发器是Gitee webhook，因为前端是放在nginx里的，切换是非常快，基本上可以是无感的。配置方式的话，和后端配置是一样的。可以参考上面的。

构建环境 这里需要选择nodejs不然，打包时候会报错

构建：添加如下两个构建命令

echo "shell 脚本开始执行"
node -v
npm -v
cd $WORKSPACE
cd my-frontend/
echo "设置镜像源"
npm install --registry=https://registry.npm.taobao.org
echo "打包"
npm run build:prod
echo "shell 脚本执行完毕"

frontend.sh脚本

# 删除之前的静态文件
cd /root/docker/nginx/html/dist
rm -rf *
# jenkins挂在的文件给拷贝到nginx挂在的文件夹下
cp -r /root/docker/jenkins/jenkins-data/workspace/frontend/my-frontend/dist/* /root/docker/nginx/html/dist

配置完构建操作后，点击保存，我们的前端自动化部署，也算是完成了。