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

相关推荐
天空属于哈夫克33 天前
企业微信二次开发:精准实现关键词自动回复
架构·企业微信
子兮曰3 天前
jev-ultrafast 深度解析:7 秒订机票的浏览器 Agent 是如何炼成的
前端·后端·agent
子兮曰3 天前
Jev 爆发一周:7 秒 Agent 背后的 System One 生态与三场争议
前端·后端·ai编程
前端小万3 天前
写公众号赚了 3000 块后,我做了一款叫 "一键成稿" 的软件
前端·微信小程序
爱勇宝3 天前
ZCode 开源 24 小时:一份没有历史的账本,回答不了"有没有偷代码"
前端·后端·chatglm (智谱)
三十而立洋3 天前
Cookie 详解:从产生到安全,一次讲透
前端·javascript
晨米酱3 天前
AGENTS.md:Agent 的上下文策略层
面试·架构·agent
这个DBA有点耶3 天前
MVCC深入:Read View、版本链与快照读——InnoDB并发控制的内核
数据库·mysql·架构
卡布鲁3 天前
把一个 Vite + Vue3 应用塞进 qiankun (React + Umi3) 主站:十个坑的复盘
前端·javascript·react.js
李少兄3 天前
JavaScript 隐式全局变量解析
javascript