前端项目打包和自动化部署(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/