Jenkins前端项目自动化部署配置（git拉代码、npm装依赖打包、上传部署服务器一条龙）

 安装 Jenkins

直接搜 Jenkins 进去官网下载安装就行，我是在windows上安装。

Linux上安装以及安装具体步骤有很多相关文章，不再赘述。

Jenkins 的安装和设置

配置 Jenkins

修改插件安装源

方法一：修改文件

工作路径/hudson.model.UpdateCenter.xml

工作路径可在首页→ Manage Jenkins → System查看

国内镜像源：mirrors.tuna.tsinghua.edu.cn/jenkins/upd…

<?xml version='1.1' encoding='UTF-8'?>
<sites>
  <site>
    <id>default</id>
    <url>https://mirrors.tuna.tsinghua.edu.cn/jenkins/updates/update-center.json</url>
  </site>
</sites>

方法二：在Jenkins界面中改

首页→ Manage Jenkins → Plugins → Advanced settings

修改 Jenkins 端口（可选操作）

修改文件：软件安装根目录/jenkins.xml

默认 --httpPort=8080，如果和机器上的其他服务冲突了可以修改一下。

<arguments>-Xrs -Xmx256m -Dhudson.lifecycle=hudson.lifecycle.WindowsServiceLifecycle -jar "%BASE%\jenkins.war" --httpPort=8080</arguments> 

配置自动化部署

1. 新建项目

步骤：Jenkins 首页 → 新建 → 命名 → 确定

2. 配置Gitee拉代码

步骤：Jenkins 首页 → 点项目名进入项目 → 配置 → 源码管理 → 勾选Git → 填写 Repositories

Repository URL：Git地址

Credentials：选择凭证，没有就添加，可以选择账号密码或SSH等

3. 构建

上一步所处位置 → Build Steps（构建步骤）→ Execute Windows batch command （执行 Windows 批处理命令）

npm install && npm run build

4. 构建后操作，部署到服务器

这里以SSH为例

4.1 前置操作

1. 安装 Publish Over SSH 插件

首页 → Manage Jenkins → Plugins

2. 新增SSH server 配置

首页 → Manage Jenkins → System

Remote Directory：是远程目录，就是部署的路径例如 var/www/html/website

4.2构建后操作

回到第三步【3.构建】所在位置，选 Send build artifacts over SSH

• Name：选择新增的SSH server
• 高级：配置 Credentials 凭证

• Source files 源文件：

   例如：dist/**，上传dist目录下的所有文件和子目录，dist就是构建好的目录名字

• Remove prefix 移除前缀：dist
• Remote directory 目标目录：

         会和 SSH server 的 Remote Directory拼在一起

        例如：SSH server 的 Remote Directory 是 /var/www/html/website，这里的 Remote directory 是 home，就会把 dist 下的所有文件上传到 /var/www/html/website/home 目录

• Exec command 执行命令：可选，例如重启nginx：systemctl reload nginx

​

5. 愉快的使用 

​

查看构建输出日志，出错的时候和配置过程可以查看，排查问题

点击构建记录

常用 Jenkins 操作

操作	说明	指令/示例
重启	浏览器中JenkinsURL + /restart	http://xxxxxxx:xxx/restart
重启服务	在 PowerShell 中	Restart-Service jenkins
停止服务	在 cmd 中	net stop jenkins
启动服务	在 cmd 中	net start jenkins

​