[手把手系列之] Jenkins+Docker自动化部署vue项目

最新推荐文章于 2025-07-13 15:16:19 发布
原创 最新推荐文章于 2025-07-13 15:16:19 发布 · 1.1k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#jenkins #docker #自动化 #vue.js #运维

本文手把手教你如何使用Jenkins和Docker自动化部署Vue.js项目，涵盖了从安装Docker、配置Jenkins，到创建Vue项目、编写Dockerfile，最后通过Jenkins实现持续集成和部署的全过程。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

介绍

本系列主要介绍如何自动化部署我们的前端和后端项目

本篇主要介绍如何自动化部署vue项目

下篇讲如何自动化部署nodejs项目

我这里是mac os,如果你用linux就不会碰到很多下面碰到的问题了。

相关应用

整个流程

首先我们把我们的电脑想象成一台服务器，当然如果你有服务器，也可以直接在服务器上，执行以下操作

我这里方便起见，就直接把我的电脑(mac)当做一台服务器，事实证明这里面很多坑！！！

注意区分以下本地和服务器的区别，其实我们这里都是我们的电脑

  1. 我们在服务器(这里是我们的mac)上安装docker

  2. 我们在服务器(这里是我们的mac)上用docker安装了jenkins

  3. 我们本地新建一个vue项目，并推到github

  4. 我们本地访问服务器上的jenkins，即打开网址http://localhost:8081 (如果是服务器这里localhost换成你服务器的ip)

  5. 我们用jenkins拉了github的项目到jenkins的安装目录里的workspace/目

最低0.47元/天 解锁文章

