Jenkins部署前端项目实战方案

概述

在目前工程化项目中,项目上线必定经过代码编写---》打包---》部署的流程,如果没有一个自动化部署的方案,按照传统项目开发方式,我们只有每次项目开发完后,手动打包项目,然后登录服务器,将我们本地打包后的项目传到服务器,这个是非常麻烦了,对于开发者来说,我们应该将精力放在开发上,对于前端来说,可能有时候部署还要麻烦后端帮忙,这个也是非常的尴尬,因此,打包部署这块最好交给自动化工具处理,下面我会以实际公司项目通过自动化工具打包部署的流程给大家呈现一遍前端项目部署到服务器的自动化流程。

工具

Jenkins

什么是Jenkins?

Jenkins 是一个开源的、用 Java 编写的持续集成和持续交付 (CI/CD) 工具。它主要用于自动化软件开发过程中的各种任务,对于企业项目开发自动化来说,是非常强大的工具,内置很多插件,可以供我们完成更多复杂的任务,例如:

  • 自动构建代码
  • 自动运行测试
  • 自动打包应用程序
  • 自动部署到服务器
  • 生成测试报告和构建状态

安装Jenkins

我们可以将Jenkins安装到自己本地电脑上,也可以安装到服务器上,我这里以安装到自己电脑为例给大家讲解,系统windows,当然,安装到服务器的好处是可以团队共享,如果自己一个人使用,安装到本地也是没问题的。

Jenkins大体工作流程

如果需要安装linux版本的,安装步骤参考官方提供的方案(cloud.tencent.com/developer/a...

1、选择安装版本

我以最新稳定版为例,安装包链接如下:

www.jenkins.io/download/

选择windows版本

2、安装

等待下载完成,按照提示安装即可,需要设置登录账号、密码、访问端口等。

注意:Jenkins的主目录最好不好放到C盘,后续产生的工作空间文件会越来越大,建议放其他盘符。

3、安装成功

访问:http://localhost:8089, 出现如下页面就成功了(我安装的时候配置的端口是8089),自己可以改动。注意选择安装推荐插件,等待插件安装完成即可。

插件安装完成后,登录后来到genkins首页如下:

安装必要插件

一些必须的插件,比如(git),这些基础的上面推荐插件已经都装过了,我们略过

插件安装位置如下: 除开默认进来安装的推荐插件之外,我们还需要安装如下的几个插件:

NodeJS Plugin

前端项目构建,必须要用到的node

Publish Over SSH

前端项目构架完成,需要将本地构建的产物,推送到对应服务器,因此需要借助这个插件完成。

系统配置

1、配置node相关

要打包前端项目,首先需要用到node,上面下载了node相关插件后,我们需要来到tool下配置,如图所示:

找到nodeJS安装,配置需要用到的node版本,注意,可以添加多个,在项目构建的时候我们可以选择在这里配置的node版本。

2、配置推送服务相关

项目构建打包后,需要配置服务器相关的信息,然后才能推送到服务器对于目录下:

选择System

输入服务器账号对应的密码,这里除开密码登录,也可以使用ssh,我这里采用账号密码的形式。

配置服务器信息

创建构建任务

上面配置好后,我们就可以进行构建任务创建了

1、新建item

点击新建item

输入任务名称,以及构建类型,推荐自建创建或者管道方式(常用),这里我选择用的freeStyle-project

2、任务配置

创建完成后,需要对构建任务进行配置,包含git、node、脚本等

源码管理

首选配置git相关

点击添加,追加git账户信息,其他默认,只需要输入git账号名和密码即可,然后上面就可以选择了

环境配置

选择前面流程配置过的node,勾选如下:

构建脚本配置

选择构建步骤中的Execute Windows batch command ,用来执行构建项目的脚本,因为基于windows系统的,所以必须选这个,如果是linux系统的话,Excute shell 添加如下几个构建命令,具体根据自己项目实际情况而定

  • npm -v
  • node -v
  • npm i pnpm -g
  • pnpm i
  • pnpm run build

推送服务器配置

选择构建步骤Send files or execute commands over SSH

配置需要上传的文件,以及上传到服务器的位置目录

构建

上面的配置完成后,就可以构建项目了,在构建任务列表,进入需要构建的任务下

选择构建即可 查看构建任务,下面列表的构建历史以及正在构建的任务,点击查看构建任务详情,可以看到有正在构建的日志等等。

构建出错相关日志可以在下面查看,构建出错可以按照日志进行修改配置这些。

服务器查看

进入服务器,可以看到我们构建的任务成功上传到了服务器。

总结

Jenkins对于自动化流程来说,功能非常强大,我们可以利用不同插件实现不同效果,仅仅使用上面的配置,也能完整闭环项目从开发到部署流程,要做其他更加复杂的操作,比如:上传到网盘、发送邮件这些,都可以借助插件完成,通过这个工具我们可以极大提升我们的开发体验。

相关推荐
.Shu.36 分钟前
Redis Reactor 模型详解【基本架构、事件循环机制、结合源码详细追踪读写请求从客户端连接到命令执行的完整流程】
数据库·redis·架构
emojiwoo1 小时前
【前端基础知识系列六】React 项目基本框架及常见文件夹作用总结(图文版)
前端·react.js·前端框架
张人玉1 小时前
XML 序列化与操作详解笔记
xml·前端·笔记
杨荧2 小时前
基于Python的宠物服务管理系统 Python+Django+Vue.js
大数据·前端·vue.js·爬虫·python·信息可视化
YeeWang2 小时前
🎉 Eficy 让你的 Cherry Studio 直接生成可预览的 React 页面
前端·javascript
Orange3015113 小时前
《深入源码理解webpack构建流程》
前端·javascript·webpack·typescript·node.js·es6
lovepenny3 小时前
Failed to resolve entry for package "js-demo-tools". The package may have ......
前端·npm
尚书3 小时前
全局核心状态 + 局部功能内聚模块化混合架构
架构
超凌3 小时前
threejs 创建了10w条THREE.Line,销毁数据,等待了10秒
前端