构建多分支流水线项目

请确保你登陆了你的GitHub账户。如果你还没有Github账户，你可以在 GitHub网站 免费注册一个账户。

将示例仓库 building-a-multibranch-pipeline-project fork到你的账户的Github仓库中。在此过程中，如果你需要帮助， 请参考 Fork A Repo 文档。

将你的GitHub账户中的 simple-java-maven-app 仓库clone到你的本地机器。 根据你的情况完成以下步骤之一(其中 <your-username> 是你的操作系统用户账户名称)：

运行以下命令来创建以上分支（从 master 分支的内容复制）：

检查这些分支被成功创建，运行命令 git branch，结果为：

  development
* master
  production

如果符号*（标识当前分支）未处于 master 的位置，运行命令 git checkout master 以确保 master 是当前分支。

回到Jenkins并进入 Blue Ocean 界面。 要做到这点, 确保:

在Blue Ocean界面中心的 Welcome to Jenkins 框, 点击 Create a new Pipeline 开始流水线构建向导。
Note: 如果你没有看到这个框, 点击右上方的 New Pipeline。

在 Where do you store your code?,点击 Git (not GitHub).

在*Repository URL* 域 (在 *Connect to a Git repository*里), 指定你aboveclone到本地的仓库的目录路径, 他来自你主机上的 用户账号/主目录 , 映射到Jenkins容器的 /home d目录 - 即

点击k Save 保存你新建的流水线项目。
Blue Ocean 在每个分支中检测 Jenkinsfile "流水线存根" 的存在并运行每条流水线以对抗其各自的分支, 它的构建结果显示在Blue Ocean主界面的 Activity 页面上。+

使用你最称手的文本编辑器或 IDE, 在本地 building-a-multibranch-pipeline-project Git 仓库的根目录下打开现有的 Jenkinsfile 并 clear 它的内容。
Note: 确保在你的仓库的`master` 分支上执行了该步骤。

复制并粘贴下面的声明式流水线代码到空的 `Jenkinsfile`文件中:

pipeline {
    agent {
        docker {
            image 'node:6-alpine'
            args '-p 3000:3000 -p 5000:5000' (1)
        }
    }
    environment {
        CI = 'true'
    }
    stages {
        stage('Build') {
            steps {
                sh 'npm install'
            }
        }
        stage('Test') {
            steps {
                sh './jenkins/scripts/test.sh'
            }
        }
    }
}

保存并提交你编辑的 Jenkinsfile 文件到本地的 building-a-multibranch-pipeline-project Git 仓库。 比如在 building-a-multibranch-pipeline-project 目录下, 运行下面的命令:
git stage .
然后
git commit -m "Add initial Jenkinsfile with 'Test' stage"

再次回到Jenkins, 必要的话再次登录并进入 Jenkins的Blue Ocean的界面。

点击右上方的 Branches 进入你的流水线项目的分支列表。

点击你的流水线项目的 master 分支的运行图标 , 然后快速的点击出现在右下方的 OPEN 链接来查看Jenkins 使用改进后的 Jenkinsfile`构建 `master 分支。 如果你点击不了OPEN 链接, 点击Blue Ocean Activity 页面 的_top_ 行来使用这一特性。
在几分钟内, 如果Jenkins成功的从你的 `master`分支构建了 Node.js 和 React 应用程序，Blue Ocean界面就会变成绿色。

点击右上方的 X 回到Blue Ocean 界面的 Activity 页面。

回到你的文本编辑器/IDE，打开`Jenkinsfile` 文件。

立刻复制并粘贴下面的声明式流水线语法到`Jenkinsfile`文件的 Test 阶段下面:

        stage('Deliver for development') {
            when {
                branch 'development'
            }
            steps {
                sh './jenkins/scripts/deliver-for-development.sh'
                input message: 'Finished using the web site? (Click "Proceed" to continue)'
                sh './jenkins/scripts/kill.sh'
            }
        }
        stage('Deploy for production') {
            when {
                branch 'production'
            }
            steps {
                sh './jenkins/scripts/deploy-for-production.sh'
                input message: 'Finished using the web site? (Click "Proceed" to continue)'
                sh './jenkins/scripts/kill.sh'
            }
        }

pipeline {
    agent {
        docker {
            image 'node:6-alpine'
            args '-p 3000:3000 -p 5000:5000'
        }
    }
    environment {
        CI = 'true'
    }
    stages {
        stage('Build') {
            steps {
                sh 'npm install'
            }
        }
        stage('Test') {
            steps {
                sh './jenkins/scripts/test.sh'
            }
        }
        stage('Deliver for development') {
            when {
                branch 'development' (1)
            }
            steps {
                sh './jenkins/scripts/deliver-for-development.sh'
                input message: 'Finished using the web site? (Click "Proceed" to continue)'
                sh './jenkins/scripts/kill.sh'
            }
        }
        stage('Deploy for production') {
            when {
                branch 'production'  (1)
            }
            steps {
                sh './jenkins/scripts/deploy-for-production.sh'
                input message: 'Finished using the web site? (Click "Proceed" to continue)'
                sh './jenkins/scripts/kill.sh'
            }
        }
    }
}

保存并提交你编辑的 Jenkinsfile 到本地的 building-a-multibranch-pipeline-project Git 仓库。 比如在 building-a-multibranch-pipeline-project 目录, 运行命令:
git stage .
然后
git commit -m "Add 'Deliver...' and 'Deploy...' stages"

