一文搞定前端 Jenkins 自动化部署

最近在公司租项目的过程当中遇到一些 问题,项目做问你后需要部署到服务器环境;目前我再前端开发中常用的 方法又两种:

1:传统的方法 :Linux Xshell xftp来收到打包项目,上传到服务器环境进行部署

2:配置Nginx 环境和Jenkins部署环境再进行命令来自动晚上部署(这篇文章是下载Nginx 安装 Jenkins 做配置来部署服务器)

由于公司使用自己搭建的 svn 服务器来进行代码管理,因此这里 Jenkins 是针对 svn 服务器来进行的配置,Git 配置基本一致,后面也介绍了下针对 Github 管理的项目的 Jenkins 配置

之前项目每次修改之后都需要本地 npm run build 一次手动发布到服务器上方便测试和产品查看,有了Jenkins持续集成之后只要 svn 或者 git 提交之后就会自动打包,很方便,此次记录以备后询

  1. 后面的项目地址与打包地址都是使用 my-demo,自行修改;
  2. 另外还有路径等,根据自己情况自行修改;

首先安装:ngnix配置环境 https://www.cnblogs.com/mahmud/p/11416860.html

1. 安装

1.1 安装 Nginx

可以直接去官网下直接下载,解压缩 start nginx就可以使了,常用命令:

  1. start nginx # 启动
  2. nginx -s reload # 修改配置后重新加载生效
  3. nginx -s reopen # 重新打开日志文件
  4. nginx -t # 配置文件检测是否正确

1.2 安装Jenkins

从官网下载文件安装之后,我这里安装到 C:Jenkins(Mac 不用在意),默认端口 8080,这时候浏览器访问 localhost:8080 就能访问 Jenkins 首页,这里注意如果不安装到 C 盘根目录有些插件安装会出错

这个密码需要去c盘来做好:

这里会让你去某个地方找一个初始密码文件打开并填到下面的密码框里,验证成功之后进入页面,选择 Installsuggested plugins 推介安装的插件

插件都安装完成之后进入用户登录界面,设定用户名、密码及邮箱。

然后提示 Jenkins is ready!→ Start using Jenkins ~

注意这里因为要使用node的命令来执行创建后操作,所以还需要安装插件:NodeJSPluginDeployto containerGithubPostbuild task

这里顺便记录一下启动和关闭Jenkins服务的命令行:

  1. net start jenkins // 启动Jenkins服务
  2. net stop jenkins // 停止Jenkins服务

2. 创建svn项目的Jenkins任务

2.1 新建

左边栏新建一个任务,输入一个任务名称,这里随便写一个

2.2 配置

General

这里才是重头戏,进入刚刚创建的任务的配置页面的 General

丢弃旧的构建就是检测到新的版本之后把旧版本的构建删除

源码管理

这里采用的是 svn 来管理代码,

构建触发器

这里的 Poll SCM 表示去检测是否更新构建的频率, ***** 表示每分钟, H**** 表示每小时

构建

  1. cd cd C:Jenkinsworkspacemy-demo
  2. node -v
  3. npm -v
  4. cnpm i
  5. npm run build

构建后操作

安装插件 Postbuild task 后,可以在 增加构建后操作步骤中选择 Postbuild task 选项,增加构建后执行的script,具体也可以参考文章:jenkins部署maven项目构建后部署前执行shell脚本 - https://blog.csdn.net/minebk/article/details/73294785

我这里的 LogtextBuildcomplete

Script:

  1. rmdir /q/s C:
    ginx-1.14.0htmlmy-demo
  2. xcopy /y/e/i C:Jenkinsworkspacemy-demomy-demo C:
    ginx-1.14.0htmlmy-demo

复制生成好的文件到Nginx的目录下,路径自行修改

3. 创建Github项目的Jenkins任务

Jenkins 不仅可以持续集成 svn 项目,Git 项目也是可以的,这里以 Github 上的项目为例:

其他配置和上面一章一样

这样如果 github 有新的 push 请求,都会自动化部署到之前的服务器上,可以说很方便了。

试一试

配置好了我们试一试,在刚刚 github 项目中随便 commit 一版到 github

稍等片刻去本地 Jenkins 地址 http://localhost:8080/job/vue-element-template/ 就能看到 Jenkins 已经在构建中了

50秒之后:

构建成功!构建用时 54 秒,现在访问本地服务器地址 http://localhost:8282/vue-element-template,已经能看到编译后的发布版本啦~

如果你希望发布的是测试版本,可以自行修改构建后操作的 script

参考:

使用Jenkins自动编译部署web应用
Jenkins+github 前端自动化部署
配置Jenkins邮件通知
jenkins部署maven项目构建后部署前执行shell脚本

  

原文地址:https://www.cnblogs.com/mahmud/p/11420097.html

时间: 2024-08-04 04:52:31

一文搞定前端 Jenkins 自动化部署的相关文章

Linux下的Jenkins+Tomcat+Maven+Gitlab+Shell环境的搭建使用(jenkins自动化部署)

