转载

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"

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

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

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

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

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

4. 初始化 jenkins

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

命令行输入：

vim /var/lib/jenkins/secrets/initialAdminPassword

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

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

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

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

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

创建管理员用户

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

不多说，输入好信息，点继续。

下一步默认就好了。

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

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

使用

1. 配置 nodejs 插件

安装 nodejs 插件

选择 Manage Jenkins -> Manage Plugins

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

如下：

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

等待安装完成。

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

配置NodeJS：

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

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

2. 配置 SSH 插件

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

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

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

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

4. 创建任务

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

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

b. 输入项目描述

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

c. 配置项目github相关

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

创建 github 证书

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

d. 选择要使用的 nodejs

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

e. 最后一步是构建配置

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

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

jenkins 默认在 build 结束后会 kill 掉所有的衍生进程！需要禁止 jenkins 杀死衍生进程。

命令行输入：

vim /etc/sysconfig/jenkins

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

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

5. 执行任务

回到首页，选择任务

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

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

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

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

下面的可以不用看了，是另外一种创建任务方式。

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

创建流水线任务

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

流程代码如下：

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。

原文 https://juejin.im/post/5d22ea4ff265da1b695d82f2

正文到此结束