再次回到Jenkins, 如果必要重新登录并进入Jenkins的Blue Ocean界面。

点击右上方的 Branches 来访问你的流水线项目的分支列表。

点击你的流水线项目的`master`分支的运行图标 ,然后快速的点击出现在右下方的 OPEN 链接查看Jenkins使用改进过的 Jenkinsfile`构建 `master 分支。I如果你点击不了 OPEN 链接, 点击Blue Ocean Activity 页面的 top 行来访问这一特性。
注意Jenkins是如何跳过你添加的最后两个阶段, 由于你正在运行构建的分支 (master) 在这些阶段不满足 when 指令的 branch 条件。

C点击右上方的 X 回到Blue Ocean界面的 Activity 页面。

运行下面的命令来来pull从`master` 到 `development`的改变:

还可以运行线面的命令将更改从 master pull到 production:

再次回到 Jenkins, 需要的话再次登录并进入 Jenkins的Blue Ocean界面。

点击右上的 Branches 进入流水线项目的分支列表。

点击流水线项目`development` 分支的运行图标 , 然后快速的点击出现在右下方的 OPEN 链接来查看Jenkins 使用改进后的 Jenkinsfile`构建 `development 分支。 如果你点击不了 OPEN 链接, 点击Blue Ocean的 Activity 页面上的 top 行来访问这一特性。

在几分钟，当构建停止时, 确保你正在查看 Deliver for development 阶段 (如果需要点击它), 然后点击顶部绿色的*Shell Script* 步骤来扩展它的内容 并向下滚动直到你看见 http://localhost:3000 链接。

点击 http://localhost:3000 链接查看Node.js 和 React 应用在开发模式下在一个新的web浏览器选项卡中运行 (使用 npm start 命令) 。 你应该会看到一个标题为 *Welcome to React*的页面/站点。

当你查看完页面/站点, 在Blue Ocean点击 Proceed 按钮完成流水线的执行。
如果Jenkins成功在`development` 分支上构建Node.js 和 React 应用程序，Blue Ocean界面就会变成绿色。注意 Deliver for development 阶段是如何被执行的 ，而*Deploy for production* 阶段却没有执行。

点击右上方的 X 回到Blue Ocean界面的*Activity* 页面。

点击右上方的 Branches 来访问你的流水线项目的分支列表。

点击你的流水线项目的`production`分支的运行图标 , 然后快速的点击出现在右下方的 OPEN 链接查看Jenkins使用改进后的 Jenkinsfile`构建`production 分支。如果 你不能点击 OPEN 链接, 点击Blue Ocean Activity 页面的 top 行来访问这一特性。

在几分钟内，当构建停止时， 确保你正在查看 Deploy for production 阶段 (如果必要点击它), 然后点击顶部绿色的*Shell Script* 步骤来扩展它的内容并向下滚动直到你看到`http://localhost:5000` 链接。

点击 http://localhost:5000 链接在一个新的web浏览器选项卡中查看你的Node.js 和 React应用。他将会在生产模式下从你的源代码的生产构建开始运行(使用 npm run build 命令生产)。 同样的, 你会看到一个标题为*Welcome to React*的页面/站点 然而, 这一次, 该应用程序的内容是由 npm serve module提供的，并且很可能会继续在你浏览器的后台运行。

当你查看完网页/站点, 在Blue Ocean中点击 Proceed 按钮 完成流水线的执行。
如果Jenkins 从`production`分支成功 `production`构建你的Node.js 和 React 应用，Blue Ocean界面就会变成绿色。 注意 Deploy for production 阶段是如何被执行的，而 Deliver for development 阶段被跳过。

点击右上方的 X 回到Blue Ocean界面的 Activity p页面。+ Note: 由于你的浏览器很可能会继续运行npm serve 模块提供的应用内容, 在Jenkins关闭`serve` 进程后，你的浏览器仍然会长时间显示你在`http://localhost:5000`查看过的内容 。 在below阅读更多关于如何从你的浏览器清除应用程序和它的内容。

在你本地仓库的 building-a-multibranch-pipeline-project 目录下, 运行命令 git checkout development 更改 development 分支。

回到你的文本编辑器/IDE，打开你本地的`building-a-multibranch-pipeline-project` Git仓库的 src`目录下的 `App.js 文件。

立刻复制并粘贴下面的HTML语法到`App.js`文件的`To get started…​` 行下面:

          <br/>
          This is a new line I added.

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
          <br/>
          This is a new line I added.
        </p>
      </div>
    );
  }
}

export default App;

保存并提交你编辑的 App.js 文件到你本地的 building-a-multibranch-pipeline-project Git仓库。 比如在 building-a-multibranch-pipeline-project 目录下, 运行命令:
git stage .
然后
git commit -m "Update 'App.js'"

回到Blue Ocean, 在 development 分支运行你的流水线 (如 above所述) 并通过 `http://localhost:3000`检查结果以查看新添加的行。

假设你对该更改感到满意, 在你本地仓库的 building-a-multibranch-pipeline-project 目录下, 运行下面一系列的命令 pull 你的更改到 production 分支 (via the master 分支):

回到 Blue Ocean, 这次在 production`分支运行你的流水线 (和你在 <<run-your-pipeline-on-the-production-branch,above>>中做的一样) 并通过 `http://localhost:5000 检查结果，以查看你新添加的行 。
Notes: