超简单的前端自动化部署-Jenkins

作为前端开发人员，都有使用过Jenkins的自动化部署的经验，然而在这一过程中，我们最多接触的是点击一个构建按钮，然后等待构建结束，返回网站查看结果。再者，我们还可以通过构建记录查看控制台输出，来调试构建失败时的信息，这是大多数前端对Jenkins的认识。那自动化部署这个东西是怎么来的？了解自动化部署是怎么实现的，是我们进阶成为一名高级前端工程师，需要去了解并掌握的。在此之前，最好是有一台自己的服务器，没有的话可以在自己本地上实践。

# 目标

本文将会详细讲述如何实现自动化部署，从本地项目推送代码之后，服务器自动打包构建，部署。

# 1. 准备工作

# 1. 创建项目

我们以一个vuepress项目为例，创建一个文档平台，什么类型的项目不是重点，只要是一个项目，vue或react的都可以。

mkdir chicken-house-site && cd chicken-house-site
yarn init
yarn add -D vuepress
mkdir docs && echo '# Hello VuePress' > docs/README.md

这里我们创建了一个chicken-house-site的项目。

更多关于vuepress的细节请查看官网 (opens new window)

# 2. 关联远程git仓库

建立一个远程git仓库，将代码提交到远程仓库，这里我使用的是gitee (opens new window)

# 3. 安装Jenkins

linux

在此之前你需要有一台linux服务器，然后请确保服务器已经安装jdk

使用yum安装jenkins是最简单的，执行以下命令

sudo wget -O /etc/yum.repos.d/jenkins.repo http://pkg.jenkins-ci.org/redhat/jenkins.repo
sudo rpm --import https://jenkins-ci.org/redhat/jenkins-ci.org.key
sudo yum install jenkins

windows

从Jenkins官网下载最新war文件
运行java -jar jenkins.war即可

# 4. 配置Jenkins

jenkins默认端口是8080，这个跟tomcat的默认端口冲突，我们也修改一下默认端口为8081(或其他未使用的端口)。

修改jenkins配置文件

vi /etc/sysconfig/jenkins

启动Jenkins

service jenkins start

启动成功后在浏览器打开。
进入后会让我们输管理员密码，打开网页上提示路径下的文件，复制密码粘贴输入即可。
然后会让安装需要的插件，此处选默认即可，等待安装完成。
创建一个管理员账户。

如果访问Jenkins时出现错误：Please wait while Jenkins is getting ready to work ... 进入Jenkins目录

/var/lib/jenkins
vi hudson.model.UpdateCenter.xml

将 url 中的 https://updates.jenkins.io/update-center.json 更改为 https://mirrors.tuna.tsinghua.edu.cn/jenkins/updates/update-center.json (清华大学的镜像地址)

# 2. 创建任务

访问jenkins，登录之后，开始创建任务

创建一个任务

选择第一项

# 3. git 配置

接下来，我们要在创建的任务中配置git。当我们将代码提交到远程仓库时，让jenkins知道我们提交了代码，这是自动部署的前提。

配置仓库

继续上一步，在我们创建的任务中，选择源码管理，配置git仓库信息。

Credentials 即是gitee的登录密码

插件安装

我们还需要安装Generic Webhook Trigger Plugin插件。

Manage Jenkins(系统管理) -> Manage Plugins(插件管理) -> 搜索并安装Generic Webhook Trigger

该插件是主要功能是根据不同的参数触发不同的构建，比如我向远程仓库提交的是master分支的代码，就执行代码部署工作，这里我们为了方便，只要提交代码到远程，便自动构建。

添加触发器

回到任务的配置，勾选即可。

代码仓库配置WebHooks

配置完了Jenkins的触发器，我们还需要在仓库中做相应配置，我们的仓库是在gitee中创建，找到仓库的管理配置。

这里URL的格式为：http://<User ID>:<API Token>@<Jenkins IP地址>:端口/generic-webhook-trigger/invoke

userid和api token可以在jenkins的系统管理-管理用户-admin-设置里找到

Jenkins IP地址和端口是你部署jenkins服务器的ip地址，端口号我们这里是8081，密码即是和useId对应的用户的密码，也就是jenkins用户的密码。

测试钩子

点击测试，会自动发送一个请求，jenkins会在任务的构建历史中创建一个构建记录

以前我们的任务只是简单的拉取代码，还没有正式部署，下一步我们继续。

# 4. 自动化构建

接下来开始自动构建的配置，jenkins的自动构建任务分很多种，有单元测试、批量命名等，这里我们要做的是安装依赖包-打包两个基本的工作流。

npm install
npm build

# 1. 配置node

就像本地运行项目，打包一样，需要node，我们要在jenkins上配置node，在jenkins安装nvm wrapper插件，在任务的配置里面的构建环境，配置以下信息

这里我选的node版本是10.9.0，可以根据自己的需要选择

# 2. 配置构建脚本

这里我配置的是vuepress的项目，脚本就是简单的安装依赖和打包，同时将dist里面的东西打包成一个文件，因为我们要传输，配置好后保存

# 3. 测试

在任务中点击立即构建

蓝色是构建成功，红色是构建失败，构建成功后我们可以在工作空间中看到相关文件。

# 5. 自动化部署

接下来就是自动化部署，是我们最需要的功能。

安装jenkins插件Publish Over SSH，通过这个工具实现服务器部署功能。
在服务器创建一个文件夹，接收jenkins传过来的diam，这里我创建的是konnga-site。
Jenkins想要往服务器上部署代码必须登录服务器才可以，这里有两种登录验证方式，一种是ssh验证，一种是密码验证，就像你自己登录你的服务器，你可以使用ssh免密登录，也可以每次输密码登录，系统管理-系统设置里找到Publish over SSH这一项。

相关配置说明：

Passphrase：密码（key的密码，没设置就是空）
Path to key：key文件（私钥）的路径
Key：将私钥复制到这个框中(path to key和key写一个即可)

SSH Servers的配置：
SSH Server Name：标识的名字（随便你取什么）
Hostname：需要连接ssh的主机名或ip地址（建议ip）
Username：用户名
Remote Directory：远程目录（这里我配置的根目录）

高级配置：
Use password authentication, or use a different key：勾选这个可以使用密码登录，不想配ssh的可以用这个先试试
Passphrase / Password：密码登录模式的密码
Port：端口（默认22）

点击Test Configuration测试一下是否可以连接上，如果成功会返回success，失败会返回报错信息，根据报错信息改正即可。
构建后操作

点击构建后操作，增加构建后操作步骤，选择send build artificial over SSH，参数说明：

Name：选择一个你配好的ssh服务器
Source files ：写你要传输的文件路径(这里的文件路径是相对jenkins的工作目录而言也就是：/var/lib/jenkins/workspace/konnga-site，所以dist.tar.gz的完整路径是：/var/lib/jenkins/workspace/konnga-site/docs/.vuepress/dist/dist.tar.gz)
Remove prefix ：要去掉的前缀，不写远程服务器的目录结构将和Source files写的一致
Remote directory ：写你要部署在远程服务器的那个目录地址下，不写就是SSH Servers配置里默认远程目录
Exec command ：传输完了要执行的命令，我这里执行了解压缩和解压缩完成后删除压缩包2个命令

到这里，我们的自动化部署就完成了，后面我们就可以在本地修改代码后推送到远程仓库，就会自动帮我们构建和打包啦。