一文5000字手把手教你使用jenkins搭建一个中小企业前端项目部署环境

news2024/11/14 21:20:24

本文你能学到什么?

  1. 传统发布和现在发布的对比和区别

  2. 项目案例-手动上传服务器，使用jenkins上传服务器

  3. 配置不同的发布环境

  4. 配置域名

  5. 配置https

  6. 配置钉钉机器人通知【文末有配套资源领取】

服务器购买：抢占式实例

Jenkins 安装

示例服务器为 阿里云 CentOS 服务器。安全组中增加 8080 端口 Jenkins 默认占用 Jenkins 安装大体分两种方式，一种使用 Docker 另一种则是直接安装，示例选择后者。不管使用哪种方式安装，最终使用层面都是一样的。

Linux安装过程

# 下载 Jenkins 资源
sudo wget -O /etc/yum.repos.d/jenkins.repo https://pkg.jenkins.io/redhat/jenkins.repo
# 这一步如果出现报错，使用下面的命令解决
sudo yum install -y ca-certificates

# 获取并导入信任的包制作者的秘钥
sudo rpm --import https://pkg.jenkins.io/redhat/jenkins.io.key
# 升级 yum 源中的所有包
sudo yum upgrade
# Jenkins 依赖于 java 所以需要安装 JDK
sudo yum install java-11-openjdk
# 安装 Jenkins
sudo yum install jenkins

# 启动 Jenkins 服务
systemctl start jenkins
# 重启 Jenkins 服务
systemctl restart jenkins
# 停止 Jenkins 服务
systemctl stop jenkins
# 查看 Jenkins 服务状态
systemctl status jenkins

启动过程稍微得等30s，启动服务后访问服务器地址 + 8080 端口（提前打开安全组8080），Jenkins 默认为 8080 端口。

登录页面

查找密码:首次进入使用 cat /var/lib/jenkins/secrets/initialAdminPassword 查看密码。选择推荐的插件，进行安装，安装过程稍长（5分钟以上）安装完成以后创建用户账户：xiumubai 密码：***** 访问地址：http://8.218.133.146:8080/[1] 后面的步骤一下点下一步就行了，最后进入首页

构建目标：拉取 github 代码

服务器要具备 git 环境。yum install git 点击 新建 Item 创建一个 Freestyle Project 在 源码管理 处选择 git ，输入仓库地址，点击添加。项目示例：github.com/xiumubai/gu…[2]

安装完成以后重启jenkins 然后到 系统管理 -> 全局工具配置 中配置 Node 因为我们的项目需要使用npm，所以需要node随后去修改刚才创建的任务。在 构建环境 中会多出一个选项 Provide Node & npm bin/ folder to PATH 勾选即可。为了我们能够在github上拉取代码，需要我们添加git token，在github中添加一个token找到系统设置，找到github服务器，点击添加类型选择Secret text把刚生成的github token复制到这里，点击添加。回到项目的设置中，找到构建环境把我们刚才生成好的Secret text 选中即可。

然后在 Build Steps 中选择 增加构建步骤 -> 执行 shell 输入打包发布相关的命令。Jenkins 会逐行执行。

node -v
npm -v
rm -rf node_modules
npm install
npm run build

构建后操作 构建完成以后，我们需要把构建的产物推送到我们的服务器，所以需要用到ssh publisher这个插件。安装插件，ssh publisher，然后配置好要发布的服务器环境。打开系统设置，找到** **Publish over SSH

配置好我们需要发布的服务器，这样才能连接上我们的服务器，推送代码。回到任务的设置中，选择我们刚才配置好的服务器上面需要填写好上传的文件和目标地址。最后配置好nginx的地址即可。

