如何使用jenkins搭建一个中小企业前端项目部署环境

最新推荐文章于 2024-09-30 10:19:00 发布
最新推荐文章于 2024-09-30 10:19:00 发布
阅读量746 收藏 10
点赞数 30
文章标签： jenkins 运维 python 压力测试 selenium 自动化 jmeter
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/okcross0/article/details/140663728
版权

本文你能学到什么?

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

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

配置不同的发布环境

配置域名

配置https

配置钉钉机器人通知

服务器购买：抢占式实例

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/#/

感谢每一个认真阅读我文章的人，礼尚往来总是要有的，虽然不是什么很值钱的东西，如果你用得到的话可以直接拿走：

 

这些资料，对于【软件测试】的朋友来说应该是最全面最完整的备战仓库，这个仓库也陪伴上万个测试工程师们走过最艰难的路程，希望也能帮助到你!有需要的小伙伴可以点击下方小卡片领取   

 

程序员威子
关注
实战：从 0 到 1 GitLab CI/CD 前端持续部署
知无涯
08-17 5888
文章目录写在前面服务器配置环境安装安装 Docker安装 GitLab测试 GitLabGitLab Runner前端项目 CI/CD 流程的设计正式开始编写 .gitlab-ci.yml 的内容介绍 .gitlab-ci.yml镜像的使用stages 执行顺序的定义job 内容的编写在 CI/CD 中使用 SSH keys前端项目部署到阿里云OSS前端项目 CI/CD 最佳业务配置思路常见问题排查及修复相关参考链接 写在前面 首先感谢大家能来参加我的 Chat，能来参加的同学都是想在业余有一些其他知识的
手把手教你构建一个web前端项目，全网最详细教程！
热门推荐
weixin_34146986的博客
03-01 1万+
为什么80%的码农都做不了架构师？>>> ...
jenkins自动化部署（前端）
qq_46751398的博客
10-13 2526
推送代码到仓库后，查看Jenkins是否有进行打包，有说明成功了。实现需要为服务器创建一个项目目录，目录位置随意，这里创建在根目录。如果项目为私有项目，需要添加一个用户，如果为账号密码，则输入。表示输出到某个文件夹并且命名为什么文件；端口，如果想配置在其它端口下，新增一个。的软件仓库包中的，所以需要连接。端口提供服务，所以需要加入到。配置即可，注意要开放端口号。中下载文件的一个工具，环境：成功配置后重启下。，所以需要先安装一下。下一个软件包管理器；
Jenkins部署前端服务
Beam
11-30 9246
一、Jenkins简介 官方说明： Jenkins是一个开源软件项目，是基于Java开发的一种持续集成工具，用于监控持续重复的工作，旨在提供一个开放易用的软件平台，使软件项目可以进行持续集成。 官网地址： https://www.jenkins.io/index.html 总之： 使用Jenkins，可以实现一键部署发布。 Jenkins从SVN拉取代码 > 部署至发布项目的服务器 > 并启动服务。代替人工运行buil命令打包 > 上传至服务器 > 重启服务。 二、安装Jenkins
Jenkins 部署前端代码
最新发布
大东码字
09-30 789
来自动化部署前端代码时，通常会将 Jenkins 配置为一个自动化流水线，当代码被推送到代码仓库时，Jenkins 会自动执行构建流程，并将前端代码打包后上传到阿里云 OSS 上，这里也可选择七牛云。供静态资源托管使用。阿里云官方提供了 OSS Jenkins 插件，你可以使用该插件自动将打包后的文件上传到阿里云 OSS。如果你不想使用 Jenkins 插件，也可以通过阿里云提供的命令行工具。目录），这个目录就是需要上传到阿里云 OSS 的内容。使用项目对应的打包命令（如 Vue 项目的。
Jenkins实现前端项目自动化构建
软件自动化测试技术交流、资源分享
07-22 1378
前端代码是通过Gitlab管理、通过npm编译，因此必须先安装Git以及搭建nodejs环境。
前端工程化：保姆级教学 Jenkins 部署前端项目
油墨香^-^的博客
07-19 1037
3，定义机器人名字和关键字，创建完成后先将。
【CICD】Jenkins 构建部署前端项目
就是有点怕怕的博客
02-13 1440
Git 推送代码，触发webhook;Jenkins 服务被触发，执行构建；Jenkins 通过 SSH 推送代码至服务器.
Tomcat前后端一体项目环境搭建教程
03-31
在IT行业中，构建一个从前端到后端的一体化项目环境是开发Web应用程序的重要环节。本教程将聚焦于使用Tomcat服务器作为Java后端的运行平台，并与前端进行集成，以实现完整的项目环境搭建。首先，我们需要理解Tomcat...
Jenkins持续集成与部署工具,打造全系列项目部署方案 (建议收藏)
Ghostbamboo的博客
12-15 2119
文章目录一 3w解析持续集成与部署工具Jenkins二 搭建Jenkins及工具配置1. 安装Jenkins2. 配置插件加速三 Jenkins部署后端项目1. 后端部署原理及插件应用1.配置SSH Server2. 配置全局工具(jdk、maven、git等)2.项目搭建详解1.创建项目2.构建项目进行启动四 Jenkins部署前端项目1. 前端部署原理及插件应用2. 前端项目搭建详解五 用户管理及权限分配1.下载权限扩展插件并进行相关配置2.新建用户并分配权限六 常见问题解析1.使用docker安装的J
jenkins自动部署vue前端项目
08-15
jenkins自动打包vue前后端分离项目，部署到远程服务器
jenkins前端构建
weixin_33897722的博客
09-28 77
nginx 安装yum install nginx //输入下载 or yum install epel-release //如果上一步安装失败 yum install nginx //再次下载 配置 Jenkins 安装 首先要先下载 java 依赖包 和 git yum install java yum install git 首先要先添加 Jenkins 源 wget...
Jenkins部署前端项目
weixin_45467931的博客
03-25 830
Jenkins自动打包部署前端项目到服务器，Send files or execute commands over SSH 配置远程服务器操作**，服务器项目nginx项目启动配置
jenkins自动构建前端项目(window,vue)
前端笔记
09-25 940
我们把一个多人协作的vue前端项目发布服务器，一般要经过以下步骤： git更新最新的代码 构建项目 把构建后的代码上传到服务器 如果用jenkins来构建的话，只需要点击一次构建按钮，就可以自动完成以上的步骤了，而且根据需求,可以实现更多的功能。 1.下载安装jenkin 1.1 java环境 jenkins需要运行在Java的环境中，所以前提是需要先安装jdk，测试jdk是否安装好，在命令行输入：java -version 1.2 下载jenkins 下载地址 jenkins下载 下载后点击安装，
【Jenkins】Jenkins构建前端流水线
山赶着山，山山漫漫结成关
07-18 1万+
Jenkins构建前端流水线
Docker中轻松搭建并配置Jenkins环境与Springboot自动部署
本文主要介绍了如何在Docker环境中安装和配置Jenkins，一个流行的持续集成和持续部署(CI/CD)工具。首先，通过Docker运行命令行来启动Jenkins服务，具体步骤如下： 1. 使用`docker run`命令创建一个名为`jenkins-...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值