200万优质内容无限畅学
手把手通过Docker部署前后端分离项目（亲测可用）
黄团团的个人博客
08-21 9195
Docker基本安装和部署Nginx、MySQL、Vue和SpringBoot项目学习笔记（亲测可用），这里我用的是阿里云的服务器，环境是CentOS7！分享一些自己在学习路上的一些笔记，欢迎大家共同交流与探讨！
手把手带你玩转k8s-jenkins流水线发布vue项目
mldong的博客
05-12 1327
前言 后端项目发布完了，本篇开始讲到前端项目，也就是前面开源的vue项目。其实编写流水线的思路都差不多，先梳理好流程，把流程定义好后，再使用Jenkins的流水线语法去编写流水线。这里的vue项目的发布也差不多。 发布流程分析 拉取代码 打包生成静态文件 执行k8s发布命令 获取nginx持久化目录 将静态文件复制到持久化目录 因为在前面的一键脚本已经将流程实现过了，这里只需要将原来的shell转成流水线 开始编码 入参说明 参数名 默认值 说明 project_name mldong-
Jenkins+Vue+docker实现前端的CI/CD
weixin_43484014的博客
07-25 793
Jenkins+docker实现前端项目的CI/CD（持续集成与持续部署）
基于Docker安装的Jenkins 部署 Vue项目案例教程
weixin_52359996的博客
06-24 935
Jenkins 前端 Vue 项目 部署
jenkins部署前端vue项目使用Docker+Jenkinsfile方式
最新发布
G_whang的博客
07-13 691
本文介绍了使用Jenkinsfile自动化部署Vue前端项目的完整流程。首先需要在项目中配置Dockerfile、.dockerignore和nginx.conf文件，然后编写包含构建、打包、容器化等步骤的Jenkinsfile。通过Jenkins流水线任务关联Git代码库，自动执行构建流程，最终将项目部署到Nginx容器中。该方法实现了前端项目的持续集成与自动化部署，通过统一管理脚本命令提高了部署效率。成功构建后可通过指定端口访问部署的前端应用。
Jenkins利用docker部署vue项目
Button的博客
02-23 2690
jenkins利用docker部署vue项目
安装jenkins的docker镜像，并一键部署vue项目
admin_jo的博客
03-22 1840
由于jenkins是基于java开发的软件，有些同学可能不想电脑里有多余的环境，所以只介绍docker镜像的安装方法，简单干净，如果有不会使用docker的小伙伴可以看一下我之前的帖子。
docker部署Jenkins自动化打包部署vue、java项目上线
m0_73210955的博客
08-23 2172
前后端部署完毕，小编踩了很多坑，有不懂的可以后台私信，我会的我就告诉你，至于为什么没有数据库，数据库一般都是提前部署好的，开发跟前端代码里就已经指定好数据库的IP等信息了，如果你是一个人，那你可以这样部署MySQL。location /api/ {###这里的/api/指的是前端只要有xxxx.api的时候匹配到/api/就转发到后端。/你创建Jenkins时候映射的目录/jenkins_home/workspace/你刚才起的项目名称/build/libs/gitlab是代码仓库。
Docker结合Jenkins部署vue项目
01-20
Docker结合Jenkins部署vue项目 接上篇 Vue项目没什么好说的，在本地一般使用vue ui启动vue管理的前端，然后在里面进行启动 Vue官方说可以不通过ngin来部署，但是如果上生产环境，建议还是要走nginx 安装nginx 这里安装过程不再赘述，如果不清楚可以参考下面这篇文章 https://blog.csdn.net/qq_42815754/article/details/82980326 配置Jenkins 具体填Jenkins配置可以参考我的上一篇文章，这里需要安装一个额外的插件 dockerfile 在前端项目的根目录下添加dockerfile文件，内容如下： #
vue项目自动构建部署，Jenkins+nginx+gitlab
陨落的轨迹的博客
01-05 1818
win10系统 gitlab用的官网gitlab:https://gitlab.com/ 思路 1、将自己电脑变成一台服务器（如果有真的服务器，也可） 参考这个文章： 如何在win10上搭建服务器_Arcobaleno-CSDN博客_win10搭建服务器 2、gitlab提交代码后，jenkins将代码拉取到workspace里进行安装、打包 方式一：直接在win10下安装jenkins，启动 win10下安装Jenkins_weixin_30466...
docker+jenkins构建vue项目
weixin_45337170的博客
04-18 2035
1、安装docker 我的是腾讯云主机 CentOS 8 1.1 使用命令安装 curl -sSL https://get.daocloud.io/docker | sh 参考菜鸟教程 1.2 启动docker和设置开机自启 # 启动 systemctl start docker #开机自启 systemctl enable docker 1.3 测试是否安装成功 docker version 2、安装Docker Compose 2.1 运行这个命令下载当前稳定版本 sudo curl -L
jenkins部署vue前端
10-18
jenkins部署vue前端
docker+jenkins+gitlab部署你的Vue项目
油墨香^-^的博客
03-23 455
这时候我们已经打通了本地代码->gitlab-jenkins的这个环节了,然后我们编写shell脚本执行docker语句构建容器并且执行就OK了 (1).在jenkins中配置shell脚本。
阿里云容器服务+jenkins+docker部署vue项目
weixin_44062468的博客
03-27 775
11111
Docker搭建jenkins(Vue自动化部署)
前端阿皓
03-06 2433
需要提前准备的条件Docker环境Docker官网：https://hub.docker.com/u/library有2台服务器的情况下，将当前jenkins配置的服务器打包文件发送到另外一台服务器1、需要先设置远程服务器的host,账号,密码，点击系统管理->点击系统配置,找到Publish over SSH选项2、需要配置Name,Hostname,Username,Remote Directory，账号认证可以使用密码,key文件,key内容参数说明字段描述Passphrase。
docker中使用jenkins部署vue项目
一半的博客
08-14 2591
docker中安装jenkins请参考文章《Jenkins-在docker中的持续集成》。 一、安装node环境： 官网下载node_v14，建议使用迅雷下载，比较快。 地址：https://nodejs.org/dist/latest/node-v14.8.0-linux-x64.tar.gz 下载后上传到服务器/root/download/下，并解压： $ tar -zxvf node-v14.8.0-linux-x64.tar.gz -C ./ 重命名： $ mv node-v14.8.0-lin
Jenkins+Docker实现部署你的Vue应用
老曹的博客
09-12 2553
什么是自动化 在没有工具的时代，有很多重复性的工作都是人手工完成的，比如在田地里收割果实、在流水线上加工等。而有了工具后，我们解放了双手，从而把精力放在更重要的事情上，让工具帮我们去完成那些重复性的工作，来提高效率，这就是我理解的自动化。在软件开发中更是如此，大家为了“变懒”，使自动化测试、自动化部署、自动化构建等类型的工具层出不穷。而这篇文章主要是记录一下我学习使用CI/CD工具jenkins来...
docker + jenkins + vue
weixin_63115449的博客
06-26 738
在宝塔中找到 /var/jenkins_home/tools/jenkins.plugins.nodejs.tools.NodeJSInstallation/node16/下面还有一层。使用vite去创建项目,然后在github上面新建一个仓库，上传到仓库里面。打开2000的端口，这个时候会使用jenkins密码。本地对代码进行修改，提交代码到github成功触发。方案一：通过宝塔控制面板去安装jenkins。端口，一定要把端口放开。测试node是否生效。
jenkins+docker+nginx服务并访问vue项目
weixin_39660224的博客
03-24 2779
大致说明 现在有两个服务器A,B A:部署jenkins B:部署nginx+vue 利用jenkins自动下载vue项目，打包发送到远程的B服务器，在B服务器中docker中部署nginx，利用nginx作为web服务器 前提准备 前提工具B中安装docker、A中安装jenkins jenkins安装部署在docker中可以看另一篇文章 开始动手 jenkins部署 配置全局变量 配置git...
Jenkins + Docker + Git 自动化部署前端vue项目
05-20
以下是 Jenkins + Docker + Git 自动化部署前端 Vue 项目的步骤： 1. 安装 Docker 和 Jenkins：Docker 是一个容器化平台，Jenkins 是一个自动化构建和部署工具。 2. 创建一个新的 Jenkins 任务：在 Jenkins 的界面...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值