Jenkins + Github + Nginx 实现前端自动化最全指南，轻松构建高效 CI/CD 流程！

前端

2023-10-20 11:23:11

前言

前端自动化算是一个老生常谈的问题？那么什么是自动化呢？通俗来说，自动化是想让开发者可以专注于开发，剩下的构建与部署可以形成一套流程和规范，不需要我们去关心这些问题。

从图上我们可以看到，这是一个比较完整的流程，从提交代码到最后发布上线，详细的步骤还是比较多的，如果我们不进行自动化，需要花费大量的时间去完成这些事情。

当然，也有很多同学可能会觉得用不着这么麻烦，直接手动部署就好了。但是，随着项目的越来越复杂，手动部署就会变得越来越困难，而且容易出错。

因此，前端自动化是很有必要的，它可以帮助我们：

提高开发效率
减少错误
确保代码质量
方便团队协作
实现持续集成和持续交付

准备工作

在开始之前，我们需要先准备一些东西：

一个 Jenkins 实例
一个 Github 仓库
一个 Nginx 服务器
一个前端项目

配置 Jenkins

安装 Jenkins

Jenkins 是一个持续集成工具，它可以帮助我们自动构建和测试代码。

创建一个新作业

在 Jenkins 中，创建一个新的作业，并选择“构建一个自由风格的软件项目”作为项目类型。

配置作业

在作业配置页面中，我们需要设置一些参数：

项目名称： 这个名称可以随意取，但要确保它能反映项目的名称。
源代码管理： 选择“Git”。
Git 仓库 URL： 输入 Github 仓库的 URL。
凭据： 如果需要，可以在这里添加凭据，以便 Jenkins 可以访问 Github 仓库。
构建触发器： 选择“Github”。
Github 项目： 选择 Github 仓库。
分支规范： 输入要构建的分支名称。
构建步骤： 在这里，我们需要添加构建步骤。对于前端项目，我们通常需要以下步骤：
- 安装依赖项：使用 npm install 命令安装项目所需的依赖项。
- 构建项目：使用 npm run build 命令构建项目。
- 测试项目：使用 npm test 命令测试项目。
构建后操作： 在这里，我们可以添加构建后操作。对于前端项目，我们通常需要以下操作：
- 部署项目：使用 scp 命令将构建后的项目部署到 Nginx 服务器。

保存作业

在配置完成后，点击“保存”按钮保存作业。

配置 Github

创建一个新仓库

在 Github 中，创建一个新的仓库。

添加 Jenkinsfile

在仓库中添加一个名为“Jenkinsfile”的文件，并输入以下内容：

pipeline {
    agent any

    stages {
        stage('Build') {
            steps {
                checkout scm
                sh 'npm install'
                sh 'npm run build'
            }
        }

        stage('Test') {
            steps {
                sh 'npm test'
            }
        }

        stage('Deploy') {
            steps {
                sh 'scp -r build/* user@server:/var/www/html'
            }
        }
    }
}