0. 前言
我们在开发一个新的项目时,总是需要将前端部署到测试服务器上,给测试或者产品访问.简单的来说,如果想部署前端到服务器,服务器需要提供一个服务来访问前端.如果我们在开发中没有涉及Node.js
,那我们需要服务器提供一个服务来访问前端,可能是IIS
服务,Nginx
服务亦或Tomcat
服务,不论部署到哪里,当前端代码频繁更新时(尤其开发阶段),我们需要不停的打包去替换服务器上的代码.可能由运维帮我们替换,也可能是我们自己通过ftp
的方式进行替换.总之,这种方式会比较繁琐.
前端自动化部署,我们可能也常常听说,通过Jenkins
和gitlab
仓库打通,当我们的仓库代码指定的分支push
后,会自动触发Jenkins
的任务. 通过Jenkins
任务,我们可以自动更新最新的前端代码,并且通过脚本在服务器上将代码自动打包,并更新Nginx
指定的目录中,并重启Nginx
服务.来达到前端自动化部署的目的.
接下来的,是一场从0到1进行前端自动化部署的全过程,期间也是一步一个坑,记录下来,供大家参考,互相学习.可能有一些不完美或者错误的地方,也欢迎大家指正.
本人的开发系统为windows
,测试服务器为centos
,Mac
系统上可能有不同的工具或者操作,代码仓库放在gitlab
中,对于比如GitHub
或者码云
等平台,一些配置方式也不尽相同,请大家自行判断.
本篇文章目标群体:初中级前端开发
1. 准备工作
终端工具
本人是Windows开发环境,所以选择了MobaXterm作为操作centos的终端,目前windows中也有比较多的终端工具,比如SecureCRT、Xshell、Putty等,有些需要付费,看个人爱好MobaXterm可选免费版本
Linux centOs服务器一个
gitlab存放vue项目仓库
2. 安装环境
安装Java环境
Jenkins是开源的,使用Java编写的持续集成的工具,因此安装之前需要先安装Java
查看系统是否已安装java环境
java -version
若能查找到,则跳过安装Java这一步
安装Java
yum install java
安装Jenkins
下载依赖sudo wget -O /etc/yum.repos.d/jenkins.repo https://pkg.jenkins.io/redhat-stable/jenkins.repo
导入秘钥
sudo rpm --import https://pkg.jenkins.io/redhat-stable/jenkins.io.key
安装
yum install jenkins
安装完毕,Jenkins的默认端口8080
如果端口冲突,可以修改端口
vim /etc/sysconfig/jenkins
找到JENKINS_PORT="8080"
修改
vim修改端口简单命令:
通过↑↓
健将光标移动到需要修改的行按i
进入编辑模式修改之后按Esc
退出编辑模式按:wq
进行保存并退出修完完毕
3. 配置Jenkins
启动Jenkins
service jenkins start
重启/停掉Jenkins命令将start
换restart
|stop
即可
查看状态
systemctl status jenkins
出现active running
表示成功
访问地址
http://[centos服务地址]:[Jenkins端口,默认8080]
在终端获取Jenkins密码
cat /var/lib/jenkins/secrets/initialAdminPassword
获取到密码 填到上面的页面中->继续
选推荐的插件进下一步
安装完毕后,创建管理员用户
至此,Jenkins已经安装完毕
安装插件
Manage Jenkins -> Manage Plgins
安装Generic Webhook Trigger
插件 实现Jenkins+WebHooks持续集成
安装完成后需要重新启动Jenkins服务
创建任务
此报错是因为我们的centos系统上没有安装git
安装git
在centos系统中通过命令安装git
[root@localhost /]# gitbash: git: command not found...Install package 'git-core' to provide command 'git'? [N/y] n[root@localhost /]# y
然后就可以自动帮你安装git了~
配置git权鉴
安装完git之后 还是会报错 提示权鉴失败
需要配置git的用户信息[你的git用户名,密码]
指定git分支(当该分支有push操作时,会触发当前的Jenkins任务)
配置构建触发器
我们刚才已经在Jenkins中安装过Generic Webhook Trigger
插件
我们在构建触发器中选择Generic Webhook Trigger
选项,将Jenkins和gitlab配合起来
Jenkins设置API Token
Manage Jenkins --> Manage Users–>选择用户–>设置–>新增Token
复制生成的token
配置gitlab hook
登录gitlab进入你要部署的项目>settings>Integrations>add webhook
保存之后 可以测试配置是否生效
选择Test->Push envents 如果提示successfully
说明配置正常
这时 Jenkins任务里也会添加了一条构建记录
安装Node
我们在git拉完代码需要通过npm install
来安装包 所以在此配置之前 我们还需要在centos
系统上安装Node
Jenkins配置构建
目前为止,当我们push
代码后,Jenkins
会自动将最新代码pull
到centos
中,接下来我们需要在代码中执行npm install
安装所以依赖,然后再对项目进行npm build
打包
在Jenkins
配置中,增加构建步骤
选Execute shell
通过shell
命令来进行操作
在命令框中执行如下脚本
echo '构建的版本号:'${BUILD_NUMBER}# 每次更新代码需要安装依赖包 防止package.json更新npm install# build命令npm run buildecho '构建完成'
然后保存之后 我们push
一下代码 验证一下
任务构建成功之后 工作空间里多了node_modules
dist
文件夹 说明我们的脚步执行成功
我们在centos的/var/lib/jenkins/workspace/
可以找到我们从git上clone的代码
记住这个路径
/var/lib/jenkins/workspace/
4. 安装Nginx
目前代码已经推到centos
中,现在就需要启一个Nginx
服务来访问前端页面 详细步骤查看这里
安装编译工具及库文件
gcc
是linux
下的编译器,它可以编译C,C++,Ada,Object C和Java
等语言
yum -y install gcc
安装PCRE
pcre
是一个perl
库,包括perl
兼容的正则表达式库,nginx
的http
模块使用pcre
来解析正则表达式,所以需要安装pcre
库
yum install -y pcre pcre-devel
zlib安装
zlib
库提供了很多种压缩和解压缩方式nginx
使用zlib
对http
包的内容进行gzip
,所以需要安装
yum install -y zlib zlib-devel
安装openssl
openssl
是web
安全通信的基石,没有openssl
,可以说我们的信息都是在裸奔
yum install -y openssl openssl-devel
安装Nginx
1.下载稳定版本的Nginx
wget /download/nginx-1.20.1.tar.gz
2.把压缩包解压到usr/local/src
tar -zxvf nginx-1.20.1.tar.gz -C /usr/local/src
3.编译安装
cd /nginx-1.20.1./configure makemake install
4.启动Nginx
查找安装路径
whereis nginx
常用的Nginx
命令:
#启动、停止nginxcd /usr/local/nginx/sbin/./nginx#启动./nginx -s stop #停止,直接查找nginx进程id再使用kill命令强制杀掉进程./nginx -s quit #退出停止,等待nginx进程处理完任务再进行停止./nginx -s reload #重新加载配置文件,修改nginx.conf后使用该命令,新配置即可生效
启动Nginx
默认端口80 如果端口有冲突可以修改端口(具体修改方法,稍后会说)
访问页面查看Nginx
是否正常启动
表明Nginx
启动正常
5. 将前端build后的文件同步到Nginx服务中
目前,centos
上Nginx
服务已有,前端build后的代码已有,现在需要将前端代码同步到Nginx
服务中,以便可以通过Nginx
服务访问
梳理一下我们接下来要做的事情:
在Nginx中html
文件夹下创建teacher
文件,将前端打包后的代码放到此处配置Nginx conf
文件 配置端口和访问路径编写脚本将Jenkins
中workspace
下的前端代码 打包复制到nginx/html/teacher
中重启Nginx
服务
Nginx 中创建teacher文件夹
centos
中找到Nginx
所在文件夹
如果忘记了可以通过
# 查找nginx所在位置whereis nginx
我们将在html
文件夹下创建teacher
(随意命名)来存放前端代码
cd /usr/local/nginx# 创建文件mkdir teacher
配置Nginx conf文件
接下来我们需要为我们的前端代码配置代理服务 来访问
vim /usr/local/nginx/conf/nginx.confserver {listen 9091;server_name localhost;#charset koi8-r;#access_log logs/host.access.log main;location / {root html/teacher;index index.html;}}
如下配置
编写脚本
接下来要做的是 写一个脚本 当Jenkins拉完代码后 需要把执行一下npm install
安装一下所有依赖
然后再执行一下npm run build
对Vue项目进行打包
将打包后的dist
文件夹打成tar包放到nginx/html/teacher
文件夹下 并解压 删除tar包
编写脚本需要了解一些基础的shell命令,具体的教程可以自行搜索,学习一下
为了方便Jenkins
执行脚本,我们在前端代码的build
文件夹(Vue
项目)创建一个deploy.sh
脚本
这样如果修改脚本 不用再改Jenkins的构建脚本了 直接push代码即可更新
具体脚本内容如下:
deploy.sh
#!/bin/bash# 一旦出现了返回值非零,整个脚本就会立即退出set -e# 脚本所在目录sh_dir=$(cd "$(dirname "$0")";pwd)# 项目根目录base_dir="${sh_dir}/.."# dist目录dist_dir="${base_dir}/dist"# nginx目录nginx_dir="/usr/local/nginx"# teacher目录teacher_dir="${nginx_dir}/html/teacher"# sbin目录sbin_dir="${nginx_dir}/sbin"# 包名tar_name="teacher.tar.gz"echo '====================开始构建==========================='echo '构建的版本号:'${BUILD_NUMBER}echo '当前目录: ' ${base_dir}# 返回到跟目录 安装包cd ${dist_dir}npm install# 删除旧的dist文件rm -rf distnpm run build:prod# 将dist目录打包到nginx/html/teacher目录下cd ${dist_dir}tar -zcvf "${teacher_dir}/${tar_name}" *echo '====================打包完毕==========================='# 回到Nginx目录下解压刚打的包cd ${teacher_dir}tar -zxvf ${tar_name}# 删除gz包rm -rf ${tar_name}echo '====================代码更新完毕========================'# 重启Nginxcd ${sbin_dir}./nginx -s reloadecho '====================重新启动完毕========================'
整个脚本已经写完,那么怎么让Jenkins
拉完最新代码去执行呢
打开Jenkins
–>找到我们创建的任务–>配置–>更新构建->修改Execute shell中的脚本后保存:
# 当前的位置在代码仓库根目录cd build// 进入build文件夹 执行脚本sh deploy.sh
重启Nginx服务
我们刚才修改的Nginx
配置还未生效,接下来重新回到centos
中
重启Nginx
服务
具体命令:
cd /usr/local/nginx/sbin# 重启Nginx服务./nginx -s reload
重启完之后,commit
push
刚才在前端代码中加的脚本
push
之后Jenkins
会自动Build
我们的自动部署任务
Jenkins权限问题
看似万事大吉了,当我们push
代码 构建任务的时候却发现Jenkins
打包任务报错,如下:
竟然有权限问题,于是在centos
系统中,直接手动执行deploy.sh
脚本测试一下,是成功的,不存在权限问题.那问题就出在Jenkins上,原来我们安装Jenkins的时候,给的用户是jenkins
,这个用户当然不具备root权限.
解决办法就是修改Jenkins
的用户
修改/etc/sysconfig/jenkins
文件
vim /etc/sysconfig/jenkinsJENKINS_USER="root" # 改成root
cd /var/libchown -R root:root jenkins# 重启jenkins服务service jenkins restart
修改完之后,再次push代码测试一下,最终顺利部署成功,页面可以正常访问,代码是最新的. 至此,我们的整个前端自动化部署就差不多完美完成了.
到现在,整个前端自动化部署的流程已经走通了
结尾
通过上面的一通操作,前端的自动化部署算是完成了.还有很多可以优化的地方,比如Jenkins
服务和要部署前端代码的Nginx
不在同一台机器上,需要远程传输文件和执行shell
命令.比如构建成功之后Jenkins可以给测试相关的人员发通知邮件等.这些如果有机会我们下次再分享一下.
整个过程还有很多不完美的地方,重在体验这个过程,希望大家不局限于前端代码之中,可以对jenkins
Nginx
shell脚本
vim命令
等前端周边的也有些了解,才更难提升我们的竞争力.
也欢迎大家提出意见,互相学习进步.
写在最后
欢迎大家访问我们的前端订阅号【前端面试题宝典】以及小程序【前端面试题宝典】,公众号会频繁更新前端相关的技术文章.我们的小程序【前端面试题宝典】目前也收录了大约将近600道前端面试题,并且包含详细的答案解析.包括HTML CSS TS JS React Vue Node 性能优化 网络安全 算法 数据结构等等各种分类的前端面试题.希望能为正在面试的小伙伴助一臂之力.
您也可以点这里访问前端面试题宝典