前端项目打包和自动化部署(jenkins+gitee+nginx)

项目打包和自动化部署

一. 项目部署和DevOps

1. 传统的开发模式

在传统的开发模式中，开发的整个过程是按部就班就行：

在这里插入图片描述

但是这种模式存在很大的弊端：

  • 工作的不协调：开发人员在开发阶段，测试和运维人员其实是处于等待的状态。等到测试阶段，开发人员等待测试反馈bug，也会处于等待状态。
  • 线上bug的隐患：项目准备交付时，突然出现了bug，所有人员需要加班、等待问题的处理；

2. DevOps开发模式

DevOps是Development和Operations两个词的结合，将开发和运维结合起来的模式：

在这里插入图片描述

在这里插入图片描述

3. 持续集成和持续交付

伴随着DevOps一起出现的两个词就是持续集成和持续交付(部署)：

  • CI是Continuous Integration（持续集成）；
  • CD是两种翻译：Continuous Delivery（持续交付）或Continuous Deployment（持续部署）；

持续集成CI：

在这里插入图片描述

持续交付和持续部署：

在这里插入图片描述

在这里插入图片描述

4. 自动化部署流程

在这里插入图片描述

二.搭建服务器环境

约定：本文使用的版本是OpenCloudOS 8.6（OpenCloudOS 8版本兼容 CentOS 8），java环境是openjdk 11.0.19
注意：

  • CentOS 7环境下node爆出如下错误

    node: /lib64/libm.so.6: version `GLIBC_2.27' not found (required by node)
node: /lib64/libc.so.6: version `GLIBC_2.25' not found (required by node)

    原因：CentOS低版本系统的 GLIBC 版本过低

    我们再查看 ldd 版本

    # ldd --version
ldd (GNU libc) 2.17
Copyright (C) 2012 Free Software Foundation, Inc.
This is free software; see the source for copying conditions.  There is NO
warranty; not even for MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
Written by Roland McGrath and Ulrich Drepper.

    我们发现系统中 GLIBC 版本仅为 17，而报错中显示我们缺失，25，27，28。而 GLIBC是向下兼容的，安装高版本的同时会安装低版本，所以我们只需要安装 GLIBC_2.28 即可。

    注意：如果有条件的话可以直接升级系统 CentOS 8，可以有效解决问题

  • jenkins将在2023年底不支持centos8以下版本。

1.jenkins自动化部署

安装java环境

注意jenkins版本对应支持的java版本

2.419 (August 2023) and newer

Java 11, Java 17, or Java 21

2.357 (June 2022) and newer

Java 11 or Java 17

2.164 (February 2019) and newer

Java 8 or Java 11

通过yum安装JDK

安装步骤

查看云端支持安装的jdk版本

yum search java | grep jdk

安装jdk（以下命令自动安装jdk相关依赖）

yum install -y java-11-openjdk

查看jdk版本，验证是否安装成功

java -version

安装git

使用 yum 安装 git，

yum -y install git

安装完成后，查看版本

git --version

安装jenkins

添加Jenkins镜像源

wget -O /etc/yum.repos.d/jenkins.repo https://pkg.jenkins.io/redhat-stable/jenkins.repo

如果出现报错：

ERROR: cannot verify pkg.jenkins.io’s certificate, issued by ‘/C=US/O=Let’s Encrypt/CN=R3’:
Issued certificate has expired.

解决：

sudo yum install -y ca-certificates

ca-certificates 起到了保障 SSL/TLS 连接安全的作用。在 Linux 系统中，安装 ca-certificates 软件包是非常重要的，因为它提供了一组可信任的根证书和中间证书，使得用户可以安全地与各种服务器通信。

导入公钥

rpm --import https://pkg.jenkins.io/redhat-stable/jenkins.io-2023.key

升级yum

yum upgrade

安装Jenkins 依赖包

yum install fontconfig java-17-openjdk

安装Jenkins

 yum install -y jenkins

启动Jenkins的服务：

systemctl start jenkins
systemctl status jenkins
systemctl enable jenkins

Jenkins默认使用8080端口提供服务，所以需要加入到安全组中：

在这里插入图片描述

Jenkins用户

我们后面会访问centos中的某些文件夹，默认Jenkins使用的用户是 jenkins，可能会没有访问权限，所以我们需要修改一下它的用户：

