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

Hugh的白板
1,975 阅读4分钟

一、前言

1、本文主要内容

​ 将在项目中实际使用到的相关东西整理记录一波，同时可以方便其他同学在使用到的时候参考一下（自己也备忘），有不对的地方，欢迎指出~~

  • 记录下如何使用Jenkins自动打包、部署Vue前端应用（对于所有前后端分离的前端静态项目都通用)
  • 前端代码如何打成Docker镜像

3、本篇环境信息

  • 服务器

    操作系统硬件配置IP说明
    CentOS 74C16G10.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环境，具体可以参考：Docker | 在CentOS上安装Docker Engine

2、Jenkins 环境安装

在Linux服务器上安装Jenkins，具体可以参考：CentOS下使用Docker安装Jenkins及配置详细教程

3、GitLab 环境安装

在Linux服务器上安装GitLab，具体可以参考：GitLab持续集成发布之一：CentOS7下GitLab安装部署教程

三、打包及部署

本文使用的前端是项目是Vue项目，是部署到Nginx进行访问的

Vue项目的打包需要使用Node环境，Jenkins也是可以在插件中心安装NodeJs的插件的，非常简单方便,不了解的同学可以参考这篇文章：CentOS下使用Docker安装Jenkins及配置详细教程

安装完成之后，可以到Global Tool Configuration配置NodeJs的版本，也非常简单，不在说明。

  • 新建一个自由风格的任务

    image-20200812174715703

  • 配置源码管理

    我这边使用的是GitLab,当然你们使用Github、Gitee都是可以的,指定前台的代码路径。

    image-20200812175538984

    增加一个访问GitLab的用户名密码

    image-20200812153319729

  • 配置构建环境

    在构建环境，我们需要选择使用NodeJs的相关信息，具体如下：

    image-20200812175059016

  • 配置构建打包前台代码,点击增加构建步骤-->执行shell，具体配置项参考下图：

    image-20200812180042171

  • 将打好包的静态资源文件传到Nginx服务器。点击增加构建步骤-->Execte shell script on remote host using ssh选项，这个是到远程服务器执行脚本，还有另外一种方式，在一键打包Spring Boot应用那片文章里，有兴趣的可以翻翻看看，具体如下图：

    image-20200812181025511

  • 点击保存，这样就可以了，点击立即构建，就可以实现一键打包部署了

四、前端代码打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即可。

有任何问题欢迎关注公众号【Hugh的白板】私信我，一起探讨，一起学习

avatar
文章
阅读
粉丝