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

关注

原创最新推荐文章于 2026-03-06 00:17:25 发布 1.4k 阅读 AI 写同款· GEO 优化 ›

【项目部署】使用Jenkins一键打包部署前端Vue应用嗨，大家好，我是希留，一个被迫致力于全栈开发的老菜鸟。上一篇文章我们讲到了使用Jenkins一键打包部署SpringBoot应用，这一次我们来讲下如何一键打包部署前端应用，以Vue前端应用为例。本文介绍了docker安装nginx，以及Jenkin配置node环境来打包部署前端应用。阅读详情

一、前言

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都可以

操作系统	硬件配置	IP	说明
CentOS 7	4C16G	10.133.28.54	部署Jenkins

二、准备工作

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}