Jenkins + Git + Nginx 一键部署前端静态站点

场景：使用 Jenkins 和 Github 在 CentOS 服务器上实现一键部署前端静态站点。

主要流程： Jenkins 从 Github 上拉取代码，执行一些操做，好比打包、跑单元测试等。而后再部署到 CentOS 服务器上。

预备知识

使用 CentOS 服务器（安装和配置 git nodejs nginx等）：juejin.im/post/5d1c17…

CentOS 经常使用命令：juejin.im/post/5d1c10…

使用Vi/Vim：juejin.im/post/5d1c12…

Nginx 配置：juejin.im/post/5d2450…

Jenkins 安装 配置

安装

1. 先要安装 Java 依赖包

yum install java

2. 安装下载工具 wget

yum install wget -y

3. 下载 jenkins 依赖

sudo wget -O /etc/yum.repos.d/jenkins.repo https://pkg.jenkins.io/redhat-stable/jenkins.repo

4. 导入秘钥

sudo rpm --import https://pkg.jenkins.io/redhat-stable/jenkins.io.key

5. 安装 Jenkins 

yum install jenkins

6. jenkins相关目录释义：

• /usr/lib/jenkins/：jenkins安装目录，war包会放在这里
  
• /etc/sysconfig/jenkins：jenkins配置文件，“端口”，“JENKINS_HOME”等均可以在这里配置。
  
• /var/lib/jenkins/：默认的JENKINS_HOME。
  
• /var/log/jenkins/jenkins.log：jenkins日志文件。

配置

1. 修改权限

为了避免因权限出现各类问题，这里直接修改用户为root。

vim /etc/sysconfig/jenkins

找到 JENKINS_USER 改成 "root"

2. 更改 jenkins 主要目录全部权

chown -R root:root /var/lib/jenkins

chown -R root:root /var/cache/jenkins

chown -R root:root /var/log/jenkins

3. 启动 jenkins

jenkins 启动、重启、中止命令：
service jenkins start 开始
service jenkins restart 重启
service jenkins stop 中止
service jenkins status 查看状态

service jenkins restart

启动成功，浏览器输入你的服务器 ip 地址加 jenkins 默认端口号 8080 ，就能够看到 jenkins 解锁页面了。

4. 初始化 jenkins

看上面的截图，要输入管理员密码，红色代码块路径就是密码文件。

命令行输入：

vim /var/lib/jenkins/secrets/initialAdminPassword

复制密码到输入框，执行下一步。

选择安装推荐的插件，等待安装

建立管理员用户

很少说，输入好信息，点继续。

下一步默认就行了。

初始化成功，若是遇到安装插件失败等问题，重试一下。

使用

1. 配置 nodejs 插件

安装 nodejs 插件

选择 Manage Jenkins -> Manage Plugins

以下：

等待安装完成。

配置NodeJS：

选择 Manage Jenkins -> Global Tool Configuration，拉到下面找到NodeJS配置，而后 Save。

2. 配置 SSH 插件

安装SSH插件：选择 Manage Jenkins -> Manage Plugins 

配置 SSH：选择 Manage Jenkins -> Configure System 找到 Publish over SSH，以下

4. 建立任务

a. 点击 New Item，选择自由风格任务

b. 输入项目描述

c. 配置项目github相关

建立 github 证书

d. 选择要使用的 nodejs

e. 最后一步是构建配置

到此，任务建立完成了。在点构建以前，还有个大坑要填。

jenkins 默认在 build 结束后会 kill 掉全部的衍生进程！须要禁止 jenkins 杀死衍生进程。

命令行输入：

vim /etc/sysconfig/jenkins

找到 JENKINS_JAVA_OPTIONS 加上 -Dhudson.util.ProcessTree.disable=true

若是你部署的不是前端静态站点，而是要启一个 nodejs 接口服务，流程和上面同样，构建配置须要修改为经过 pm2 启动 nodejs 服务。关于 nodejs 服务这块的 nginx 配置，参考： juejin.im/post/5d2450… 的后台接口配置部分

  nodejs 服务的构建配置，以下：

5. 执行任务

回到首页，选择任务

点击 Build Now，开始一键构建发布。

每次构建都有日志，能够知道具体的构建流程。

下面的能够不用看了，是另一种建立任务方式。

分割线~~~~~~~~~~~~~~~~~~~

建立流水线任务

流程代码以下：

pipeline {
    agent any

    stages {

        stage('Checkout repository') {
            steps {
                git branch: 'master', credentialsId: '5b1799f5-79d9-44cd-a635-212cf61e2860', url: 'git@github.com:liuwei9413/vuecli3-test.git'
            }
        }

        stage('Install Deps and build project') {
            steps {
                sh 'rm -rf node_modules/'
                sh 'npm install'
                sh 'npm run build'
            }
        }

        stage('Run Unit Tests') {
            steps {
                sh 'npm test'
            }
        }

        stage('Deploy project') {
            steps {
                echo "Deploy project"
                sh "cp -rp dist/* /data/www/test/web1"
            }
        }

        stage('Check Service') {
            steps {
                sh 'service nginx restart'
                echo "success"
            }
        }

    }
}复制代码

写好流程执行代码，点Save。