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

news2025/1/29 13:46:21

项目打包和自动化部署

一. 项目部署和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/

在这里插入图片描述

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

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

相关文章

基于SpringBoot + vue的在线视频教育平台

基于SpringBoot + vue的在线视频教育平台

qq（2829419543）获取源码 开发语言：Java Java开发工具：JDK1.8 后端框架：springboot 前端：采用vue技术开发 数据库：MySQL5.7和Navicat管理工具结合 服务器：Tomcat8.5 开发软件&#xf…
阅读更多...
优化你的计算机性能：如何根据 CPU 占用率决定硬件升级

优化你的计算机性能：如何根据 CPU 占用率决定硬件升级

优化你的计算机性能：如何根据 CPU 占用率决定硬件升级 一、引言二、CPU 占用率的意义与影响三、监测和评估 CPU 占用率四、判断硬件升级需求的依据五、硬件升级方案和建议六、总结 一、引言 计算机性能优化是提升计算机系统整体效能的过程，它对于用户和…
阅读更多...
etlbox.3.1.0 for NET 轻量级 ETL数据集成库 Crack

etlbox.3.1.0 for NET 轻量级 ETL数据集成库 Crack

适用于 .NET 的轻量级 ETL（提取、转换、加载）工具箱和数据集成库 高度可定制 厌倦了使用几乎不可能实现复杂需求的用户界面？使用 ETLBox，可以轻松编写适合您独特需求的代码。插入您自己的逻辑或修改现有行为以满足您的特定要求。 …
阅读更多...
数据库表的管理

数据库表的管理

表的基本概念 表是包含数据库中所有数据的数据库对象。数据在表中的组织方式与在电子表格中相似，都是 按行和列的格式组织的。每行代表一条唯一的记录，每列代表记录中的一个字段。例如，在包含公 司员工信息的表中，每行代表一名员工…
阅读更多...
VMware安装Debian12.2作为服务器（无桌面）

VMware安装Debian12.2作为服务器（无桌面）

[TOC]VMware安装Debian12.2作为服务器（无桌面） 下载Debian系统 官方网站：https://www.debian.org/index.zh-cn.html 创建新的虚拟机 打开VMware Workstation，点击创建新的虚拟机 向导虚拟机类型选择 一般我会选择典型&…
阅读更多...
UVA1368 DNA Consensus String

UVA1368 DNA Consensus String

DNA Consensus String The Hamming distance is the number of different characters at each position from two strings of equal length. For example, assume we are given the two strings “AGCAT” and “GGAAT.” The Hamming distance of these two strings is 2 bec…
阅读更多...
python 图书馆选座小程序源码

python 图书馆选座小程序源码

开发工具： PyCharm，mysql5.7，微信开发者工具 技术说明： python django html 小程序 功能介绍： 用户端： 登录注册（含授权登录） 首页显示搜索房间，轮播图&#xff0…
阅读更多...
[FC][常见Mapper IRQ研究]

[FC][常见Mapper IRQ研究]

