Jenkins+Nginx部署前端项目
文章目录
- 一. Jenkins安装
-
- 1.1Jenkins的下载
- 1.2 Jenkins的初始化
- 二.安装NodeJs插件及配置
-
- 2.1Jenkins安装Nodejs插件
- 2.2 linux配置nodejs
- 三.部署前端项目
一. Jenkins安装
1.1Jenkins的下载
- 查看jenkins稳定版本，Long Term Support(LTS)下都是稳定版本
获取Jenkins安装包，建议使用清华镜像下载安装包
- 把安装包上传到服务器上，然后执行如下命令安装：
rpm -ivh jenkins-2.346-1.1.noarch.rpm
- 下载jdk，要注意jdk的版本(第一张图画线部分)，表示jdk8、jdk11、jdk17都行，择一即可：
yum install java-11-openjdk* -y
- 修改相应的配置
vi /etc/sysconfig/jenkins
修改jenkins_user为root
也可以选择性修改端口号
- 开放jenkins的端口
firewall-cmd --zone=public --add-port=8080/tcp --permanent
firewall-cmd --reload
- 启动jenkins并查看
systemctl start jenkins
如果启动jenkins时报如下错误，则可能没有安装jdk或jdk版本错误
如果还是报如上错误，可以修改jenkins.service文件中的jdk环境试试
vi /usr/lib/systemd/system/jenkins.service
使用yum下载jdk默认地址就是/usr/lib/jvm下，并重新加载文件
systemctl daemon-reload
如果Jenkins成功启动则忽略这些步骤
浏览器输入ip地址及端口号
如此jenkins便安装完毕。
1.2 Jenkins的初始化
输入如下命令获取Jenkins的初始化密码解锁Jenkins
cat /var/lib/jenkins/secrets/initialAdminPassword
将密码复制到管理员密码后点击继续，选择安装推荐的插件。
等待插件安装完毕后，创建自定义的管理员账户，以后就可以使用这个账户登录。
之后按照指示点击即可。
如此便完成了Jenkins的安装及初始化
二.安装NodeJs插件及配置
2.1Jenkins安装Nodejs插件
- 点击Manage Jenkins->Manage Plugins
- 选择Avaliable Plugins，输入NodeJS，勾选后点击Install without restart
2.2 linux配置nodejs
- 可以通过npm镜像下载nodejs压缩包，并上传服务器
- 解压到/opt/software目录下
tar -zxvf node-v16.15.0-linux-x64.tar.gz -C /opt/software
- 建立软连接，使用可以在任意linux文件下使用nodejs和npm,并查看nodejs是否有用
ln -s /opt/software/node-v16.15.0-linux-x64/bin/node /usr/local/bin/node
ln -s /opt/software/node-v16.15.0-linux-x64/bin/npm /usr/local/bin/npm
node -v
npm -v
- 注意不要使用新版本的nodejs，否则容易报如下错误：
关于ningx的安装及部署这里就不赘述了。
- jenkins中完成nodejs全局工具配置
滑到最下面的NodeJS安装，别名在构建环境中有用
三.部署前端项目
- 安装git
yum install -y git
- 新建一个Job
- 配置源码管理，选择Git
若是出现如下错误，则是未安装在linux下安装git，请查看第一步安装git的命令
若是出现如下错误，则是没有权限的问题
解决方法如下：
- 配置构建环境，下拉选择之前配置的NodeJS
- 配置Build Steps，增加构建步骤，选择Execute Shell(执行Shell)
输入如下命令，注意要换掉一些路径名：
# 测试npm
npm -v
# 删除原有的dist
cd /opt/software/nginx/html
rm -rf /opt/software/nginx/html/dist
# 设置npm源设置为淘宝源，加速npm的下载
npm config set registry https://registry.npm.taobao.org #把npm源设置为淘宝源
npm config get registry #检测npm是否切换成功
# 下载node_modules
cd /var/lib/jenkins/workspace/前端/front
npm install
# 删除之前构建时的dist文件夹，前端是任务名称，在第二步设置，front是代码文件名
rm -rf /var/lib/jenkins/workspace/前端/front/dist
npm run build # 构建
# 将构建的后的dist文件传到nginx的文件夹下
rm -rf /opt/software/nginx/html/dist # 删除上一次构建的dist
mv /var/lib/jenkins/workspace/前端/front/dist /opt/software/nginx/html/
# 重启nginx
systemctl restart nginx
点击构建
若是构建时控制台输出权限不够错误：
修改配置文件，将用户和组修改为root，然后重新加载服务配置文件，重启jenkins
vi /usr/lib/systemd/system/jenkins.service
systemctl daemon-reload
systemctl restart jenkins
构建成功