Jenkins+Docker+github+Vue自动化部署

最新推荐文章于 2024-09-13 00:43:13 发布
最新推荐文章于 2024-09-13 00:43:13 发布
阅读量1.3k 收藏 12
点赞数 2
分类专栏： jenkins docker centos 文章标签： docker github jenkins
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/linfen1520/article/details/120405042
版权
docker 同时被 3 个专栏收录
4 篇文章 0 订阅
订阅专栏
centos
4 篇文章 0 订阅
订阅专栏
jenkins
1 篇文章 0 订阅
订阅专栏

一、介绍
1、Jenkins

Jenkins是一个独立的开源软件项目，是基于Java开发的一种持续集成工具，用于监控持续重复的工作，旨在提供一个开放易用的软件平台，使软件的持续集成变成可能。前身是Hudson是一个可扩展的持续集成引擎。可用于自动化各种任务，如构建，测试和部署软件。

Jenkins特点：

开源免费;
跨平台，支持所有的平台;
master/slave支持分布式的build;
web形式的可视化的管理页面;
安装配置超级简单;
tips及时快速的帮助;
已有的200多个插件


2、docker

Docker 是一个开源的应用容器引擎，基于 Go 语言 并遵从 Apache2.0 协议开源。

Docker 可以让开发者打包他们的应用以及依赖包到一个轻量级、可移植的容器中，然后发布到任何流行的 Linux 机器上，也可以实现虚拟化。

容器是完全使用沙箱机制，相互之间不会有任何接口（类似 iPhone 的 app）,更重要的是容器性能开销极低。

3、Vue

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

本文介绍Jenkins的docker自动化构建、发布并部署Vue项目的一个流程。

二、环境配置

需要centos7系统安装的工具如下：

上面工具可自行安装，jdk、maven、nodejs、git、也可以后面通过jenkins自动安装。

接下来开始操作：

1.安装maven打包插件进入：

Jenkins>系统管理>插件管理>可选插件，搜索NodeJS Plugin进行安装。

 

安装插件

等待安装，并进行重启

 

（2）进行全局工具配置：

        Jenkins>系统管理>全局工具配置 

jdk配置，我这里名字填jdk1.8，JAVA_HOME填本机jdk的JAVA_HOME路径，没有的话可以选则自动安装，选择好版本就好了，不过自动安装需要Oracle 登录后才能安装。

 （3）git配置

        可本机安装可以忽略，未安装可选自动安装

（4）maven配置

        本机安装的话填写maven的安装目录，未安装可选自动安装

 

 

（5）NodeJS配置

        本机安装的话填写NodeJS的安装目录，未安装可选自动安装

（6）docker配置

没安装可以选则自动安装，本机安装不需要填写

 最后点击应用并保存。

三、开始新建任务

1.点击新建任务

2、填写任务名称，选择创建自由风格的项目，点确认

 

 3.源码管理，填写项目git地址，这里我填写我的github地址，需要登录的可以添加账户密码或者ssh公钥等进行授权

 4.构建分支，我这里默认master

5.github下载时间比较慢，这里填10分钟

 

 6.构建环境，这里选择nodejs

 7.开始项目构建，填写shell脚本

 （1）shell脚本需要根据自己时间进行更改，下面仅供参考

echo $PATH
node -v
npm -v
#npm install -g cnpm --registry=http://registry.npm.taobao.org 
#安装依赖，使用默认用户
npm install --unsafe-perm
#构建项目到/dist
npm run build:prod
#将构建好的dist项目，移到/opt/data/build目录
#/root/.jenkins/workspace/linfen-blog-ui/dist构建好的dist路径
mv /root/.jenkins/workspace/linfen-blog-ui/dist /opt/data/vue

cd /opt/data/vue

#复制docker 文件linfen-system/src/main/docker/Dockerfile
cp -Rf /root/.jenkins/workspace/linfen-blog-ui/static/docker/Dockerfile /opt/data/vue

#执行构建Dockerfile命令
docker build ./ -t my/linfen-blog-ui

if [[ -n $(docker ps | grep linfen-blog-vue) ]];then
        echo "l【infen-blog-vue】已运行，正在重启。。。"
        #停止之前的容器运行
		docker stop linfen-blog-vue

		#删除之前的容器
		docker rm linfen-blog-vue
