Jenkins | 一键打包部署Vue前端应用

一、前言

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】关注

---