Jenkins+Nginx 实现前端自动化部署

822 阅读3分钟

前言

基于一台云服务器上部署jenkins可以从git上自动拉取代码构建,以nginx实现反向代理访问构建成功的静态资源,实现将代码由git自动打包发布的过程。

安装Jenkins

进入到 www.jenkins.io/ jenkins官网下载安装包

可以选择中文页面,点击进去下载界面。

选择以前的发行版本。

当前页面目录下展示的是Windows的安装包。我们点击Parent Directory 进入总目录。

根据官网推荐linux  CentOS 选择redhat 红帽版本。我下载的是jenkins-2.355-1.1.noarch.rpm 版本。

将安装包上传至linux服务器。执行解压安装命令:

rpm -ivh jenkins-2.355-1.1.noarch.rpm

接下来还需要修改一下配置:

​vim /etc/init.d/jenkins

 将最后一行修改为当前jdk安装的真实路径

修改jenkins配置

vim /etc/sysconfig/jenkins

修改jenkins的用户名为root。jenkins默认端口为8080,为防止冲突建议修改。

#重新加载服务配置文件
systemctl daemon-reload
##启动jenkins
systemctl start jenkinsr

然后访问服务地址:http://服务器IP : 端口 会出现下面页面:

根据提示执行 cat /var/lib/jenkins/secrets/initialAdminPassword 获取密码进入jenkins界面。然后会提示设置第一个管理员账号,然后选择安装推荐的插件

点击进入系统管理插件管理

在可选插件中搜索**node ** 并选择直接安装。

安装完毕之后返回到系统管理,点击进入插件管理旁边的全局工具配置

拉到下面点击 新增NodeJS 选择一个node版本后保存。

接下来就是创建配置一个jenkins项目了。

点击新建项目,输入项目名字,选择 下面第一个类型

添加项目描述和git地址。

服务器上若是没有git可以执行dnf install git 安装。

git下的指定分支就按照代码仓库中的分支  */master 或 */main 填写。

构建触发器选择定时构建 H/30 * * * *  表示每10分钟构建一次。

构建环境选择上面我们配置过的 node

添加构建时执行的shell命令。

npm install 
npm run build

rm -rf /home/project/* 
cp -rf ./build/* /home/project/

保存后返回项目页面。点击立即构建,jenkins就会自动拉取git代码进行构建了。

每次的构建我们都可以点进去查看控制台输出,以此可以查看构建的过程,排查问题。

安装Nginx

#安装nginx
yum install nginx
# 查看版本
nginx -v
#查看配置
nginx -t

编辑nginx配置文件

cd /etc/nginx
#编辑配置
vim nginx.conf

添加 location 匹配到我们指定的文件夹目录下,就是通过jenkins构建出的静态文件目录。

#启动
nginx -s start
#停止
nginx -s stop
#重启
nginx -s reload 

启动或者重启nginx。

结尾

这样从git代码到jenkins构建打包,再由nginx代理发布,这一整套前端自动化部署就全部打通了。