3

运维实战项目:Jenkins构建Nodejs前端项目

 5 months ago
source link: https://www.51cto.com/article/780658.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

运维实战项目:Jenkins构建Nodejs前端项目

作者:院长技术 2024-01-30 08:58:22
在Jenkins的CICD过程中,开发人员将代码提交到版本控制系统(如Git)中,Jenkins通过持续监控代码仓库的变化,自动触发构建、测试和部署流程。

Jenkins的CICD(持续集成/持续部署)概念是指通过自动化的构建、测试和部署流程,将代码从开发到生产环境进行集成和部署的一系列过程。CICD的目的是快速发现和修复代码中的问题,提高软件的质量和交付速度。

在Jenkins的CICD过程中,开发人员将代码提交到版本控制系统(如Git)中,Jenkins通过持续监控代码仓库的变化,自动触发构建、测试和部署流程。这个过程包括编译、单元测试、集成测试、代码审查、打包和部署等环节。通过自动化这些过程,Jenkins可以帮助团队快速发现和修复代码中的问题,减少人工干预,提高开发效率和软件质量。

Jenkins的CICD过程可以通过各种插件进行扩展和定制,支持各种编程语言和开发工具。Jenkins还提供了可视化的界面,使得团队成员可以轻松地管理和监控构建、测试和部署的过程。通过Jenkins的CICD过程,团队可以更好地协作和快速交付高质量的软件产品。

安装和配置Nodejs:

在Jenkins机器上安装Nodejs,然后在Jenkins的全局工具配置中进行设置

安装插件:

NodeJS Plugin

GitLab代码仓库如下:

图片

图片

新建一个项目,名字为:bill-wap,类型为:自由风格

图片

图片

图片

图片

#node版本
node -v
#npm版本
npm -v
#声明环境变量
source /etc/profile
#清除缓存
cnpm cache verify
#安装cnpm
cnpm install
#构建项目
npm run build
#打包成.zip格式
zip -r dist.zip dist

注意:dist这个是构建好生成的目录,具体看当时情况
图片

图片

点击立即构建

图片

图片

图片

图片

图片

图片

查看打包后的文件

[root@jenkins /var/lib/jenkins/workspace/bill-wap]#ll
total 2680
drwxr-xr-x   3 root root      54 Nov  2 17:22 dist
-rw-r--r--   1 root root 2589225 Nov  2 17:22 dist.zip    这个就是打包的ZIP包
-rw-r--r--   1 root root     191 Nov  2 16:40 Dockerfile
-rw-r--r--   1 root root     605 Nov  2 16:40 index.html
drwxr-xr-x 266 root root   20480 Nov  2 16:41 node_modules
-rw-r--r--   1 root root    1223 Nov  2 16:40 package.json
-rw-r--r--   1 root root   98526 Nov  2 16:40 package-lock.json
drwxr-xr-x   2 root root      22 Nov  2 16:40 public
-rw-r--r--   1 root root    1569 Nov  2 16:40 README.md
drwxr-xr-x   9 root root     153 Nov  2 16:40 src
-rw-r--r--   1 root root     847 Nov  2 16:40 tsconfig.json
drwxr-xr-x   4 root root     112 Nov  2 16:40 typings
-rw-r--r--   1 root root    1231 Nov  2 16:40 vite.config.ts

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK