Jenkins上下级项目自动关联 jenkins自动部署前端项目

一、Git仓库管理项目
二、购买云服务器
三、搭建服务器环境（重点）
四、Jenkins进行自动化部署（重点）

提示：本地项目自动化部署流程，如下图

一、Git仓库管理项目

Git的安装和配置在这里就不做说明了

1、首先在Git仓库中创建一个仓库，用来保存本地项目，这里使用Gitee

 

2、 按照上图指示，在本地项目的目录下使用终端将项目push到Git仓库中，如下：

二、购买云服务器

至于服务器使用阿里云、腾讯云、华为云等都可以，看自己的需求，以阿里云为例，要提前注册阿里云账号

1、来到控制台

 

2、创建实例选择类型和配置，根据个人需求来

 

 3、配置网络安全组

这一步在配置安全组事，除了默认的访问端口，另要放开8080端口，jenkins默认访问8080端口

 4、确认订单创建实例

三、搭建服务器环境

先启动服务器并进行远程连接

 

1、Jenkins安装和配置

        1.1 安装Java环境：Jenkins本身是依赖Java的，所以我们需要先安装Java环境

        a、首先查看dnf软件仓库有哪些Java版本，这里安装Java17版本

dnf search java
dnf install java-17-openjdk

         1.2 安装Jenkins

          a、Jenkins本身是没有在dnf的软件仓库包中的，所以我们需要连接Jenkins仓库

#wget是Linux中下载文件的一个工具，-O表示输出到某个文件夹并且命名为什么文件；
#rpm：全称为The RPM Package Manage，是Linux下一个软件包管理器；
wget –O /etc/yum.repos.d/jenkins.repo http://pkg.jenkins-ci.org/redhat-stable/jenkins.repo 

#导入GPG密钥以确保您的软件合法
rpm --import https://pkg.jenkins.io/redhat/jenkins.io.key
 
#或者
rpm --import http://pkg.jenkins-ci.org/redhat/jenkins-ci.org.key

        b、编辑一下文件 /etc/yum.repos.d/jenkins.repo 

        在服务器终端，通过vim编辑：

        （1）vi /etc/yum.repos.d/jenkins.repo ，将下面内容复制进去

        （2）按i 进行编辑，按esc退出编辑

        （3）:wq保存并且退出

[jenkins]
name=Jenkins-stable 
baseurl=http://pkg.jenkins.io/redhat 
gpgcheck=1

        c、安装Jenkins，并启动Jenkins

#安装
dnf install jenkins  --nogpgcheck

#启动Jenkins服务
systemctl start jenkins #启动
systemctl status jenkins #查看状态
systemctl enable jenkins #开机自启动

        1.3 配置Jenkins

        Jenkins默认使用的用户是jenkins，而我们是root用户，导致我们可能在Jenkins中构建时没有访问服务器中文件夹的权限，需进行修改

        有三种方法，建议从上往下试，不同环境解决方法不同

      （1）修改/etc/sysconfig/jenkins中的JENKINS_UER="jenkins"为"root"

               服务器终端：vi /etc/sysconfig/jenkins                 

        （2）将Jenkins添加到root组中：sudo usermod -a -G root jenkins

        （3）给Jenkins目录权限：sudo chown -R jenkins /XXX/XXX

注意：是自己在服务器中创建的文件夹，我在root目录下创建mall_cms文件夹，下面有

/root/mall_cms

           配置完需要重启Jenkins

2、Nginx安装和配置

     2.1 安装nginx，启动nginx

#安装
dnf install nginx

#启动
systemctl start nginx #启动
systemctl status nginx #查看状态
systemctl enable nginx #开机自启动

      2.2 配置nginx的默认用户和访问目录，首先需要创建目录用来存放项目打包文件

             例如：mkdir mall_cms 在root文件夹下创建mall_cms文件夹

             配置用户和访问目录，服务器终端：vi /etc/nginx/nginx.conf 

            

server {
        listen       80;#Nginx默认端口，根据需要改为自己的
        listen       [::]:80;
        server_name  _;
        # root         /usr/share/nginx/html;
        
        # Load configuration files for the default server block.
        include /etc/nginx/default.d/*.conf;
        location / {
            root /root/mall_cms;#访问创建目录
            index index.html;#访问打包文件的index.html
        }

        error_page 404 /404.html;
        location = /404.html {
        }

        error_page 500 502 503 504 /50x.html;
        location = /50x.html {
        }
    }

3、安装Git，在jenkins中进行构建时，需要使用Git连接Git仓库

dnf install git

四、Jenkins进行自动化部署

        登录Jenkins进行配置和部署，访问地址：服务器IP地址:8080 (注：Jenkins默认访问端口为8080)

1、浏览器登录，首次需要在服务器终端输入下面命令，获取管理员密码，然后安装推荐的插件

cat /var/lib/jenkins/secrets/initialAdminPassword

2、首次需要搭建node环境

        2.1 安装node：Manage Jenkins>Manage Plugins>Available plugins,搜索nodeJs，然后进行安装,选择安装后重启Jenkins

        2.2 配置node：系统管理>全局工具配置>NodeJs,尽量选择稳定的node版本，这里选择16.18.1版本

 3、新建任务 ，进行任务配置    

        3.1创建

        

        3.2 General

        3.3 源码管理

         3.4 构建触发器

定时构建说明：

#定时字符串从左往右分别是：分 时 日 月 周
#每半小时构建一次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

        3.5 构建环境

         

        3.6 构建步骤>执行shell

脚本说明：

pwd 
node -v #查看Node的版本等是否有问题
npm -v 
npm install #安装依赖
npm run build #项目打包  注：此处我在项目配置文件设置的打包路径是/dist
pwd 
echo '构建成功'
ls 

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

#将打包的dist文件夹内容移动到mall_cms文件夹  注：./dist目录下存放打包后的文件
cp -rf ./dist/* /root/mall_cms/

 4、项目构建

5、客户端进行访问

        在浏览器中，输入服务器IP地址或者服务器IP地址:80（nginx中已设置默认访问80端口），就可以在客户端访问部署在服务器的项目了