vim /usr/lib/systemd/system/jenkins.service

User=root
Group=root

修改jenkins_home 目录的用户和用户组

chown -R root:root /var/lib/jenkins

之后需要重启一下Jenkins：

systemctl restart jenkins

Jenkins配置

打开浏览器，输入：http://101.34.248.81:8080/

  • 注意：你输入自己的IP地址

问题

Jenkins卡首次界面Your browser will reload automatically when Jenkins is ready.

问题分析

可能原因是： 因为屏蔽导致的访问官网太慢。我们只需要换一个源，不使用官网的源即可。

问题解决

找到jenkins工作目录，打开文件hudson.model.UpdateCenter.xml

vim /var/lib/jenkins/hudson.model.UpdateCenter.xml

将 URL 改为https://mirrors.tuna.tsinghua.edu.cn/jenkins/updates/update-center.json

都需要重启Jenkins后解决

获取输入管理员密码：

  • 在下面的地址中 cat /var/lib/jenkins/secrets/initialAdminPassword

在这里插入图片描述

可以安装推荐的插件：

在这里插入图片描述

Jenkins任务

新建任务：

在这里插入图片描述

在这里插入图片描述

配置项目和保留策略：

在这里插入图片描述

源码管理：

在这里插入图片描述

构建触发器：

这里的触发器规则是这样的：

  • 定时字符串从左往右分别是：分 时 日 月 周
#每半小时构建一次OR每半小时检查一次远程代码分支，有更新则构建
H/30 * * * *

#每两小时构建一次OR每两小时检查一次远程代码分支，有更新则构建
H H/2 * * *

#每天凌晨两点定时构建
H 2 * * *

#每月15号执行构建
H H 15 * *

#工作日，上午9点整执行
H 9 * * 1-5

#每周1,3,5，从8:30开始，截止19:30，每4小时30分构建一次
H/30 8-20/4 * * 1,3,5

在这里插入图片描述

构建环境：

注意：我们需要搭建Node的环境

  • 第一步：安装Node的插件；
  • 第二步：配置Node的环境；

在这里插入图片描述

第一步：插件管理中安装Node的插件

这里因为我已经安装过了，所以没有搜索到；

在这里插入图片描述
第二步：全局工具配置中配置Node的环境

在这里插入图片描述

在配置中选择刚刚安装的环境

在这里插入图片描述

构建执行的任务：

在这里插入图片描述

  • 查看Node的版本等是否有问题；
  • 执行 npm install 安装项目的依赖；
  • 移除原来/root/consult-patient-vue3/文件的所有内容；
  • 将打包的dist文件夹内容移动到/root/consult-patient-vue3/文件夹；
#!/bin/bash
pwd
node -v
npm -v

npm install 
npm run build

pwd

echo '构建成功'

ls

