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

news/2024/5/17 17:48:24 标签: 自动化, jenkins, gitee

项目打包和自动化部署

一. 项目部署和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以下版本。

jenkins_90">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_144">安装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.niftyadmin.cn/n/5234114.html

相关文章

RHCSA学习笔记(RHEL8) - Part1.RH124

RHCSA学习笔记(RHEL8) - Part1.RH124

Chapter Ⅰ 入门 - Linux 开源系统，命令行，模块化（软件包的形势） - Windows 闭源Linux是类UNIX系统，mac系统也是类UNIX系统，所以二者的图形化界面比较相似 开源许可证：公共版权；宽…
阅读更多...
力扣二叉树--第三十四天

力扣二叉树--第三十四天

前言 今天是构建二叉树和处理两个二叉树的问题。重点：单调栈的思想，后续模块会专门刷题。 内容 一、最大二叉树 654. 最大二叉树 给定一个不重复的整数数组 nums 。 最大二叉树 可以用下面的算法从 nums 递归地构建: 创建一个根节点，其…
阅读更多...
C++学习之路（十五）C++ 用Qt5实现一个工具箱（增加16进制颜色码转换和屏幕颜色提取功能）- 示例代码拆分讲解

C++学习之路（十五）C++ 用Qt5实现一个工具箱（增加16进制颜色码转换和屏幕颜色提取功能）- 示例代码拆分讲解

上篇文章，我们用 Qt5 实现了在小工具箱中添加了《Base64图片编码预览功能》功能。为了继续丰富我们的工具箱，今天我们就再增加两个平时经常用到的功能吧，就是「 16进制颜色码转RGB文本 」和 「屏幕颜色提取」功能。下面我们就来看看如何来规划…
阅读更多...
[足式机器人]Part4 南科大高等机器人控制课 Ch00 课程简介

[足式机器人]Part4 南科大高等机器人控制课 Ch00 课程简介

本文仅供学习使用 本文参考： B站：CLEAR_LAB 南科大高等机器人控制课 Ch00 课程简介 1. What is this course about?2. Tentative Schedule暂定时间表 1. What is this course about? Develop a solid foundation in robot modeling and control to co…
阅读更多...
数据结构第7次练习-图（基础篇）

数据结构第7次练习-图（基础篇）

一：判断题 1-1 答案：T 解析：c到a的最短路径是12214，所以是大于10的 1-2 答案：T 一个连通分量要进行一次广度优先搜索 1-3 答案：F 解析：是存在等于顶点的个数减一的情况，比如三个顶点…
阅读更多...
Mover Creator--功能简介

Mover Creator--功能简介

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

Python中的加法测试题实现

随机生成5道10以内的加法测试题，用户在10秒内使用键盘输入答案。完成全部5道答题之后，计算机生成答题记录报告，并对答题情况进行分析，显示“答对了”，或“答错了”、并显示正确答案。如果未能按时完成，则显…
阅读更多...
什么是Ros（一）- 名词解释和架构概述

什么是Ros（一）- 名词解释和架构概述

目录 1.概述 2.名词解释 2.1节点（Node） 2.2节点管理器（Master） 2.3消息（Message） 2.4话题（Topic） 2.5服务（Service） 2.6动作（Action&#…
阅读更多...
最新文章

Copyright @ 2022~2023