jenkins自动化部署 目标:jenkins上点构建(也可以自动检查代码变化自动构建)>>>项目部署完成. 一.安装jenkins 1.下载jenkins 这里我选择的是war包安装jenkins,简单不伤脑,别的博客写的jenkins版本都很旧,没用最新的,写个比较新的配置2.20版. 官网:https://jenkins.io/index.html WAR包下载地址:http://mirrors.tuna.tsinghua.edu.cn/jenkins/war/2.20/jenki

【腾讯TMQ】5小时搞定谷歌原生自动化框架UiAutomator1.0

[腾讯TMQ]5小时搞定谷歌原生自动化框架UiAutomator1.0 前言 谷歌对UI测试(UI Tetsting)的概念是:确保用户在一系列操作过程中(例如键盘输入.点击菜单.弹出对话框.图像显示以及其他UI控件的改变),你的应用程序做出正确的UI响应. UI测试(功能测试.黑盒测试)的好处是不需要测试者了解应用程序的内部实现细节,只需要知道当执行了某些特定的动作后是否会得到其预期的输出.这种测试方法,在团队合作中可以更好地分离的开发和测试角色.然而常见的UI测试多是以手动方式去执行,然后去

抓紧面试前的宝贵时间 快速搞定前端初级JavaScript面试

第1章 课程介绍[说说面试的那些事儿]本章会出几个面试题,分析每道题目设计的知识点,然后总结出一个完整的知识体系.让我们开始 “题目->知识点->解题” 的快乐之旅吧. 第2章 JS基础-变量类型和计算[不会变量,别说你会JS]本章介绍变量的类型和计算的知识点和题目,包括值类型和引用类型区别,类型判断,深拷贝等.变量和类型是一个任何一门语言的基础,不了解的话,会被认为是 JS 语法不过关. 第3章 JS基础-原型和原型链[三座大山之一,必考!!!]本章介绍原型.原型链和 class 相关的知识

gitlab+jenkins自动化部署

基于gitlab和jenkins的自动化部署 Gitlab基于Jenkins自动化部署教程: https://blog.csdn.net/aaaaaab_/article/details/82012044 https://www.cnblogs.com/dengbingbing/p/10448185.html GitLab是一个代码仓库,用来管理代码. Jenkins是一个自动化服务器,可以运行各种自动化构建.测试或部署任务.所以这两者结合起来,就可以实现开发者提交代码到GitLab,Jenki

快速搞定前端初级JavaScript面试完整版

资源获取链接:点击获取完整教程 抓紧面试前的宝贵时间 快速搞定前端初级JavaScript面试 BAT资深面试官针对时下面试高频考点,帮你解决面试问题.课程不局限于简单地讲解每一个知识点,而是以面试官的角度出发,带你了解前端面试中每个“门道”与“套路”.手把手带你分析考点及解答策略,梳理JS考试体系,帮助前端新人快速通过JS面试部分. 课程紧凑,分秒必争 拒绝题海战术,绝不浪费时间解析典型面试题,分析前端面试核心考点拆解一道题,解决一类题 匠心设计,直击考点 凝聚讲师三年面试课程授课经验结合大量

jenkins安装配置一文搞定

1 .前置准备 安装java 配置JAVA_HOME安装git安装maven安装tomcat 2.安装jenkins 本文安装jenkins采用war的方式,war包下载地址:https://jenkins.io/zh/download/ 只需要将下载的jenkins.war放到tomcat下面,启动tomcat后,访问http://localhost:8080/jenkins 即可 首次进入会让配置插件(跳过),管理员等信息: 3.安装插件提速 mac找到 /Users/didi/.jenki

gitlab+jenkins 自动化部署 持续集成

环境: 1.centos7.6 2.jdk1.8.0_141 3.4G 30G 4core 4.关闭防火墙和selinux 一.安装jenkins 1. 下载jenkins https://pkg.jenkins.io/redhat/  jenkins-2.208-1.1.noarch.rpm 2.安装jdk和jenkins rpm包 rpm -ivh jdk-8u141-linux-x64.rpm rpm -ivh jenkins-2.208-1.1.noarch.rpm 3.启动服务及设置开

一步搞定私有Git服务器部署(Gogs)

http://www.jianshu.com/p/424627516ef6 零.安装 Docker 和 Compsoe 首先安装 Docker: $ curl -sSL https://get.docker.com/ | sh $ sudo usermod -aG docker YOURUSERNAME YOURUSERNAME 为你的用户名. 然后安装 Compsoe: $ sudo curl -L https://github.com/docker/compose/releases/down

一篇文章搞定前端面试

本文旨在用最通俗的语言讲述最枯燥的基本知识 面试过前端的老铁都知道,对于前端,面试官喜欢一开始先问些HTML5新增元素啊特性啊,或者是js闭包啊原型啊,或者是css垂直水平居中怎么实现啊之类的基础问题,当你能倒背如流的回答这些之后,面试官脸上会划过一丝诡异的笑容,然后晴转多云,故作深沉的清一下嗓子问:从用户输入URL到浏览器呈现页面经过了哪些过程?如果你懂,巴拉巴拉回答了一堆,他又接着问:那网页具体是如何渲染出来的呢?如果你还懂,又巴拉巴拉的回答了一堆,他还会继续问:那你有哪些网页性能优化的经验