本次IRQ研究了如下表所示Mapper的IRQ操作: 卡带名Mapper号VRC373VRC421,23,25VRC624 & 26VRC785MMC34MMC410MMC55Sunsoft FME-769Namco16319Jaleco SS 8800618RAMBO-164 共计11种Mapper的IRQ操作使用例子 代码内有详细注释, 希望能帮助到感兴趣的人. Mapper控制代码(MMC3…
阅读更多...
工业机器视觉megauging（向光有光）使用说明书（三，轻量级的visionpro）

工业机器视觉megauging（向光有光）使用说明书（三，轻量级的visionpro）

下来我们说说第二个相机的添加： 第一步，点击相机二，如下： 第二步，点击：加载工具组.xml，加载toolgroupxml2目录下的：工具组.xml 注意，一个相机只能用一个toolgroupxml,第…
阅读更多...
docker配置redis插件

docker配置redis插件

从页面上下载对应的redis.conf文件 放入redis下的conf文件夹，作为通用的conf文件。 将redis.conf文件拷贝到6390/conf文件夹下 [roothao /usr/local/software/redis/conf]# cp redis.conf /usr/local/software/redis/6390/conf配置6390的redis.conf文件 配置插件…
阅读更多...
云时空社会化商业 ERP 系统 service SQL 注入漏洞复现

云时空社会化商业 ERP 系统 service SQL 注入漏洞复现

0x01 产品简介 时空云社会化商业ERP（简称时空云ERP） ，该产品采用JAVA语言和Oracle数据库， 融合用友软件的先进管理理念，汇集各医药企业特色管理需求，通过规范各个流通环节从而提高企业竞争力、降低人员成本…
阅读更多...
[c]比较月亮大小

[c]比较月亮大小

本题的难点就是分情况讨论 #include<stdio.h> int main() {int n;scanf("%d",&n);int arr2[n];int p;for(int m0;m<n-1;m){scanf("%d",&arr2[m]);//输入n个数保存到数组}if(n1)//当输入一个数据时&#xff0c;输入0&#xff0c;可以判断…
阅读更多...
微信小程序 内置地图及打开外部地图导航

微信小程序 内置地图及打开外部地图导航

1. 微信小程序 内置地图及打开外部地图导航 1.1 说明 用户点击通过目的地经纬度打开地图展示坐标点&#xff0c;然后可以选择外部安装的地图app进行导航搜索。    scale“4” 缩放比例&#xff0c;缩放级别&#xff0c;取值范围为3-20。 1.2. wxml代码 <button type&qu…
阅读更多...
leetcode：225. 用队列实现栈

leetcode：225. 用队列实现栈

一、题目 链接&#xff1a;225. 用队列实现栈 - 力扣&#xff08;LeetCode&#xff09; 函数原型&#xff1a; typedef struct { } MyStack; MyStack* myStackCreate() void myStackPush(MyStack* obj, int x) int myStackPop(MyStack* obj) int myStackTop(MyStack* obj) …
阅读更多...
CMake构建工具

CMake构建工具

文章目录 CMake构建工具1.概念2.mk文件3.CmakeList4.预编译 CMake构建工具 1.概念 Android构建原始库的工具&#xff0c;对mk构建工具封装&#xff0c;还是makefile。 加载lib库 2.mk文件 //call调用test-dir这个方法&#xff0c;返回mk文件的路径&#xff0c;LOCAL_PATH这…
阅读更多...
计算机组成原理笔记——存储器（静态RAM和动态RAM的区别，动态RAM的刷新, ROM……）

计算机组成原理笔记——存储器（静态RAM和动态RAM的区别，动态RAM的刷新, ROM……）

■ 随机存取存储器 ■ 1.随机存取存储器&#xff1a;按存储信息的原理不同分为&#xff1a;静态RAM和动态RAM 2.静态RAM&#xff08;SRAM&#xff09;&#xff1a;用触发器工作原理存储信息&#xff0c;但电源掉电时&#xff0c;存储信息会丢失具有易失性。 3.存储器的基本单元…
阅读更多...
C#网络编程（System.Net命名空间和System.Net.Sockets命名空间）

C#网络编程（System.Net命名空间和System.Net.Sockets命名空间）

目录 一、System.Net命名空间 1.Dns类 &#xff08;1&#xff09;示例源码 &#xff08;2&#xff09;生成效果 2.IPAddress类 &#xff08;1&#xff09;示例源码 &#xff08;2&#xff09;生成效果 3.IPEndPoint类 &#xff08;1&#xff09; 示例源码 &#xff0…
阅读更多...
五、ZooKeeper的shell操作

五、ZooKeeper的shell操作

目录 1、客户端连接 2、shell基本操作 2.1 操作命令
阅读更多...
分享一个判断曲线的趋势的Demo

分享一个判断曲线的趋势的Demo

需求背景 最近在处理数据&#xff0c;横坐标是时间&#xff0c;纵坐标是价格&#xff0c;需要判断一段时间内&#xff0c;由这些点绘制成的曲线的走势&#xff0c;比如趋势朝上&#xff0c;趋势朝下&#xff0c;水平调整这三种趋势。尝试了不少方法&#xff0c;下面这个效果还…
阅读更多...
数据结构算法-冒泡排序算法

数据结构算法-冒泡排序算法

引言 虽然选择排序好用 &#xff0c;但有点问题 也就是频繁找最大值下标 放到 未排序的后面 因为每次需要扫描整个未排序序列&#xff0c;找到最大值或最小值的下标&#xff0c;并将其交换到未排序序列的最后一个位置。这样做的问题在于&#xff0c;在后面的迭代中&#xff0c…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023