else
        echo "【linfen-blog-vue】不存在，正在部署。。。"
fi

#运行刚刚创建的容器
docker run  --name  linfen-blog-vue -d -p 80:80 -v /opt/software/nginx/conf/nginx.conf:/etc/nginx/nginx.conf -v /opt/software/nginx/logs:/var/log/nginx my/linfen-blog-ui

echo "构建完成"

 （2）需要在opt中创建文件夹用来项目构建成docker

# 创建项目构建目录
mkdir /opt/build/vue

# nginx配置文件目录和日志目录
# nginx配置目录，需要提交拷贝nginx.conf文件到这里
mkdir /opt/software/nginx/conf/

# nginx日志目录
mkdir /opt/software/nginx/logs/

 8、创建Docker文件放到/opt/build/vue目录

# 设置基础镜像
FROM nginx
# 定义作者
MAINTAINER linfen-blog-ui
# 将dist文件中的内容复制到 /usr/share/nginx/html 这个目录下面
COPY dist/  /usr/share/nginx/html

9.开始执行构建

10、查看控制台，构建情况

 

 构建成功如下：

Build complete.

 Tip: built files are meant to be served over an HTTP server.
 Opening index.html over file:// won't work.

+ mv /root/.jenkins/workspace/linfen-blog-vue/dist /opt/data/vue
+ cd /opt/data/vue
+ cp -Rf /root/.jenkins/workspace/linfen-blog-vue/static/docker/Dockerfile /opt/data/vue
+ docker build ./ -t my/linfen-blog-vue
Sending build context to Docker daemon  5.096MB

Step 1/3 : FROM nginx
 ---> ad4c705f24d3
Step 2/3 : MAINTAINER linfen-blog-vue
 ---> Running in 2cdc9a4459ef
Removing intermediate container 2cdc9a4459ef
 ---> 28909ac4fee0
Step 3/3 : COPY dist/  /usr/share/nginx/html
 ---> 9232c7507bc7
Successfully built 9232c7507bc7
Successfully tagged my/linfen-blog-vue:latest
++ docker ps
++ grep linfen-blog-vue
+ [[ -n d0b9cc5ca3cc   f1b654517986     "/docker-entrypoint.…"   23 hours ago   Up 21 hours   0.0.0.0:80->80/tcp, :::80->80/tcp           linfen-blog-vue ]]
+ echo l【infen-blog-vue】已运行，正在重启。。。
l【infen-blog-vue】已运行，正在重启。。。
+ docker stop linfen-blog-vue
linfen-blog-vue
+ docker rm linfen-blog-vue
linfen-blog-vue
+ docker run --name linfen-blog-vue -d -p 80:80 -v /opt/software/nginx/conf/nginx.conf:/etc/nginx/nginx.conf -v /opt/software/nginx/logs:/var/log/nginx my/linfen-blog-vue
ae971f47997c34cb85a7c08f121ff15f5b09d86e8c82c65d789bc856e19db0c8
+ echo 构建完成
构建完成
Finished: SUCCESS

日志太长，所以只截取一部分。

11.浏览器输入http://ip:80,就可以看到我们最后的成果了。阿里云等服务器部署需要关闭对应的防火墙和安全组规则

安装到Jenkins的jdk等，建议还是在本机自己安装配置，不然很容易发生环境问题。

教程到这来结束

