在前一篇文章中介绍了在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 angulardemo
192.168.31.242:5000/angulardemo                 6                               2a62c78f86de        About an hour ago   145MB
192.168.31.242:5000/angulardemo                 7                               2a62c78f86de        About an hour ago   145MB
angulardemo                                     4                               2a62c78f86de        About an hour ago   145MB
angulardemo                                     5                               2a62c78f86de        About an hour ago   145MB
angulardemo                                     6                               2a62c78f86de        About an hour ago   145MB
angulardemo                                     7                               2a62c78f86de        About an hour ago   145MB
localhost:5000/angulardemo                      6                               2a62c78f86de        About an hour 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 settingenv.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 clish 'npm -g install @angular/cli'sh 'ng --version'}stage('Prepare Angular Project') { // prepare angular demo appsh 'if [ ! -d demo ]; then ng new demo --style less; fi'}stage('Build Angular Project') { // build angular demo appsh 'cd demo && npm install && npm run build'}stage('Build Angular demo image') { // build image and push to registrysh '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 imagedocker.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 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.2MBStep 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        About an hour ago   145MB
192.168.31.242:5000/angulardemo                 7                               2a62c78f86de        About an hour ago   145MB
192.168.31.242:5000/angulardemo                 9                               2a62c78f86de        About an hour ago   145MB
angulardemo                                     4                               2a62c78f86de        About an hour ago   145MB
angulardemo                                     5                               2a62c78f86de        About an hour ago   145MB
angulardemo                                     6                               2a62c78f86de        About an hour ago   145MB
angulardemo                                     7                               2a62c78f86de        About an hour ago   145MB
angulardemo                                     9                               2a62c78f86de        About an hour ago   145MB
localhost:5000/angulardemo                      6                               2a62c78f86de        About an hour ago   145MB
liumiaocn:~ liumiao$

构建结果
在blueocean上也能实时地确认到构建的输出信息
运行结果确认
使用如下命令也可以发现此服务已经运行在8888端口。

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

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

Jenkins基础：使用NPM构建前端应用6：部署前端镜像相关推荐

Jenkins基础：使用NPM构建前端应用1： nodejs插件的安装与设定
关于在Jenkins中使用npm的需要,有多种方法,如果可以接受直接在Jenkins上手动地配置与设定的方式,使用名为nodejs的插件则可以实现前端应用的集成. 插件介绍项目说明插件名称 no ...
Jenkins教程（3）使用npm构建Node.js和React应用
本教程将展示Jenkins如何使用 Node Package Manager (npm)去组合构建简单的 Node.js 和 React 应用 . 如果你是一个对CI/CD概念不了解的 Node.js ...
Jenkins基础：Jenkinsfile使用实例：12:使用docker.build构建镜像
在前面一篇文章中我们介绍了使用在Jenkinsfile中使用dockerfile来动态生成镜像,从而在指定的阶段进行使用.而对于将构建生成的二进制应用进行容器化,比如将spring boot应用的ja ...
【前端自动化构建】之自动化部署
项目说明笔记来源:拉勾教育大前端高薪训练营阅读建议:建议通过左侧导航栏进行阅读自动化部署基本介绍传统的部署方式更新本地构建发布更新本地构建发布 - 现代化的部署方式(CI / ...
【项目部署】使用Jenkins一键打包部署前端Vue应用
文章目录前言一.准备工作 1.安装nginx 1.1 下载nginx的docker镜像 1.2 从容器中拷贝nginx配置 1.3 使用docker命令启动 1.4 测试二.安装NodeJS插件 ...
Jenkins自动化部署前端Vue项目
Jenkins自动化部署前端Vue项目前言安装NodeJs 下载NodeJs 安装NodeJs npm配置 Jenkins配置NodeJs 安装NodeJs插件配置NodeJs 新建及配置任务 ...
前端开发入门：前端构建工具百度FIS
FIS是什么? FIS全称为Front-end Integrated Solution,即前端集成解决方案.前端团队发展大多会经历规范设计.技术选型.系统拆分.性能优化等阶段,其中的技术需求可以总结为 ...
前端项目自动化部署——超详细教程（Jenkins、Github Actions）
本教程主要讲解了怎么使用 Jenkins 和 Github Actions 部署前端项目. 第一部分是使用 Gitea 配置局域网 git 服务器,再使用 Jenkins 将 Gitea 下的项目部署 ...
前端教程——前端项目自动化部署（Jenkins、Github Actions）
本教程主要讲解了怎么使用 Jenkins 和 Github Actions 部署前端项目. 第一部分是使用 Gitea 配置局域网 git 服务器,再使用 Jenkins 将 Gitea 下的项目部署 ...

Jenkins基础：使用NPM构建前端应用6：部署前端镜像

基础知识

事前准备

Jenkinsfile

结果确认

Jenkins基础：使用NPM构建前端应用6：部署前端镜像相关推荐

最新文章

热门文章