# 删除/root/consult-patient-vue3/文件夹里所有的内容
rm -rf /root/consult-patient-vue3/* 

cp -rf ./dist/* /root/consult-patient-vue3/

2. nginx安装和配置

安装nginx

1、添加Nginx源

第一种方式: 需要先安装epel-release 因为Nginx并不在官方的yum源中,需要第三方的yum源

#我们在Centos下使用yum安装时往往找不到rpm的情况，官方的rpm repository提供的rpm包也不够丰富，
#很多时候需要自己编译很痛苦，而EPEL恰恰可以解决这两方面的问题
yum -y install epel-release
 
#更新yum源
yum -y update

第二种方式: Nginx官网提供了Centos的源地址，可以如下执行命令添加源

rpm -Uvh http://nginx.org/packages/centos/7/noarch/RPMS/nginx-release-centos-7-0.el7.ngx.noarch.rpm

2、 安装Nginx

 yum install -y nginx

3、验证nginx安装是否成功

 #查看nginx安装版本，-V可以看到nginx的安装的文件路径
 nginx -V 
 
 # 查看安装的nginx的版本
 rpm -qa | grep nginx

4、Nginx启动、设置开机自启、查看运行状态、停止命令

systemctl start nginx
systemctl enable nginx
systemctl status nginx
systemctl stop nginx

5、相关文件路径

①配置文件路径

#编辑Nginx配置文件
vim /etc/nginx/nginx.conf
 
#检测配置文件语法是否正确
nginx -t
 
#重新加载Nginx配置
nginx -s reload

Nginx默认配置文件(Nginx 1.20.1)

在这里插入图片描述

②日志路径

/var/log/nginx

配置nginx

我们这里主要配置nginx的用户和默认访问目录：

配置用户：

在这里插入图片描述

通过Linux命令创建文件夹和文件：

mkdir /root/consult-patient-vue3
cd /root/consult-patient-vue3
touch index.html

vim index.html

配置访问目录：

在这里插入图片描述

此时访问

http://101.34.248.81/

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

【MOJO】Modular语言安装和测试

【MOJO】Modular语言安装和测试

目录 一、Mojo介绍 Linux​ Mac 二、安装Mojo SDK 三、mojo代码测试 3.1、在 REPL 中运行代码​ 3.2、构建并运行 Mojo 源文件​ 运行mojo文件​ 构建可执行二进制文件​ 四、VSCode安装 一、Mojo介绍 在学习Rust语言的过程中无意发现了Modular语言，语言…
阅读更多...
WIN10 WIN11 关闭更新的绝佳办法（极简单无副作用）

WIN10 WIN11 关闭更新的绝佳办法（极简单无副作用）

WIN10 WIN11 关闭更新的绝佳办法（极简单无副作用） 极其简单用实用可以关闭更新20年 winr，输入regedit 打开注册表打开注册表的这个路径： 计算机\HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\WindowsUpdate\UX\Settings 右键空白的地方…
阅读更多...
智慧用电安全动态监控系统

智慧用电安全动态监控系统

智慧用电安全动态监控系统是一种先进的电力监控技术系统，它运用物联网、大数据、云计算等先进技术，对电力系统的运行状况进行实时监控和预警。 该系统依托电易云-智慧电力物联网，通过智能传感终端采集电气线路的实时运行数据，客户…
阅读更多...
也可Adobe Animate

也可Adobe Animate

Animate CC 由原Adobe Flash Professional CC 更名得来，2015年12月2日：Adobe 宣布Flash Professional更名为Animate CC，在支持Flash SWF文件的基础上，加入了对HTML5的支持。并在2016年1月份发布新版本的时候，正式更名为…
阅读更多...
数学字体 Mathematical fonts

数学字体 Mathematical fonts

Mathematical fonts 数学字体： ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyzRQSZ \\ \mathcal{ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyzRQSZ} \\ \mathfrak{ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyzRQSZ} \\ \mathbb{ABC…
阅读更多...
分类详情 API 返回值说明

分类详情 API 返回值说明

为了进行此平台API的调用，首先我们需要做下面几件事情。 1、 获取一个KEY，点击获取测试key和secret 2、 参考API文档里的接入方式和示例。 3、查看测试工具是否有需要的接口，响应实例的返回字段是否符合参数要求。 4、利用平台的文档中心…
阅读更多...
Go读取yaml文件，struct返回，json输出

Go读取yaml文件，struct返回，json输出

程序模块中，缺少不了一些配置定义，这时定义yaml是个很好的选择 先定义yaml文件内容，文件名为：task_status_config.yaml confs:#阅读类任务，即提醒任务read:name: readawait: #待开始任务status_id: 0ing: #进行中任务…
阅读更多...
GANVAEDiffusion

GANVAEDiffusion

数学基础 KL散度 描绘一个分布p和另一个分布q之间的偏离程度 当 p ( x ) q ( x ) p(x)q(x) p(x)q(x)时散度取得最小值 JS散度 另一种衡量两个概率分布相似性的方法 GAN 需要训练两个网络；损失来回波动，不好分辨，不容易收敛&#xff…
阅读更多...
〖大前端 - 基础入门三大核心之JS篇㊸〗- DOM事件对象的方法

〖大前端 - 基础入门三大核心之JS篇㊸〗- DOM事件对象的方法

说明：该文属于 大前端全栈架构白宝书专栏，目前阶段免费，如需要项目实战或者是体系化资源，文末名片加V！作者：不渴望力量的哈士奇(哈哥)，十余年工作经验, 从事过全栈研发、产品经理等工作&#xf…
阅读更多...
个人成长|实现财务自由的秘诀，在这8句话里

个人成长|实现财务自由的秘诀，在这8句话里

哈喽啊，我是雷工！ 有人说，当今社会阶层跃迁的通道已经被堵死了，要想从普通人跨越阶级发家致富根本不可能。 也有人认为，只要踩住时代的风口，吃到时代的红利，成为百万富翁的速度会非常快。 我觉…
阅读更多...
【源码篇】基于SpringBoot+Vue实现的在线考试系统

【源码篇】基于SpringBoot+Vue实现的在线考试系统

文章目录 系统说明技术选型成果展示账号地址及其他说明 系统说明 基于SpringBootVue实现的在线考试系统是为高校打造的一款在线考试平台。 系统功能说明 1、系统共有管理员、老师、学生三个角色，管理员拥有系统最高权限。 2、老师拥有考试管理、题库管理、成绩管…
阅读更多...
java+springboot物资连锁仓库经营商业管理系统+jsp

java+springboot物资连锁仓库经营商业管理系统+jsp

主要任务：通过网络搜集与本课题相关的素材资料，认真分析连锁经营商业管理系统的可行性和要实现的功能，做好需求分析，确定该系统的主要功能模块，依据数据库设计的原则对数据库进行设计。最后通过编码实现本系统功能并测…
阅读更多...
linux如何杀死进程_kill

linux如何杀死进程_kill

使用信号控制进程：kill kill 可将指定的信息送至程序。 一般地，kill 命令用于删除执行中的程序或工作。在系统运行期间，若发生了如下情况，就需要将这些进程杀死。 进程展会用了过多的CPU时间 进程锁住了一个终端，是其…
阅读更多...
每天五分钟计算机视觉：AlexNet网络的结构特点

每天五分钟计算机视觉：AlexNet网络的结构特点

本文重点 在前面的一篇文章中，我们对AlexNet网络模型的参数进行了详细的介绍，本文对其网络模型的特点进行总结。 特点 1、AlexNet的网络结构比LeNet5更深，模型包括5个卷积层和3个全连接层。参数总量大概为249MB。 2、Alex使用了ReLu激活函…
阅读更多...
Java(十)(网络编程,UDP,TCP)

Java(十)(网络编程,UDP,TCP)

目录 网络编程 两种软件架构 网络通信的三要素 IP IPv4的地址分类 特殊IP 端口号 协议 用UDP协议发送数据 用UDP接收数据 TCP接收和发送数据 TCP通信--支持与多个客户端同时通信 网络编程 可以让设备中的程序与网络上其他设备的程序进行数据交互(实现网络通信) 两…
阅读更多...
2023年12月4日支付宝蚂蚁庄园小课堂小鸡宝宝考考你今日正确答案是什么？

2023年12月4日支付宝蚂蚁庄园小课堂小鸡宝宝考考你今日正确答案是什么？

问题：你知道电杆上安装的“小风车”有什么用途吗？ 答案：防止鸟类筑巢 解析：小风车一般做成橙色，因为橙色是一种可令野鸟产生恐慌感的颜色；小风车在转动时，会发出令野鸟害怕的噪声；…
阅读更多...
深入理解Servlet(下)

深入理解Servlet(下)

作者简介：大家好，我是smart哥，前中兴通讯、美团架构师，现某互联网公司CTO 联系qq：184480602，加我进群，大家一起学习，一起进步，一起对抗互联网寒冬 在这一篇文章里&#x…
阅读更多...
HTML简介

HTML简介

1，网页 网页的相关概念 1.1，什么是网页？ 网页是构成网站的基本元素，它通常由图片，链接，文字，声音，视频等元素组成。其实就是一个常见以.htm或.html后缀结尾的文件，因此…
阅读更多...
鸿蒙是Android套壳么，当然不是，ArkTS还是很有意思的

鸿蒙是Android套壳么，当然不是，ArkTS还是很有意思的

前段时间看新闻，说是明年开始鸿蒙就要和andorid脱钩了。 大概就是这样的： 看到这个，我兴趣就来了。我有个华为P30，升级过鸿蒙系统，用起来也没啥变化，兼容andorid应用，然后就是开机去掉了Powere…
阅读更多...
Mover Creator--功能简介

Mover Creator--功能简介

Mover Creator是一款AFSIM软件工具，提供方便易用的基于GUI的应用程序，帮助用户创建用于空中运动器的AFSIM输入文件，包括WSF_P6DOF_MOVER和WSF_GUIDED_MOVER。使用自定义定义的基于图形的模型定义，用户可以对飞机、武器和发动机进行…
阅读更多...
最新文章

Copyright @ 2022~2023