linfen1520
关注
专栏目录
jenkins打包、发布、部署python_Jenkins实现前端项目自动化集成打包部署
weixin_39778214的博客
12-09 1602
前言以前写前端项目打包部署，都是手动运行命令，打包完，然后压缩，再上传到服务器解压。这种方式确实有点low并且效率也不高。自从用了Jenkins持续集成工具，写前端项目越来越工程化，再也不用担心忘记部署项目，也不用烦躁每次打包压缩后还要部署多个服务器和环境，更开心的是每次家里写完代码，不用远程公司部署项目，提交代码后自动会为你部署。本文基于React的前端项目和GitLab的代码仓库以及Windo...
基于Jenkins+Docker+Github实现SpringCloud自动化部署
Hpsyche的博客
04-05 2358
前言 本博文主要介绍了基于Jenkins+Docker+Github实现了对SpringCloud微服务项目的快速打包、部署。 正文 项目准备 首先有如下SpringCloud项目（这里以本人的毕设项目举例），目录结构如下： bishe_base中的每个module代表一个服务，其中client为后缀的代表的是客户端，其用来暴露server服务中提供的服务接口，给外部的服务使用。 为了让项目最终...
jenkins + docker + github 实现自动化部署
954L
06-21 3453
文章目录前言安装jenkins设置中文配置JDK安装Maven配置Maven插件配置Git用户发布自动部署任务立即构建 前言 之前做了个qq机器人，添加新功能之后老是需要手动重新部署，尽管写了shell脚本来rebuild，但是还是手动啊！ so，有没有嘛工具可以让我提交完代码自动打包，自动部署运行？ 这就想起来之前用的jenkins，但可惜没用过几次，加上过去两三年基本忘光了，这回捡起来再实操一下。 本文主要围绕jenkins来说明如何实现自动化部署步骤，不会详细说明docker还有github操作以.
Jenkins打包、发布、部署环境搭建及验证
最新发布
09-13 547
执行 vim /etc/profile 命令，在打开的文件中添加maven配置:​​​​​​。2、执行 git --version 命令验证，出现git版本号则表示安装成功。1、配置好yum源，执行 yum install git 命令即可。关闭selinux：vim /etc/selinux/config。安装ftp服务：yum install -y vsftpd。查看是否安装完成：rpm -qa |grep vsftpd。​​​​​​执行 mvn -version 命令验证。
Jenkins+Docker+Git 自动化部署图文教程
王小白来了
05-03 1万+
前言: 通过几天的学习和自己的理解，整理了下Docker+Jenkins的自动部署教程，如有不足，还请多多指点，谢谢！ Docker的优点： Docker 让开发者可以打包他们的应用以及依赖包到一个可移植的容器中，然后发布到任何流行的 Linux 机器上，便可以实现虚拟化。Docker改变了虚拟化的方式，使开发者可以直接将自己的成果放入Docker中进行管理。方便快捷已经是 Docker的最大优...
jenkins docker 自动部署 构建_jenkins+docker+vue项目的自动部署环境
weixin_39883079的博客
12-03 754
亮点采用shell自定义脚本，控制集成部署环境更加方便灵活如果服务器更换，重新部署的工作量会比较小准备工作首先我们得有一台服务器。我这里用的是阿里云ECS，华东节点。具体的购买操作的话百度会有教程。购买完成以后你会有一个公网的ip，以及一个通过ssh登录服务器的密码。关于Docker的话，如果不了解的可以先去看文档。Docker的Container(容器)就像轮船上的集装箱。集装箱各自装着各自的货...
Jenkins打包、发布、部署
骑大马挎大刀
04-01 523
注意：JDk 需要Java8以上，最新版本的应该需要Java11以上。
Jenkins + Docker + Github 实现自动化部署 Maven 项目
xxxzzzqqq_的博客
03-09 803
看到这篇文章的你，或多或少都已经对 Jenkins 有过一定了解，就算没有也一定已经听过他的相关话题。在我们学习阶段，常会听到持续集成和持续部署这样的词语，有些小伙伴们已经亲手实践过，还有些没有过，今天就让我们一起对 Jenkins 做一个了解吧。文章的脉络大致：首先是介绍了 Jenkins，以及 Jenkins 的简单工作流程；而后是教大家如何用 Docker 安装 Jenkins；
Jenkins+Docker实现部署你的Vue应用
老曹的博客
09-12 2392
什么是自动化 在没有工具的时代，有很多重复性的工作都是人手工完成的，比如在田地里收割果实、在流水线上加工等。而有了工具后，我们解放了双手，从而把精力放在更重要的事情上，让工具帮我们去完成那些重复性的工作，来提高效率，这就是我理解的自动化。在软件开发中更是如此，大家为了“变懒”，使自动化测试、自动化部署、自动化构建等类型的工具层出不穷。而这篇文章主要是记录一下我学习使用CI/CD工具jenkins来...
[手把手系列之] Jenkins+Docker自动化部署vue项目
CSDN_KONGlX的博客
07-06 1033
.markdown-body { line-height: 1.75; font-weight: 400; font-size: 16px; overflow-x: hidden; color: rgba(51, 51, 51, 1) } .markdown-body h1, .markdown-body h2, .markdown-body h3, .markdown-body h4, .ma...
Jenkins+Docker 实现一键自动化部署项目
2301_77463738的博客
05-22 322
详细可以查看其他教程）点击【构建触发器】–【构建】–【增加构建步骤】–【调用顶层Maven目标】–【填写配置】–【保存】点击正在构建的任务，或者点击任务名称，进入详情页面，查看控制台输出，看是否能成功打成jar包。进入【首页】–【系统管理】–【全局配置】，拉到最下面maven–maven安装。点击【源码管理】–【Git】，输入仓库地址，添加凭证，选择好凭证即可。点击【新建任务】，输入任务名称，点击构建一个自由风格的软件项目。进入【首页】–【系统管理】–【插件管理】–【可选插件】
jenkins+springBoot+maven+svn 部署一键打包发布
06-12
总结了我花了一周配置好jenkins的一些坑 这些东西都是自己话时间弄的 网上搜不到答案哟 随便一个坑都能卡几天~~如果有疑问可以留言看到就回
jenkins 发布打包部署springBoot(maven)项目
weixin_44285972的博客
06-17 1233
jenkins 发布打包部署springBoot(maven)项目
Windows环境下Jenkins打包、发布、部署
热门推荐
Bruce
03-02 7万+
首先，Jenkins可以很方便的在我们的项目中帮助我们去部署、打包项目，在开发过程中避免了繁琐的手动打包步骤，只要我们把项目部署到Jenkins中，然后添加上一些列的脚本，就能帮助我们很快的完成打包工作，并且它与版本管理工具Svn、Git等兼容。 下面我们开始Jenkins之旅： 在windows系统上搭建jenkins持续集成有两种方法： （前提是我们已经配置好了jdk环境） 安装： 1...
Github配合Jenkins，实现vue等前端项目的自动构建与发布
HashTang的博客
03-24 640
本篇文章前端项目以vue为例（其实前端工程化项目的操作方法都相同），部署在Linux系统上（centos）。 之前做前端项目的部署，一直都是手动运行打包命令，打包完。再使用FTP、Xshell等这类的工具上传到服务器。这种方式不仅效率不高，而且容易出错，一不小心就放错地方了。或者公司有运维，只需要打包前端项目代码后发给运维就不管了，但是一般的小公司是没有运维的。所以呢，就在找有没有什么工具可以自...
环境下Jenkins打包、发布、部署Windows
人人为我，我为人人
11-15 1993
首先，Jenkins可以很方便的在我们的项目中帮助我们去部署、打包项目，在开发过程中避免了繁琐的手动打包步骤，只要我们把项目部署到Jenkins中，然后添加上一些列的脚本，就能帮助我们很快的完成打包工作，并且它与版本管理工具Svn、Git等兼容。 下面我们开始Jenkins之旅： 在windows系统上搭建jenkins持续集成有两种方法： （前提是我们已经配置好了jdk环境） 安装： 1、war文件，可以用tomcat或者java命令直接运行 2、msi安装，作为系统服务后台运行 在Jenkin
容器式jekins+docker打包发布部署项目
king的博客
07-24 2038
为什么用 Docker 容器的启动可以在秒级实现，比传统的虚拟机方式要快得多 对系统资源的利用率很高，一台主机上可以同时运行数千个 Docker 容器 docker 的出现，让开发/测试/线上的环境部署，成为便利一条龙。 更轻松的迁移和扩展 Docker 容器几乎可以在任意的平台上运行，包括物理机、虚拟机、公有云、私有云、 个人电脑、服务器等。 这种兼容性可以让用户把一个应用程序从一个平台直接迁移到另外 一个。 对比 基本概念 Docker 镜像 Docker 镜像就是一个只读的模板。 例如：一个镜像可以
Jenkins打包部署java项目---ssh发布到远程服务器
qq_41776004的博客
08-10 392
项目介绍：如XXX后台管理系统。启动程序的start.sh文件。构建之后传输到另一个服务器上。
请给出 Jenkins + Docker + Git 自动化部署前端vue项目 的例子
05-20
好的，下面是一个简单的 Jenkins + Docker + Git 自动化部署前端 Vue 项目的例子： 1. 首先，在本地创建一个 Vue 项目，使用 Git 进行版本控制，并将代码推送到 GitHub 上。 2. 在服务器上安装 Docker 和 Jenkins...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值