Jenkins前端自动化部署：告别繁琐，拥抱高效

前端

2024-02-06 04:42:25

正文

大家好，我是**[您的名字]** ，一名技术博客创作专家。今天，我想和大家分享一下如何使用Jenkins搭建一套前端自动化部署流水线。

为什么要写这篇文章呢？首先要从一只蝙蝠🦇说起了...以前我们上线一个项目的方式是本地开发完成，将编译打包的编译产物使用FTP或者其他方式部署在服务器上，这种方式是既繁琐又低效的。

后来，随着持续集成（CI）和持续交付（CD）理念的兴起，前端自动化部署的概念也逐渐流行起来。前端自动化部署可以帮助我们实现从代码提交到云端部署的全自动化，从而大幅提高我们的开发效率。

而Jenkins，作为一个著名的持续集成工具，无疑是搭建前端自动化部署流水线的最佳选择之一。Jenkins是一款开源的自动化服务器，可以帮助我们实现各种各样的自动化任务，包括构建、测试和部署。

好了，废话不多说，我们直接开始吧！

准备工作

在开始搭建流水线之前，我们需要做一些准备工作。

安装Jenkins。如果您还没有安装Jenkins，请前往Jenkins官网下载并安装。
安装Node.js。如果您还没有安装Node.js，请前往Node.js官网下载并安装。
安装npm。npm是Node.js的包管理工具，我们将在流水线中使用它来安装所需的工具和库。如果您还没有安装npm，请打开终端并运行以下命令：

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh | bash

安装Jenkins的Node.js插件。Jenkins的Node.js插件可以帮助我们在流水线中使用Node.js。打开终端并运行以下命令：

sudo npm install -g jenkins-cli

创建Jenkins作业。登录Jenkins，点击左上角的“新建作业”，然后选择“流水线”。

配置流水线

现在，我们开始配置流水线。

在“流水线”选项卡中，输入流水线的名称，然后点击“确定”。
在“流水线”编辑器中，粘贴以下代码：

pipeline {
  agent any

  stages {
    stage('Checkout Code') {
      steps {
        git branch: 'master', url: 'https://github.com/YOUR_GITHUB_USERNAME/YOUR_REPOSITORY_NAME.git'
      }
    }
    stage('Install Dependencies') {
      steps {
        sh 'npm install'
      }
    }
    stage('Build and Test') {
      steps {
        sh 'npm run build'
        sh 'npm test'
      }
    }
    stage('Deploy to Staging') {
      steps {
        sh 'scp -r build/* username@staging_server_ip:/var/www/html/your_project'
      }
    }
    stage('Deploy to Production') {
      steps {
        sh 'scp -r build/* username@production_server_ip:/var/www/html/your_project'
      }
    }
  }
}