server {
      listen       80;
      listen       [::]:80;
      server_name  _;
      #root         /usr/share/nginx/html;
    	# 这里是我们配置的服务器访问的静态页面路径
      root          /www/oa-web;
      # Load configuration files for the default server block.
      include /etc/nginx/default.d/*.conf;

      error_page 404 /404.html;
      location = /404.html {
      }

      error_page 500 502 503 504 /50x.html;

      location = /50x.html {
      }
  }

配置完成以后，点击立即构建，等构建完毕以后，在浏览器中访问：http://8.218.133.146[3]即可看到我们刚才部署好的页面了。

拉取github不同代码分支，发布不同的环境

我们在选择部署的时候需要根据不同的分支去部署，然后部署到不同的环境 安装好git paremeters插件 然后配置参数 配置分支参数

配置选项参数配置完成以后，我们的构建页面就是这样的继续回到配置修改源码管理这里指定分支的时候就需要使用生命写好的参数release 构建后操作这里的文件目录就需要根据env来配置，发布不同的环境，当打不以后，我们的目录就变成这样的了在oa-web下面会有dev和pre两个目录表示不同的环境，我们只要给这两个文件在nginx中配置不同的域名即可访问了。

配置域名

提前解析两个域名

pre.xiumubai.com
dev.xiumubai.com

配置nginx解析

# 线上环境的配置
server {
    listen       80;
    listen       [::]:80;
    server_name  pre.xiumubai.com;
    #root         /usr/share/nginx/html;
    root 	      /www/oa-web/pre;
    # Load configuration files for the default server block.
    include /etc/nginx/default.d/*.conf;

    error_page 404 /404.html;
    location = /404.html {
    }

    error_page 500 502 503 504 /50x.html;
    location = /50x.html {
    }
}

# 测试环境的配置
server {
    listen       80;
    listen       [::]:80;
    server_name  dev.xiumubai.com;
    #root         /usr/share/nginx/html;
    root 	      /www/oa-web/dev;
    # Load configuration files for the default server block.
    include /etc/nginx/default.d/*.conf;

    error_page 404 /404.html;
    location = /404.html {
    }

    error_page 500 502 503 504 /50x.html;
    location = /50x.html {
    }
}

当部署成功以后，我们就可以使用 pre.xiumubai.com/#/[4]和dev.xiumubai.com/#/[5]来访问我们的项目了。

配置https

需要去自己买个免费证书，绑定域名，然后下载好证书上传到服务器即可。

server {
        listen 443 ssl;
        server_name  pre.xiumubai.com;
         #这里是证书路径
  	ssl_certificate  cert/pre.xiumubai.com.pem; 
         #这里是私钥路径
  	ssl_certificate_key cert/pre.xiumubai.com.key;
	root 	      /www/oa-web/pre;
        # Load configuration files for the default server block.
        include /etc/nginx/default.d/*.conf;

        error_page 404 /404.html;
        location = /404.html {
        }

        error_page 500 502 503 504 /50x.html;
        location = /50x.html {
        }
    }

当我们使用pre.xiumubai.com/#/[6]访问的时候，浏览器会出现一个🔒

代表我们的https已经配置成功了。再配置一下当我们访问pre.xiumubai.com/#/[7]强制跳转到了pre.xiumubai.com/#/[8]

server {
    listen       80;
    listen       [::]:80;
    server_name  pre.xiumubai.com;
		# 访问http的时候自动跳转到https
		rewrite ^(.*)$ https://$host$1 permanent;
    
}

配置钉钉机器人

在jenkins中安装插件dingtalk，在系统管理中，最下面找到钉钉，配置机器人消息 我们提前在钉钉群中添加一个机器人，然后复制webhooks 填写好名称和webhooks，点击测试，关键字要和添加钉钉机器人的关键字一样的。

然后提交即可。回到我们的任务中的配置，添加钉钉机器人

当我们的任务构建以后，就会收到消息了。

执行条件判断

当我们在shell需要根据条件来判断执行不同的命令的时候，就可以这么写了，比如我现在需要在测试环境打包npm run build:test,线上环境打包npm run buld，可以这么写

node -v
rm -rf node_modules
npm install
if test $env = "test"; then
    echo 'test'
 npm run build:test
else
 echo 'prod'
 npm run build
fi

这样，我们就可以选择不同的环境，来部署代码了。

本期分享到这里就结束了，当然我们还有很多事情还需要做的，怎么把静态资源部署到CDN，怎么做回滚，怎么做灰度发布，负载均衡等等一系列，后面等研究明白了，再给大家分享。

参考资料

[1]

http://8.218.133.146:8080/: http://8.218.133.146:8080/

[2]

https://github.com/xiumubai/guigu-oa-web.git: https://github.com/xiumubai/guigu-oa-web.git

[3]

http://8.218.133.146/#/: http://8.218.133.146/#/

[4]

http://pre.xiumubai.com/#/: http://pre.xiumubai.com/#/

[5]

http://pre.xiumubai.com/#/: http://pre.xiumubai.com/#/

[6]

https://pre.xiumubai.com/#/: https://pre.xiumubai.com/#/

[7]

https://pre.xiumubai.com/#/: https://pre.xiumubai.com/#/

[8]

https://pre.xiumubai.com/#/: https://pre.xiumubai.com/#/

软件测试学习资源分享

下方这份完整的软件测试视频学习教程已经上传CSDN官方认证的二维码，朋友们如果需要可以自行免费领取 【保证100%免费】

这些资料，对于想进阶【自动化测试】的朋友来说应该是最全面最完整的备战仓库，这个仓库也陪伴我走过了最艰难的路程，希望也能帮助到你！凡事要趁早，特别是技术行业，一定要提升技术功底。希望对大家有所帮助……基础知识、Linux必备、Shell、互联网程序原理、Mysql数据库、抓包工具专题、接口测试工具、测试进阶-Python编程、Web自动化测试、APP自动化测试、接口自动化测试、测试高级持续集成、测试架构开发测试框架、性能测试、安全测试等配套学习资源免费分享

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/187775.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

系统移植 tf-a

系统移植 tf-a

1、从ST官网下载TF-A源码，将TF-A源码拷贝到ubuntu中并进行解压。 2、进入tf-a源码，阅读README.HOW_TO.txt帮助文档。 3、分析帮助文档。 分析文档可得，移植tf-a到开发板中步骤为：对tf-a源码进行解压；打补丁&#xff…
阅读更多...
ElasticSearch从入门到出门【上】

ElasticSearch从入门到出门【上】

文章目录初识elasticsearch了解ESelasticsearch的作用ELK技术栈elasticsearch和lucene为什么不是其他搜索技术？倒排索引正向索引倒排索引正向和倒排ES的一些概念文档和字段索引和映射mysql与elasticsearch安装elasticsearch部署单点es部署kibana安装IK分词器在线安装…
阅读更多...
SpringBoot 使用自定义的方式整合Druid数据源（powernode document）（内含源代码）

SpringBoot 使用自定义的方式整合Druid数据源（powernode document）（内含源代码）

SpringBoot 使用自定义的方式整合Druid数据源（powernode document）（内含源代码） 源代码下载链接地址：https://download.csdn.net/download/weixin_46411355/87404561 目录SpringBoot 使用自定义的方式整合Druid数据源…
阅读更多...
SQLSERVER 的 nolock 到底是怎样的无锁？

SQLSERVER 的 nolock 到底是怎样的无锁？

一：背景 1. 讲故事 相信绝大部分用 SQLSERVER 作为底层存储的程序员都知道 nolock 关键词，即使当时不知道也会在踩过若干阻塞坑之后果断的加上 nolock，但这玩意有什么注意事项呢？这就需要了解它的底层原理了。 二：n…
阅读更多...
python之np.sum()用法详解

python之np.sum()用法详解

python库numpy提供的求和方法np.sum()，可以对数组和矩阵进行求和。sum方法可以接收多个参数，主要是数组a,坐标轴axis,数据类型dtype,初始值initial。其中，axis对于我们来说比较容易迷糊，这个值对求和有什么影响？一般来…
阅读更多...
Linux常用命令——rcp命令

Linux常用命令——rcp命令

在线Linux命令查询工具(http://www.lzltool.com/LinuxCommand) rcp 使在两台Linux主机之间的文件复制操作更简单 补充说明 rcp命令使在两台Linux主机之间的文件复制操作更简单。通过适当的配置，在两台Linux主机之间复制文件而无需输入密码，就像本地文…
阅读更多...
React基础入门（一）

React基础入门（一）

1、React简介 官网 英文官网: https://reactjs.org/ 中文官网: https://react.docschina.org/ 描述介绍 用于动态构建用户界面的 JavaScript 库(只关注于视图) 由Facebook开源 React特点 1、声明式编码 2、组件化编码 3、React Native 编写原生应用 4、高效（优秀…
阅读更多...
苹果不小心删了照片怎么恢复？苹果照片删除后如何恢复

苹果不小心删了照片怎么恢复？苹果照片删除后如何恢复

苹果不小心删了照片怎么恢复？请保持冷静，不要往mac中写入新的东西，以防丢失的照片被覆盖。接下来，我们一起来探讨一下mac照片恢复的技巧。 方法一、从“最近删除”文件夹中恢复照片 使用照片管理应用程序（例如Mac上的…
阅读更多...
百趣代谢组学分享Lip-SMap：绘制代谢物和蛋白相互作用图谱的新方法

百趣代谢组学分享Lip-SMap：绘制代谢物和蛋白相互作用图谱的新方法

百趣代谢组学文献分享，自2014年瑞士苏黎世联邦理工学院的Picotti和她的研究小组开始用Lip-SRM法测量复杂蛋白质混合物的大量结构改性蛋白质以来[1]；该研究小组随后对方法进行改进，研究了复杂细胞基质中几种生物蛋白质的热稳定性，并…
阅读更多...
袁树雄和唐磊关系迎来转折，王勇把他们两个和杨语莲拉进一个群

袁树雄和唐磊关系迎来转折，王勇把他们两个和杨语莲拉进一个群

自从《早安隆回》火爆全网之后，创作者袁树雄就遭遇各种非议，就是他的同行唐磊老师，也勇敢站出来点评。唐磊老师也是一名音乐人，当年他凭借《丁香花》，一夜之间响彻大江南北，成为了家喻户晓的大明星。 虽然唐…
阅读更多...
1行Python代码识别车牌号码，轻松写一个停车场管理系统，YYDS

1行Python代码识别车牌号码，轻松写一个停车场管理系统，YYDS

大家好，这里是程序员晚枫。 你家停车场的摄像头，是怎么识别出你的车牌的？今天我们一起来看一下~ 识别车牌 识别车牌的代码很简单，只需要1行代码，如下所示。👇 # pip install poocr import poocr# 可以填…
阅读更多...
Day1 CF847 div3 vp A-E

Day1 CF847 div3 vp A-E

Dashboard - Codeforces Round #847 (Div. 3) - Codeforces感觉想试试隔一天vp一场div3/4，那就试试吧本来想把F补完再写的，但是感觉有点晚了，那就将就一下吧，F有缘单独补，嘻今晚浅浅vp了一下，一鼓作气地打出…
阅读更多...
聊聊如何利用apollo与druid整合实现数据源动态热切

聊聊如何利用apollo与druid整合实现数据源动态热切

前言 本文的素材来源与某次和朋友技术交流，当时朋友就跟我吐槽说apollo不如nacos好用，而且他们还因为apollo发生过一次线上事故。 故事的背景大概是如下 前阵子朋友部门的数据库发生宕机，导致业务无法正常操作，当时朋友他们数据…
阅读更多...
【JavaEE进阶】锁的特性

【JavaEE进阶】锁的特性

目录 一、乐观锁&悲观锁 二、公平锁&非公平锁 三、可重入锁&非可重入锁 四、读写锁&互斥锁 互斥锁 读写锁 读写锁涉及的类:ReentrantReadWriteLock 读写锁的优势: 五、轻量级锁&重量级锁 六、CAS ①基于CAS实现原子类 下面，来一段CAS的伪…
阅读更多...
举个栗子~Tableau 技巧（250）：创建 KPI 指标突出显示表

举个栗子~Tableau 技巧（250）：创建 KPI 指标突出显示表

上一个栗子发出后，有数据粉反馈：有什么办法可以让全年的销售数据分层显示哇？业绩表现好、一般和差的分别使用不同的底色。 这个需求，如果考核的是名次，可以使用 🌰 用颜色突出显示前N项(TopN)和后N项(Bott…
阅读更多...
samba设置文件共享

samba设置文件共享

前提说明本人使用的系统如下共享文件的系统：ubuntu 版本：18.04.6目标系统：windows11安装sambasudo apt-get install samba修改配置文件sudo vim /etc/samba/smb.conf文件末尾添加以下内容[share] # 共享的名称，可以自行定义 c…
阅读更多...
完整数据分析流程：Python中的Pandas如何解决业务问题

完整数据分析流程：Python中的Pandas如何解决业务问题

开篇 作为万金油式的胶水语言，Python几乎无所不能，在数据科学领域的作用更是不可取代。数据分析硬实力中，Python是一个非常值得投入学习的工具。 这其中，数据分析师用得最多的模块非Pandas莫属，如果你已经在接触它了…
阅读更多...
c#入门-异步方法

c#入门-异步方法

异步方法 如果一个操作会返回Task，那么用这个操作续接后续操作，也会得到Task。 也就是说Task具有传染性，最终拼凑出来的Task非常复杂。 使用异步方法，可以简化Task的拼凑。 async修饰 异步方法需要添加async修饰符。并且通常方…
阅读更多...
【前端】Vue项目：旅游App-（15）home：网络请求house数据、动态并组件化展示house列表信息

【前端】Vue项目：旅游App-（15）home：网络请求house数据、动态并组件化展示house列表信息

文章目录目标过程与代码content组件请求数据：houseListrequeststore控制台输出动态加载更多列表数据house-item组件阶段1：数据传送阶段2：对着目标写样式house-item-v9house-item-v9：debughouse-item-v3阶段3：总体效果效…
阅读更多...
Android ANR触发机制（二）

Android ANR触发机制（二）

上一篇文章看了Service的ANR触发流程，现在看一下其他三种ANR触发流程。 1.BroadcastReceiver触发ANR BroadcastReceiver超时是位于ActivityManager线程中的BroadcastQueue.BroadcastHandler收到BROADCAST_TIMEOUT_MSG消息时触发。 广播队列分为foreground队列和b…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023