一份前端工程师的自动化部署指南05-集成git

北落师门1856
107 阅读4分钟

使用node服务代理好静态资源之后，我们现在要做的就是通过Jenkins集成git将代码打包之后拉到static那个目录下

安装 Nodejs 环境

  • 使用 Jenkins Plugin 中 NodeJS 插件自动配置安装

image.png

image.png 点击下面的install no restart。

安装完成后 ，返回 Jenkins 首页 -> 系统管理 -> 找到 Global Tool Configuration(全局工具配置) => NodeJS => 新增NodeJS

image.png 安装最新的长期稳定维护版 Node.js

如何使用

那我们在任务中如何使用呢？我们只需要在任务的配置中，找到构建环境，选中 Provide Node & npm bin/ folder to PATH ，选择刚才配置好的 NodeJS 即可

image.png

使用SSH协议集成Git仓库源

这一步，我们使用 Jenkins 集成外部Git仓库，实现对真实代码的拉取和构建

生成公钥私钥

首先，我们先来配置公钥和私钥。这是 Jenkins 访问 Git 私有库的常用认证方式。我们可以使用 ssh-keygen 命令即可生成公钥私钥。在本地机器执行生成即可。这里的邮箱可以换成你自己的邮箱：

ssh-keygen -t rsa -C "xxxxx@qq.com"

执行后一路enter，默认放到/root/.ssh/id_rsa文件夹下

结束后，你会得到两个文件。分别是 id_rsa 和 id_rsa.pub。 其中，id_rsa是私钥文件，id_rsa.pub 是对应的公钥文件。我们需要在 Git 端配置公钥，在 Jenkins 端使用私钥与 Git 进行身份校验

在Gitee配置公钥

在 Gitee 中，如果你要配置公钥有2种方式：仓库公钥 和 个人公钥。其中，如果配置了仓库公钥，则该公钥只能对配置的仓库进行访问。如果配置了个人公钥，则账号下所有私有仓库都可以访问。 这里我们就以配置个人公钥为例子。找到设置里安全设置 => SSH公钥

这是我们先去服务器上查看私钥内容，使用cat命令查看

cat id_rsa.pub

得到一串密文之后全部复制下来粘贴到gitee上添加公钥的部分

image.png

在 Jenkins 配置私钥

回到 Jenkins。在 Jenkins 中，私钥/密码 等认证信息都是以 凭证 的方式管理的，所以可以做到全局都通用。 我们可以在配置任务时，来添加一个自己的凭证。点击项目的 配置，依次找到 源码管理 => Git => Repositories

如果没有git选项，需要去插件管理里下载git插件

image.png

添加 Credentials 中的jenkins配置，Private Key：这里则是我们填写私钥的地方。点击 Add 按钮，将 id_rsa 私钥文件内所有文件内容全部复制过去（包含开头的 BEGIN OPENSSH PRIVATE KEY 和结尾的 END OPENSSH PRIVATE KEY）

image.png 然后回到源码管理去添加凭证

Repository URL 使用https的，ssh可能会出现权限问题 image.png 如果出现红色字样无法连接仓库:Error performing git command: xxx 则需要在虚拟机上安装gityum -y install git

构建测试

然后我们使用Jenkins进行构建测试一下，看看能不能拉到git上的代码 到工程界面，点击立即构建

image.png 可以点击这个图标查看构建日志

image.png 这个时候git上的代码就拉到了jenkins的工作空间中。

image.png Jenkins工作空间在服务器对应的地址在控制台里可以看到，即/var/lib/jenkins/workspace/test 然后拼上工作空间中的server/static的地址就是/var/lib/jenkins/workspace/test/server/static

image.png server文件夹是我们node服务代码，我们不用去管，我们主要的任务是要将vue-test的代码更新过来，然后先npm install（第一次的时候）,然后npm run build，这个时候我们之前设置的打包路径是在server/static文件夹下的，我们可以去修改打包路径到专门一个文件夹，也可以去直接对server/static文件夹进行操作，将此文件夹下的文件移动到服务器上/front/vueTestServer/static文件夹下即可。

配置构建环境

在构建环境栏目中我们选择之前安装的node环境，然后可以选择相应的版本号，我们之前就安装了nodev16一版，所以这里只有一个选项，其他可以默认。

image.png

编辑构建脚本

现在到工程的配置里面添加构建的执行shell

#!/bin/sh -l
cd vue-test
npm install --registry=https://registry.npm.taobao.org
npm run build
cp -rf /var/lib/jenkins/workspace/test/server/static/* /front/vueTestServer/static/

image.png 然后保存，我们去构建一次试试。

如果出现了权限的问题，无法移动文件，是因为jenkins用户没有权限访问front文件夹的问题，所以我们更改一下front的用户权限

image.png 执行一下即可

chown -R jenkins:jenkins front

然后我们再次构建，就可以了

image.png

然后我们去更改一下本地的代码，提交代码之后，再构建一次，就会发现页面也发生了改变，这样就成功的实现了一个简单的自动化发布

image.png

后面在学习使用docker部署，后续再补上

avatar
文章
阅读
粉丝