Jenkins基础:使用NPM构建前端应用5:推送前端镜像至私库

在前一篇文章中介绍了在Jenkins中利用NodeJS插件实现创建、编译到镜像生成的Angular的应用的过程,这篇文章将进一步延伸,生成的镜像推送到镜像私库Registry中。

基础知识

如果对于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 angulardemo
angulardemo                                     4                               2a62c78f86de        16 minutes ago      145MB
liumiaocn:~ liumiao$
  • Registry 准备:
    本文使用docker registry作为镜像私库的管理,环境准备只需如下一行语句即可

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

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

liumiaocn:docker liumiao$ docker ps |grep registry
06601f2782c0        registry                     "/entrypoint.sh /etc…"   About a minute ago   Up About a minute   0.0.0.0:5000->5000/tcp                              cocky_murdock
liumiaocn: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()
    }
   }
}

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

结果确认

  • 执行日志确认
    执行日志如下所示:
Started by user root
Running in Durability level: MAX_SURVIVABILITY
[Pipeline] Start of Pipeline
[Pipeline] node
Running on Jenkins in /data/jenkins/workspace/angular-pipeline-job
[Pipeline] {
[Pipeline] stage
[Pipeline] { (Prepare Node and NPM)
[Pipeline] tool
[Pipeline] sh
+ npm --version
6.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.2MB

Step 1/2 : FROM nginx:latest
 ---> 5a9061639d0a
Step 2/2 : ADD demo/dist/* /usr/share/nginx/html
 ---> Using cache
 ---> 2a62c78f86de
Successfully built 2a62c78f86de
Successfully 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:6
The push refers to repository [192.168.31.242:5000/angulardemo]
6bcd7eb9d365: Preparing
cf2436e84ea8: Preparing
ed4a4820ee08: Preparing
b67d19e65ef6: Preparing
b67d19e65ef6: Mounted from my-nginx
cf2436e84ea8: Mounted from my-nginx
ed4a4820ee08: Mounted from my-nginx
6bcd7eb9d365: Pushed
6: digest: sha256:7fce52cd74ca42476dde1ee91f549d521982d5407b65190996e2e8a1dd60604c size: 1159
[Pipeline] }
[Pipeline] // withDockerRegistry
[Pipeline] }
[Pipeline] // withEnv
[Pipeline] }
[Pipeline] // stage
[Pipeline] }
[Pipeline] // node
[Pipeline] End of Pipeline
Finished: SUCCESS
  • 镜像构建结果确认
liumiaocn:~ liumiao$ docker images |grep angulardemo
192.168.31.242:5000/angulardemo                 6                               2a62c78f86de        38 minutes ago      145MB
angulardemo                                     4                               2a62c78f86de        38 minutes ago      145MB
angulardemo                                     5                               2a62c78f86de        38 minutes ago      145MB
angulardemo                                     6                               2a62c78f86de        38 minutes ago      145MB
liumiaocn:~ liumiao$
  • 构建结果
    在blueocean上也能实时地确认到构建的输出信息
    在这里插入图片描述

  • 本地私库镜像确认
    使用如下命令也可以发现此镜像已经在本地私库中得到了保存。

liumiaocn:~ liumiao$ docker pull localhost:5000/angulardemo:6
6: Pulling from angulardemo
Digest: sha256:7fce52cd74ca42476dde1ee91f549d521982d5407b65190996e2e8a1dd60604c
Status: Downloaded newer image for localhost:5000/angulardemo:6
liumiaocn:~ liumiao$ 
淼叔 CSDN认证博客专家 神经网络 TensorFlow NLP
资深架构师,PMP、OCP、CSM、HPE University讲师,EXIN DevOps Professional与DevOps Master认证讲师,曾担任HPE GD China DevOps & Agile Leader,帮助企业级客户提供DevOps咨询培训以及实施指导。熟悉通信和金融领域,有超过十年金融外汇行业的架构设计、开发、维护经验,在十几年的IT从业生涯中拥有了软件开发设计领域接近全生命周期的经验和知识积累,著有企业级DevOps技术与工具实战。
已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页