当前位置: article > 正文

前端项目自动化部署_前端自动化部署

作者：笔触狂放9 | 2024-07-31 17:24:11

踩

前端自动化部署

一、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文件夹，下面有

我这里是：sudo chown -R jenkins /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端口），就可以在客户端访问部署在服务器的项目了