一、前言
1、本文主要内容
将在项目中实际使用到的相关东西整理记录一波,同时可以方便其他同学在使用到的时候参考一下(自己也备忘),有不对的地方,欢迎指出~~
- 记录下如何使用Jenkins自动打包、部署Vue前端应用(对于所有前后端分离的前端静态项目都通用)
- 前端代码如何打成Docker镜像
3、本篇环境信息
-
服务器
操作系统 硬件配置 IP 说明 CentOS 7 4C16G 10.133.28.54 部署Jenkins -
Jenkins版本
Jenkins安装包有两种,一种是LTS,一种是Weekly。LTS是稳定版,Weekly每周会更新一次,一般使用LTS就行了,最新版的LTS:2.235.2
-
Docker
Docker Engine - Community : 19.03.8
-
Spring Boot应用
使用的是版本2.2.5.RELEASE,当然只要是一个Spring Boot应用都可以
-
GitLab
本文演示使用的是社区版12.7.6 也可以使用GitHub 、Gitee或者SVN都可以
二、准备工作
1、Docker 环境安装
在Linux服务器上安装Docker环境,具体可以参考:
2、Jenkins 环境安装
在Linux服务器上安装Jenkins,具体可以参考:
3、GitLab 环境安装
在Linux服务器上安装GitLab,具体可以参考:
三、打包及部署
本文使用的前端是项目是Vue项目,是部署到Nginx进行访问的
Vue项目的打包需要使用Node环境,Jenkins也是可以在插件中心安装NodeJs的插件的,非常简单方便,不了解的同学可以参考这篇文章:
安装完成之后,可以到Global Tool Configuration
配置NodeJs的版本,也非常简单,不在说明。
-
新建一个自由风格的任务
-
配置源码管理
我这边使用的是GitLab,当然你们使用Github、Gitee都是可以的,指定前台的代码路径。
增加一个访问GitLab的用户名密码
-
配置构建环境
在构建环境,我们需要选择使用NodeJs的相关信息,具体如下:
-
配置构建打包前台代码,点击
增加构建步骤
–>执行shell
,具体配置项参考下图: -
将打好包的静态资源文件传到Nginx服务器。点击
增加构建步骤
–>Execte shell script on remote host using ssh
选项,这个是到远程服务器执行脚本,还有另外一种方式,在一键打包Spring Boot应用那片文章里,有兴趣的可以翻翻看看,具体如下图: -
点击保存,这样就可以了,点击立即构建,就可以实现一键打包部署了
四、前端代码打Docker镜像
现在大部分的项目都采用的前后端分离的开发方式,那么前端代码也就独立出来了,我们也可以将前端的静态资源文件打包成镜像,这样在扩展或者部署的时候,也都会非常方便
-
准备Dockerfile
那么前端代码的Dockerfile一般情况应怎么来写呢?
# 基础镜像 FROM docker.io/stanleyws/nginx:openresty # nginx的配置文件 ADD nginx.conf /usr/local/openresty/nginx/conf/nginx.conf # 前台的静态资源文件 ADD dist/ /usr/local/openresty/nginx/html/dist
OpenResty(又称:ngx_openresty) 是一个基于 NGINX 的可伸缩的 Web 平台,当然这里完全可以换成单纯的nginx
-
准备执行脚本
run.sh
#!/usr/bin/env bash # 时间戳版本 date=$(date "+%Y.%m.%d-%H.%M.%S") echo '----build image----' # 打包前端镜像 docker build . -t 127.0.0.1:2375/cloud/mva-front:${date} echo '----push image----' # 上传到Docker镜像仓库 docker push 127.0.0.1:2375/cloud/mva-front:${date} echo '----rm image-----' # 删除掉刚才打包好的镜像 docker rmi 127.0.0.1:2375/cloud/mva-front:${date}
-
整合
将准备好的
Dockerfile
、run.sh
、静态资源文件(vue打完包之后是在dist文件夹下)
、nginx.conf
放置到同一个文件夹下,然后执行run.sh
即可。
有更好的方法的同学,欢迎私信我,一起探讨
更多文章请扫描下方二维码关注公众号获取,或者微信搜索【HughPro】关注