web tricks
首页
前端
CSS
ChickenHouse (opens new window)
首页
前端
CSS
ChickenHouse (opens new window)
  • 前端工程化
  • 自动化部署
2020-11-04

超简单的前端自动化部署-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
  1. 从Jenkins官网下载最新war文件
  2. 运行java -jar jenkins.war即可

# 4. 配置Jenkins

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

修改jenkins配置文件

vi /etc/sysconfig/jenkins

端口

启动Jenkins

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

如果访问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,登录之后,开始创建任务

  1. 创建一个任务

1

  1. 选择第一项

2

# 3. git 配置

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

  1. 配置仓库

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

3

Credentials 即是gitee的登录密码

  1. 插件安装

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

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

4

5

6

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

  1. 添加触发器

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

7

  1. 代码仓库配置WebHooks

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

8

9

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

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

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

  1. 测试钩子

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

10

11

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

# 4. 自动化构建

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

npm install
npm build

# 1. 配置node

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

12

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

# 2. 配置构建脚本

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

13

# 3. 测试

在任务中点击立即构建

14

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

# 5. 自动化部署

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

  1. 安装jenkins插件Publish Over SSH,通过这个工具实现服务器部署功能。

  2. 在服务器创建一个文件夹,接收jenkins传过来的diam,这里我创建的是konnga-site。

  3. 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)

15

  1. 点击Test Configuration测试一下是否可以连接上,如果成功会返回success,失败会返回报错信息,根据报错信息改正即可。

  2. 构建后操作

点击构建后操作,增加构建后操作步骤,选择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个命令

16

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

最近更新
01
CSS 动画库推荐
05-07
02
Pinia,一个更简洁的 Vuejs 状态管理工具
03-30
03
reative 和 ref
03-30
更多文章>
Copyright © 2020-2022 konnga.cn
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式