linux前端自动build,CentOS7 上利用 jenkins 实现自动部署

本文介绍了如何在CentOS7服务器上利用Jenkins自动化部署Vue前端项目。首先,通过Jenkins安装和配置NodeJS插件,接着设置Git源并构建参数。然后,编写Shell脚本进行npm安装、构建和部署操作。解决因Windows与Linux文件名大小写敏感性差异导致的构建问题后,成功实现了自动部署。
摘要由CSDN通过智能技术生成

前端项目打包部署,以前都是手工运行打包命令,打包结束后压缩,然后上传到服务器上解压部署。这种重复性的工作,确实有点让人烦,而且效率也不高。

本文基于 vue 的前端项目、 GitHub 的代码仓库,简述在 CentOS7 上利用 jenkins 实现自动部署。

一、安装插件 NodeJS

Jenkins -> Manage Jenkins -> Manage Plugins

5950b7bae568a1ab7ed321613f7e751c.png

-> Avaliable 搜索 NodeJS,勾选 NodeJS,点击 Install without restart 安装

dba4d030c4b5c812cdc52a834806333c.png

二、配置 NodeJS 插件

Jenkins -> Manage Jenkins -> Global Tool Configuation

7bda276b74a2a52c6052ab7641c7887b.png

NodeJS 节点下,点击 NodeJS installations

8e64973cee131da7bf7e835bc2686c46.png

填写 Name,勾选 Install automatically,选择 Version,最后点击 Save

4f023a00c020337396a4a5329d3b0bd9.png

三、发布配置

Jenkins -> New Item

ced8ba70ccb84770fcdcc2d7793eb8f7.png

填写 job name,选择 Freestyle project,点击 OK

5e6b704ee1547b3cbaf6a184fc8955e0.png

点击 Configure 配置 job 构建参数

b08e7bb8c47e12ad0bb0f0c68f5e8d5d.png

General 配置,填写 Project name,Description

058a8fde8fb059f2580de5e30d98bad3.png

Source Code Management,选择 Git,填写 Repository URL,如果是私有仓库,还需要填写 Credentials( 点击 Add 添加)

cfbc558d348dc97d5cf9557e45233c56.png

Build Environment,勾选 Provide Node & npm bin/ folder to PATH

ce7f54f5cc78dcce252989647ce63588.png

Build,点击 Add build step 下拉,选择 Execute shell

2c445550b5b617c760d7f7c6f978e319.png

输入以下脚本

node -v

npm install -g yarn --registry=https://registry.npm.taobao.org

yarn -v

yarn install

yarn lint

yarn build

6f62e6bcd285eb0d2765e4794a63d8ab.png

点击 Save

四、测试构建

Jenkins -> All -> node_vue -> Build Now

36e6c24a1eda3e94107f001f5796d7f5.png

五、遇见问题

c0219d3b2e29c7cf81c8f045998f8522.png

项目是在 windows 下开发,windows 对文件名大小不敏感,上传到 CentOS7 构建时出现如上错误,通过更改文件名的大小写,保持代码中引用文件名与实际文件名大小写一致,构建成功。

f0caecaee398a315d5193c92f3002309.png

总结

以上所述是小编给大家介绍的CentOS7 上利用 jenkins 实现自动部署,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

如果你觉得本文对你有帮助,欢迎转载,请注明出处,谢谢!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值