自动化部署前后端项目

在平常的开发中，我们一般是在本地编写好代码后，将代码推送到git仓库，然后去到部署了项目的服务器那边将更新后的代码拉取下来，然后打包重新运行。我们可以看到，每次更新项目都要去服务器那边更新一次，很麻烦，那有没有方便一点的办法呢，项目推送到git后，服务器那边自动拉取代码进行打包发布，这样我们只需要将代码推送到git就可以了，不需要主动去服务器操作。

对于上面的方式呢，git给了我们一个钩子：webhook，通过这个钩子，当有代码推送到git时，git会触发这个钩子，这个钩子就会向目标地址发送一次请求，该地址就是服务器的地址，服务器接收到这个请求之后，就会执行相应的脚本，完成项目的部署。

本次教程是使用宝塔面板进行项目的搭建，git是国内的码云（gitee），前后端都可以进行自动化部署，前端为vue，后端为java，服务器为centos 7.6。

一、前置准备

1、安装宝塔

连接linux，输入命令：

yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.sh

等待一会会提示输入y，按要求输入即可。

安装成功后根据给的地址和账号密码登录面板，以后若是忘记了可以输入bt default再次获取。

登录成功后，会弹出一个推荐安装，可以先安装Nginx。

2、安装git

在开始之前，首先需要在服务器上安装git，因为服务器也是一个代码仓库，用来拉取gitee上的代码。

这里我们使用手动安装而不使用yum的方式，因为用yum的方式安装的git版本太老了。

进入：Index of /pub/software/scm/git/

下载最新版本：git-2.9.5.tar.gz

下载完成后进入宝塔面板的“文件”一栏，进入/usr/src目录，上传下载好的git，解压。

安装make：

yum install perl-ExtUtils-MakeMaker package

然后按提示输入

安装git：

cd /usr/src/git-2.9.5/
make prefix=/usr/local/git all
make prefix=/usr/local/git install

配置环境变量：

vim /etc/profile

按i，在文件的末尾加上：

export PATH=/usr/local/git/bin:$PATH

然后按esc，输入:wq保存。

刷新配置文件并测试：

source /etc/profile
git --vsersion

输出版本号即安装成功。

生成公钥

安装完git后，需要在gitee上加入服务器的公钥完成连接。

命令行输入：

ssh-keygen -t ed25519 -C "xxxx@xx.com"

这里的xxxx@xx.com为自己的邮箱，按照提示完成三次回车，即可生成 ssh key。

查看公钥：

cat ~/.ssh/id_ed25519.pub

复制公钥，注意后面的邮箱也要复制。

添加公钥

登录gitee：Gitee - 基于 Git 的代码托管和研发协作平台

点击头像的“设置”，点击“SSH公钥”，将公钥粘贴并添加即可。

添加完成后，输入：

ssh -T git@gitee.com

首次使用需要确认并添加主机到本机SSH可信列表。若返回 Hi XXX! You've successfully authenticated, but Gitee.com does not provide shell access. 内容，则证明添加成功。

二、前端自动化部署

安装npm

前端采用的是vue，所以需要安装npm。

下载并解压：

cd /usr/local
wget https://npm.taobao.org/mirrors/node/v16.13.1/node-v16.13.1-linux-x64.tar.gz
tar -zxvf node-v16.13.1-linux-x64.tar.gz
mv node-v16.13.1-linux-x64 node

建立软链接：

ln -s /usr/local/node/bin/npm /usr/local/bin/npm
ln -s /usr/local/node/bin/node /usr/local/bin/node

输入：npm -v，若返回版本号即安装成功。

最后安装chalk模块：

npm install chalk
#如果还缺其他很多模块，那就安装全部模块
npm install

创建前端项目

通过vue-cli创建：

#若这一步报错需先安装脚手架：npm install -g vue-cli
vue init webpack <project-name>

创建成功后通过vs code打开项目，由于只是演示，就不引入其他依赖了。

创建git仓库

在git中，点击创建仓库，输入仓库名称后点击“创建”，然后会进入一个带有教程的页面。

教程中的那个全局配置如果之前使用过git就不用配置了，如果没使用过则按要求配置即可。

在vs code中新建一个终端，输入以下命令：

git init
#这一行为教程中的命令，每个人的都不一样，按自己的来执行就好了
git remote add origin git@gitee.com:xxx/demo-vue.git
git add .
git commit -m "first commit"
git push origin master

然后回到git网页，刷新页面即可进入仓库，在仓库中，右上方有一个克隆/下载，点击并复制那个SSH的链接，后面会用到。

linux拉取git仓库代码

回到linux中，先创建一个git仓库。

git config --global user.name "your name"
git config --global user.email "your email"
cd /www/wwwroot
mkdir git
cd git
git init
#这里的链接是git网页中的SSH链接
git clone git@gitee.com:xxx/demo-vue.git

部署项目

首先先手动部署一次项目，执行以下命令：

