本文共 6217 字，大约阅读时间需要 20 分钟。

在前一篇文章中介绍了在Jenkins中利用NodeJS插件实现创建、编译、镜像生成以及私库推送的Angular的应用的过程，这篇文章将进一步延伸，将生成的镜像直接运行起来。

基础知识

如果对于NodeJS的插件使用或者在Jenkins的Jenkinsfile中使用npm的基本方法不熟悉的开发者可以先行查看如下文章。

• 在Jenkins中安装和设定NodeJS插件：https://liumiaocn.blog.csdn.net/article/details/102618269
• 如何在Jenkinsfile中使用NodeJS：
• https://liumiaocn.blog.csdn.net/article/details/102598127

而关于Alpine镜像中使用NodeJS则有诸多问题，常见的对应方法可以参看：

• https://liumiaocn.blog.csdn.net/article/details/102587460

事前准备

安装NodeJS的10.15.3版，然后创建一个名为angular-pipeline-job的Pipeline类型的Job。

• 确认镜像状况

liumiaocn:~ liumiao$ docker images |grep angulardemo192.168.31.242:5000/angulardemo                 6                               2a62c78f86de        About an hour ago   145MB192.168.31.242:5000/angulardemo                 7                               2a62c78f86de        About an hour ago   145MBangulardemo                                     4                               2a62c78f86de        About an hour ago   145MBangulardemo                                     5                               2a62c78f86de        About an hour ago   145MBangulardemo                                     6                               2a62c78f86de        About an hour ago   145MBangulardemo                                     7                               2a62c78f86de        About an hour ago   145MBlocalhost:5000/angulardemo                      6                               2a62c78f86de        About an hour ago   145MBliumiaocn:~ liumiao$

• Registry 准备：
  本文使用docker registry作为镜像私库的管理，环境准备只需如下一行语句即可

执行命令：docker run -d -p 5000:5000 registry

使用docker ps确认私库管理的容器已经启动

liumiaocn:docker liumiao$ docker ps |grep registry06601f2782c0        registry                     "/entrypoint.sh /etc…"   About a minute ago   Up About a minute   0.0.0.0:5000->5000/tcp                              cocky_murdockliumiaocn:docker liumiao$

Jenkinsfile

node {
      stage('Prepare Node and NPM') {
    // confirm nodejs plugin and setting    env.NODEJS_HOME = "${tool 'nodejs-10.15.3'}"	env.PATH="${env.NODEJS_HOME}/bin:${env.PATH}"	sh 'npm --version'   }   stage('Prepare Angular CLI') {
    // install global angular cli    sh 'npm -g install @angular/cli'    sh 'ng --version'   }   stage('Prepare Angular Project') {
    // prepare angular demo app    sh 'if [ ! -d demo ]; then ng new demo --style less; fi'   }   stage('Build Angular Project') {
    // build angular demo app    sh 'cd demo && npm install && npm run build'   }   stage('Build Angular demo image') {
    // build image and push to registry    sh 'cp /tmp/Dockerfile .'    docker.withRegistry('http://192.168.31.242:5000') {
         def angular_img = docker.build("angulardemo:${env.BUILD_ID}")      angular_img.push()    }   }   stage('Deploy Angular image') {
    // docker run angular image    docker.image("angulardemo:${env.BUILD_ID}").run('-p 8888:80')  }}

代码说明：

angular是通过cli来创建应用程序脚手架的，在Prepare Angular Project的stage中通过使用ng new demo创建了demo的angular应用。而在后续的stage中则通过npm install安装相关的依赖，通过npm run build则生成了结果的dist目录与文件，然后通过docker.withRegistry设定私库地址，通过docker.build构建，通过push方法进行推送，然后使用image的run方法运行容器。

结果确认

• 执行日志确认
  执行日志如下所示：

Started by user rootRunning in Durability level: MAX_SURVIVABILITY[Pipeline] Start of Pipeline[Pipeline] nodeRunning on Jenkins in /data/jenkins/workspace/angular-pipeline-job[Pipeline] {[Pipeline] stage[Pipeline] { (Prepare Node and NPM)[Pipeline] tool[Pipeline] sh+ npm --version6.4.1[Pipeline] }[Pipeline] // stage[Pipeline] stage[Pipeline] { (Prepare Angular CLI)[Pipeline] sh+ npm -g install @angular/cli...省略[Pipeline] // stage[Pipeline] stage (hide)[Pipeline] { (Build Angular demo image)[Pipeline] sh+ cp /tmp/Dockerfile .[Pipeline] withEnv[Pipeline] {[Pipeline] withDockerRegistry[Pipeline] {[Pipeline] sh+ docker build -t angulardemo:6 .Sending build context to Docker daemon  309.2MBStep 1/2 : FROM nginx:latest ---> 5a9061639d0aStep 2/2 : ADD demo/dist/* /usr/share/nginx/html ---> Using cache ---> 2a62c78f86deSuccessfully built 2a62c78f86deSuccessfully tagged angulardemo:6[Pipeline] dockerFingerprintFrom[Pipeline] sh+ docker tag angulardemo:6 192.168.31.242:5000/angulardemo:6[Pipeline] sh+ docker push 192.168.31.242:5000/angulardemo:6The push refers to repository [192.168.31.242:5000/angulardemo]6bcd7eb9d365: Preparingcf2436e84ea8: Preparinged4a4820ee08: Preparingb67d19e65ef6: Preparingb67d19e65ef6: Mounted from my-nginxcf2436e84ea8: Mounted from my-nginxed4a4820ee08: Mounted from my-nginx6bcd7eb9d365: Pushed6: digest: sha256:7fce52cd74ca42476dde1ee91f549d521982d5407b65190996e2e8a1dd60604c size: 1159[Pipeline] }[Pipeline] // withDockerRegistry[Pipeline] }[Pipeline] // withEnv[Pipeline] }[Pipeline] // stage[Pipeline] }[Pipeline] // node[Pipeline] End of PipelineFinished: SUCCESS

• 镜像构建结果确认

liumiaocn:~ liumiao$ docker images |grep angulardemo192.168.31.242:5000/angulardemo                 6                               2a62c78f86de        About an hour ago   145MB192.168.31.242:5000/angulardemo                 7                               2a62c78f86de        About an hour ago   145MB192.168.31.242:5000/angulardemo                 9                               2a62c78f86de        About an hour ago   145MBangulardemo                                     4                               2a62c78f86de        About an hour ago   145MBangulardemo                                     5                               2a62c78f86de        About an hour ago   145MBangulardemo                                     6                               2a62c78f86de        About an hour ago   145MBangulardemo                                     7                               2a62c78f86de        About an hour ago   145MBangulardemo                                     9                               2a62c78f86de        About an hour ago   145MBlocalhost:5000/angulardemo                      6                               2a62c78f86de        About an hour ago   145MBliumiaocn:~ liumiao$

• 构建结果

  在blueocean上也能实时地确认到构建的输出信息
  

• 运行结果确认

  使用如下命令也可以发现此服务已经运行在8888端口。

liumiaocn:~ liumiao$ docker ps |grep 8888f7654fc19157        angulardemo:9               "nginx -g 'daemon of…"   17 minutes ago      Up 17 minutes       0.0.0.0:8888->80/tcp                                blissful_davinciliumiaocn:~ liumiao$

使用浏览器也能直接确认结果了

转载地址：https://liumiaocn.blog.csdn.net/article/details/102646096 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！