Jenkins基础:使用NPM构建前端应用6:部署前端镜像
发布日期:2021-06-30 20:13:35
浏览次数:3
分类:技术文章
本文共 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 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!
发表评论
最新留言
逛到本站,mark一下
[***.202.152.39]2024年04月18日 05时48分53秒
关于作者
喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!
推荐文章
Mysql 之主从复制
2019-04-30
LVS负载均衡------NAT模式
2019-04-30
squid代理-----透明代理模式
2019-04-30
squid代理介绍----ACL控制应用+sarg日志分析+反向代理
2019-04-30
redis集群之主从模式+哨兵模式
2019-04-30
JavaScript原生开关灯效果
2019-04-30
企业邮箱如何申请注册,邮箱申请如何免费注册?
2019-04-30
微信企业邮箱,手机邮箱格式地址怎么写?
2019-04-30
公司如何申请企业邮箱,公司邮箱怎么申请,公司企业邮箱哪个好?
2019-04-30
电子邮箱账号怎么申请,怎样申请邮箱账号呢
2019-04-30
邮箱怎么发邮件,邮件发信量多少,职场新人怎么发汇报邮件呢?
2019-04-30
maven 多层次pom 新引入包,编译成功,还是没有将包引入到本地
2019-04-30
leetCode2 两数相加
2019-04-30
【工具使用】使用pip与conda安装、更新与卸载Pytorch和torchvision
2019-04-30
【工具使用】Google免费云环境Colaboratory使用
2019-04-30
【深度学习笔记】卷积层,全连接层,池化层的相关输出参数计算
2019-04-30