使用Jenkins去部署前端项目

使用Jenkins去部署前端项目

通过PR产生触发器去触发Jenkins的执行,Jenkins去服务器上执行一系列的操作,这个操作例如:

git fetch
    git pull
    npm install
    npm run build
    ...
复制代码

但实际上我发现,这个其实在服务器上跑一个shell脚本就行了,就如上所示,便可以完成部署,根本和Jenkins 产生不了关系。

分隔符经历了许久时间,阅读了其他人的博客给了我新的思路,于是产生以下流程图。

使用Jenkins去部署前端项目

我们通过PR去触发Jenkins钩子,在Jenkins里关联了github项目与与分支,在构建选项中执行了脚本实现项目编译打包生成我们需要的静态资源文件(ps:其实我的迷惑点是在这里,Jenkins的项目构建是在自己内部完成了项目的打包而非在其他环境下)。在第二个构建步骤,我们选择了发送文件到服务器。具体配置将在下面述说。

配置及实现

1. 在插件安装中需要安装

publish over ssh
复制代码

重新启动

2. 在管理配置中我们找系统配置,如下图所示

Manage Jenkins => System Configure => Publish over SSH
复制代码
使用Jenkins去部署前端项目
  • Name 可以自定义名称
  • hostname 写入服务器名称
  • Username 是你的用户名
  • Remote Directory 是你要写入的路径,这个会牵扯到后续要部署的位置
  • 可以选择使用密码或key,我选择的是密码

3. 新增一个item 选择第一个自定义工作流,我们可以看到一个 tab栏。如下图

使用Jenkins去部署前端项目

3.1 general

在 general 里,我们可以写一些项目描述,可以不写
复制代码

3.2 源码管理

这里我们需要选择 git 写入你的项目路径,和凭证(就是你拉下git项目的账户)如果没有需要添加,后面需要指定分支,我选择的是master(这里选择master,在构建时便会拉取master分支的代码),具体如下图。

使用Jenkins去部署前端项目

3.3跳过构建触发器找到构建环境

如下图所示,这里的node也是要安装的,和上述的插件安装类似,provide Node也是一个插件,应用于构建环境,这里我们要把它勾选上(如果没有改复选项,需要进行插件安装)。其他选项皆为默认即可。

使用Jenkins去部署前端项目

3.4构建

构建是整个项目的核心部分。

3.4.1 可以选择构建操作有很多,我们选择了shell脚本去构建。

Execute Shell
复制代码
使用Jenkins去部署前端项目

代码如下:

#!/bin/bash
    yarn install && yarn d
    
    cd distDev
    tar -acvf dist.tar.gz *  #压缩成文件方便上传
复制代码

3.4.2执行完这一步,我们接着选择构建命令

send files or execute commands over ssh
复制代码
使用Jenkins去部署前端项目

在SSH server 中我们写入了一下信息

  • Name 这个是在我们上面讲到的系统配置里写入的服务器地址和信息,这里作为选择操作。
  • transfer里是我们要传输的配置
  • source files 是要传输的文件 – 我们选择的是上个命令生成的压缩文件
  • Remove prefix 移除路径中的前缀
  • Remote Directory 要部署的服务器目录
  • Exec command 执行的命令 – 我做的是删除当前目录 把新的文件解压进去
  • 完成

3.5构建后操作没有用到 不表

原文 

https://juejin.im/post/5e98510351882573a13798e7

本站部分文章源于互联网,本着传播知识、有益学习和研究的目的进行的转载,为网友免费提供。如有著作权人或出版方提出异议,本站将立即删除。如果您对文章转载有任何疑问请告之我们,以便我们及时纠正。

PS:推荐一个微信公众号: askHarries 或者qq群:474807195,里面会分享一些资深架构师录制的视频录像:有Spring,MyBatis,Netty源码分析,高并发、高性能、分布式、微服务架构的原理,JVM性能优化这些成为架构师必备的知识体系。还能领取免费的学习资源,目前受益良多

转载请注明原文出处:Harries Blog™ » 使用Jenkins去部署前端项目

赞 (0)
分享到:更多 ()

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址