Jenkins+Nginx部署前端项目

文章目录

  • 一. Jenkins安装
    • 1.1Jenkins的下载
    • 1.2 Jenkins的初始化
  • 二.安装NodeJs插件及配置
    • 2.1Jenkins安装Nodejs插件
    • 2.2 linux配置nodejs
  • 三.部署前端项目

一. Jenkins安装

1.1Jenkins的下载

  1. 查看jenkins稳定版本,Long Term Support(LTS)下都是稳定版本

image.png
获取Jenkins安装包,建议使用清华镜像下载安装包
image.png

  1. 把安装包上传到服务器上,然后执行如下命令安装:
rpm -ivh jenkins-2.346-1.1.noarch.rpm
  1. 下载jdk,要注意jdk的版本(第一张图画线部分),表示jdk8、jdk11、jdk17都行,择一即可:
yum install java-11-openjdk* -y
  1. 修改相应的配置
 vi /etc/sysconfig/jenkins

修改jenkins_user为root
image.png
也可以选择性修改端口号
image.png

  1. 开放jenkins的端口
firewall-cmd --zone=public --add-port=8080/tcp --permanent
firewall-cmd --reload
  1. 启动jenkins并查看
 systemctl start jenkins

如果启动jenkins时报如下错误,则可能没有安装jdk或jdk版本错误
image.png
如果还是报如上错误,可以修改jenkins.service文件中的jdk环境试试

vi /usr/lib/systemd/system/jenkins.service

image.png
使用yum下载jdk默认地址就是/usr/lib/jvm下,并重新加载文件

systemctl daemon-reload

如果Jenkins成功启动则忽略这些步骤
浏览器输入ip地址及端口号
image.png
如此jenkins便安装完毕。

1.2 Jenkins的初始化

输入如下命令获取Jenkins的初始化密码解锁Jenkins

cat /var/lib/jenkins/secrets/initialAdminPassword

image.png
image.png
将密码复制到管理员密码后点击继续,选择安装推荐的插件。

Jenkins+Nginx部署前端项目_第1张图片


等待插件安装完毕后,创建自定义的管理员账户,以后就可以使用这个账户登录。
image.png
之后按照指示点击即可。
image.png
如此便完成了Jenkins的安装及初始化

二.安装NodeJs插件及配置

2.1Jenkins安装Nodejs插件

  1. 点击Manage Jenkins->Manage Plugins

image.png

  1. 选择Avaliable Plugins,输入NodeJS,勾选后点击Install without restart

image.png

2.2 linux配置nodejs

  1. 可以通过npm镜像下载nodejs压缩包,并上传服务器

image.png

  1. 解压到/opt/software目录下
 tar -zxvf node-v16.15.0-linux-x64.tar.gz -C /opt/software
  1. 建立软连接,使用可以在任意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

image.png

  1. 注意不要使用新版本的nodejs,否则容易报如下错误:

image.png
关于ningx的安装及部署这里就不赘述了。

  1. jenkins中完成nodejs全局工具配置

image.png
滑到最下面的NodeJS安装,别名在构建环境中有用
image.png

三.部署前端项目

  1. 安装git
yum install -y git
  1. 新建一个Job

image.png
image.png

  1. 配置源码管理,选择Git

image.png
若是出现如下错误,则是未安装在linux下安装git,请查看第一步安装git的命令
ewf.png
若是出现如下错误,则是没有权限的问题
image.png
解决方法如下:
image.png
image.png

  1. 配置构建环境,下拉选择之前配置的NodeJS

image.png

  1. 配置Build Steps,增加构建步骤,选择Execute Shell(执行Shell)

image.png
image.png
输入如下命令,注意要换掉一些路径名:

# 测试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

点击构建
image.png
若是构建时控制台输出权限不够错误:
image.png
修改配置文件,将用户和组修改为root,然后重新加载服务配置文件,重启jenkins

vi /usr/lib/systemd/system/jenkins.service
systemctl daemon-reload
systemctl restart jenkins

image.png
构建成功
image.png

你可能感兴趣的:(前端,jenkins,nginx,前端)