使用npm构建Node.js和React应用

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

将示例仓库 simple-node-js-react-npm-app fork到你的账户的Github仓库中。在此过程中，如果你需要帮助， 请参考 Fork A Repo 文档。

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

回到Jenkin，再次登录并点击 Welcome to Jenkins! 下的 create new jobs + Note: 如果没有看到上述内容，请点击左上角的 New Item 。

在 Enter an item name 域, 填写你的新的流水线项目的名称 (比如`simple-node-js-react-npm-app`)。

向下滚动并单击 Pipeline, 然后点击页面末尾的 OK。

( Optional )在下一页中,在 Description 字域为你的流水线项目做一个简短的描述(比如. An entry-level Pipeline demonstrating how to use Jenkins to build a simple Node.js and React application with npm.)

点击页面顶部的 Pipeline 选项，向下滚动到 Pipeline 部分.

在*Definition* 域，选择 Pipeline script from SCM 选项。此选项指示Jenkins从源代码管理（SCM）仓库获取你的流水线， 这里的仓库就是你clone到本地的Git仓库。

在 SCM 域中，选择 Git。

在 Repository URL 域中，填写你本地仓库的 目录路径， 这是从你主机上的用户账户home目录映射到Jenkins容器的 /home 目录：

点击 Save 保存你的流水线项目。你现在可以开始创建你的 Jenkinsfile，这些文件会被添加到你的本地仓库。

使用你最常用的文本编辑器或者IDE，在你本地的 simple-java-maven-app Git仓库的根目录创建并保存一个名为 Jenkinsfile 的文本文件。

复制以下声明式流水线代码并粘贴到 Jenkinsfile 文件中：

pipeline {
    agent {
        docker {
            image 'node:6-alpine' (1)
            args '-p 3000:3000' (2)
        }
    }
    stages {
        stage('Build') { (3)
            steps {
                sh 'npm install' (4)
            }
        }
    }
}

保存并提交你编辑的 Jenkinsfile 到你本地的 simple-node-js-react-npm-app Git 仓库。 比如.在 simple-node-js-react-npm-app 目录中,运行命令:
git add .
然后
git commit -m "Add initial Jenkinsfile"

再次回到Jenkins, 如果有必要的话再次登录，点击左边的 Open Blue Ocean 进入 Jenkins的Blue Ocean 界面.

在 This job has not been run 消息框, 点击 Run, 然后快速的点击在右下的 OPEN 链接，查看Jenkins构建你的流水线项目. 如果你点击不了 OPEN 链接, 点击Blue Ocean的主界面的一行来使用这一特性。+ Note: 你可能需要几分钟完成第一次的运行。 在clone你本地的 simple-node-js-react-npm-app Git 仓库后, Jenkins进行了以下动作:

点击右上角的 X 返回到Blue Ocean的主界面.

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

在`Jenkinsfile`的`agent`部分复制并粘贴下面的声明式语法:

    environment {
        CI = 'true'
    }

        stage('Test') {
            steps {
                sh './jenkins/scripts/test.sh'
            }
        }

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

保存并提交你编辑的 Jenkinsfile 到你本地的 simple-node-js-react-npm-app Git 仓库。比如在 simple-node-js-react-npm-app 仓库, 运行命令:
git stage .
然后
git commit -m "Add 'Test' stage"

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

点击左上方的 Run , 然后快速的点击出现在右下方的 OPEN 链接 观察 Jenkins 运行你改进之后的流水线项目。如果点击不了 OPEN 链接, 点击Blue Ocean 界面的_top_ 行使用这一特性。
Note: 你在这次运行中会注意到 Jenkins 不再需要下载 Node Docker 镜像。 而是, Jenkins 只需要从之前下载的Node镜像中运行一个新的容器 。 并且, 从现在开始, 在"Build"阶段不再需要下载 (新的) npm 依赖。 因此, 在接下来的时间运行流水线会更快些。
如果改进后的流水线运行成功, Blue Ocean 界面应该是这样的。另外要注意 "Test" 阶段。你可以点击之前的 "Build" 阶段来循环的 访问该阶段的输出。

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

回到文本编辑器/IDE，打开 Jenkinsfile 。

在 Jenkinsfile`的 `Test 阶段下方复制并粘贴以下的声明式流水线语法:

        stage('Deliver') {
            steps {
                sh './jenkins/scripts/deliver.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'
        }
    }
    environment { (1)
        CI = 'true'
    }
    stages {
        stage('Build') {
            steps {
                sh 'npm install'
            }
        }
        stage('Test') {
            steps {
                sh './jenkins/scripts/test.sh'
            }
        }
        stage('Deliver') { (2)
            steps {
                sh './jenkins/scripts/deliver.sh' (3)
                input message: 'Finished using the web site? (Click "Proceed" to continue)' (4)
                sh './jenkins/scripts/kill.sh' (5)
            }
        }
    }
}

保存并提交你编辑的 Jenkinsfile 到你的本地 simple-node-js-react-npm-app Git 仓库. 比如在 simple-node-js-react-npm-app 仓库, 运行命令:
git stage .
然后
git commit -m "Add 'Deliver' stage"

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

点击左上方的 Run t, 然后快速的点击出现在右下方的 OPEN ，查看 Jenkins 运行你改进后的流水线项目。 如果你点击不了 OPEN 链接, 点击Blue Ocean界面的 top 行 来使用.这一特性。
如果你成功运行了流水线, Blue Ocean 界面应该是这样的. 另外注意 "Deliver" 阶段。 点击之前的 "Test" 和 "Build" 阶段循环的访问这些阶段的输出。

观察 "Deliver" 阶段 (必要的时候点击它), 然后点击 绿色的 ./jenkins/scripts/deliver.sh 步骤扩展它的内容并向下滚动直到看见 http://localhost:3000 链接。

点击 http://localhost:3000 链接在一个新的浏览器选项卡查看你的 Node.js 和 React 应用的运行(在开发模式下) 。 你会 看到一个标题为 Welcome to React 的网页/站点。
Tip: 如果你觉得有些冒险, 你可以尝试访问你的Jenkins Docker 终端/命令提示符 , 然后使用 vi 编辑器, 调整并保存 App.js 源文件，查看出现在 the Welcome to React 页面上的结果。 为此, 运行下面的命令:

docker exec -it <docker-container-name> bash (1)
cd /var/jenkins_home/workspace/simple-node-js-react-npm-app/src (2)
vi App.js (3)

当你查看完页面/站点, 点击 Proceed 按钮以完成 流水线的执行。

点击右上方的 X 返回 Blue Ocean 的主界面, 它按时间顺序的反序的方式列出了流水线的历史运行记录。