cd /www/wwwroot
mkdir demo-vue
cd /www/wwwroot/git/demo-vue
npm run build
\cp -rf dist/* /www/wwwroot/demo-vue 

点击宝塔面板的网站，点击PHP项目，点击添加站点。

先填写该服务器的ip，然后在根目录那里进入到demo-vue目录之后再点击选择，最后点击提交即可。

在浏览器中输入服务器ip能正常访问就证明项目部署成功。

创建git钩子

接下来要安装webhook，在宝塔页面中，点击“软件商店”，搜索“webhook”安装。

点击设置，名称自己输入，执行脚本输入以下命令：

#!/bin/bash
echo ""
#输出当前时间
date --date='0 days ago' "+%Y-%m-%d %H:%M:%S"
echo "Start"
​
#git项目路径
gitPath="/www/wwwroot/demo-vue"
​
echo "Web站点路径：$gitPath"
​
#自动部署
cd /www/wwwroot/git/demo-vue
git pull
npm run build
\cp -rf dist/* /www/wwwroot/demo-vue 
echo "部署成功"

点击提交，然后点测试，等一会点击日志，看到日志中出现“部署成功”即可。

接下来就是最后一步了，点击查看秘钥，复制链接，那个param就不用复制了，类似下方的链接：

http://119.91.***.95:8888/hook?access_key=123

回到gitee网页，进入项目仓库，点击管理，点击webhooks，点击添加webhook，将链接粘贴并点击添加即可，然后点击测试，回到宝塔的webhook，可以看到日志中出现了新的一条记录。

大功告成，接下来回到vs code，随便添加点东西，然后提交推送到git，等一分钟左右在浏览器访问我们部署的项目，会发现我们新加的东西已经同步过来了。

三、后端自动化部署

安装jdk8

yum install -y java-1.8.0-openjdk-devel.x86_64

安装maven

后端用的是spring boot，所以需要安装maven。

前往下载：Maven – Download Apache Maven

选择Binary tar.gz archive这一行的下载。

下载完成后，将压缩包上传到/usr/loca，并解压。

配置环境变量：

vi /etc/profile

最后一行加上：

export MAVEN_HOME=/usr/local/apache-maven-3.8.4
export PATH=$MAVEN_HOME/bin:$PATH

刷新：

source /etc/profile

输入mvn -v，返回版本号即为安装成功。

创建后端项目

与创建前端项目类似，就不再重复了，到这里默认后端项目已创建且已推送到git上。

需要注意：

需要将target目录设置为忽略目录，防止服务器那边pull不成功，具体步骤如下：

1. 在与pom.xml同级的目录创建一个叫.gitignore的文件，如果有就不用创建了

2. 进入.gitignore，加入一行：/target/

3. 新增的忽略列表需要重新配置，命令行输入：

git rm -r --cached .
git add .
git commit -m 'update .gitignore'

最后push到git即可。

linux拉取git后端代码

回到linux，执行：

cd /www/wwwroot/git
#这里的项目可以自行配置
git clone git@gitee.com:xxx/aop-demo.git

部署

cd /www/wwwroot/git/aop-demo
mvn clean package
#端口号根据自己情况决定
/usr/bin/java -jar -Xmx1024M -Xms256M  /www/wwwroot/git/aop-demo/target/aop-demo-0.0.1-SNAPSHOT.jar --server.port=8080

启动成功后需要在宝塔的安全那里和服务器管理面板那里放行端口，然后可以试着请求一下接口看看是否部署成功。

搭建钩子

与前端类似，在宝塔中创建webhook并输入以下命令：

#!/bin/bash
echo ""
#输出当前时间
date --date='0 days ago' "+%Y-%m-%d %H:%M:%S"
echo "Start"
​
#git项目路径
gitPath="/www/wwwroot/git/aop-demo"
​
echo "Web站点路径：$gitPath"
​
#自动部署
cd /www/wwwroot/git/aop-demo
git pull
#通过端口号关闭原来的项目
kill -9 $(netstat -nlp | grep :8080 | awk '{print $7}' | awk -F"/" '{ print $1 }')
#这里需要使用路径来执行mvn，不然会不执行
/usr/local/apache-maven-3.8.4/bin/mvn clean package
#这里是将jar的运行日志输出到/www/wwwroot/log的aop-demo.log中
nohup /usr/bin/java -jar -Xmx1024M -Xms256M  /www/wwwroot/git/aop-demo/target/aop-demo-0.0.1-SNAPSHOT.jar --server.port=8080 >/www/wwwroot/log/aop-demo.log &
echo "部署成功"

在测试之前，需要先创建log文件夹：

cd /www/wwwroot
mkdir log

然后点击webhook的测试，发现项目可以正常启动，也可输出日志。

接下来与前端一致，复制webhook链接到gitee网页的项目中，添加webhook即可。

需要注意的是，如果钩子脚本不执行，那需要通过路径去执行。

例如钩子脚本中的git pull可能会不执行，只要改成这样就可以了。

/usr/src/git-2.9.5/git pull