前端项目自动化部署-Toy模板网

这篇具有很好参考价值的文章主要介绍了前端项目自动化部署。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

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

前端自动化部署,自动化,jenkins,git

一、Git仓库管理项目

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

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

前端自动化部署,自动化,jenkins,git

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

前端自动化部署,自动化,jenkins,git

二、购买云服务器

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

1、来到控制台

前端自动化部署,自动化,jenkins,git

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

前端自动化部署,自动化,jenkins,git

3、配置网络安全组

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

前端自动化部署,自动化,jenkins,git

4、确认订单创建实例

三、搭建服务器环境

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

前端自动化部署,自动化,jenkins,git

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

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

1.3 配置Jenkins

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

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

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

服务器终端：vi /etc/sysconfig/jenkins 前端自动化部署,自动化,jenkins,git

（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

前端自动化部署,自动化,jenkins,git

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版本

前端自动化部署,自动化,jenkins,git

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

3.1创建

前端自动化部署,自动化,jenkins,git

3.2 General

前端自动化部署,自动化,jenkins,git

3.3 源码管理

前端自动化部署,自动化,jenkins,git

3.4 构建触发器前端自动化部署,自动化,jenkins,git

定时构建说明：

#定时字符串从左往右分别是：分 时 日 月 周
#每半小时构建一次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 构建环境前端自动化部署,自动化,jenkins,git

3.6 构建步骤>执行shell 前端自动化部署,自动化,jenkins,git

脚本说明：

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、项目构建

前端自动化部署,自动化,jenkins,git