Jenkins+Nginx部署前端项目

一. Jenkins安装

1.1Jenkins的下载

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

获取Jenkins安装包，建议使用清华镜像下载安装包

2. 把安装包上传到服务器上，然后执行如下命令安装：

rpm -ivh jenkins-2.346-1.1.noarch.rpm

3. 下载jdk，要注意jdk的版本(第一张图画线部分)，表示jdk8、jdk11、jdk17都行，择一即可：

yum install java-11-openjdk* -y

4. 修改相应的配置

 vi /etc/sysconfig/jenkins

修改jenkins_user为root

也可以选择性修改端口号

5. 开放jenkins的端口

firewall-cmd --zone=public --add-port=8080/tcp --permanent
firewall-cmd --reload

6. 启动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插件

1. 点击Manage Jenkins->Manage Plugins

2. 选择Avaliable Plugins，输入NodeJS，勾选后点击Install without restart

2.2 linux配置nodejs

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

2. 解压到/opt/software目录下

 tar -zxvf node-v16.15.0-linux-x64.tar.gz -C /opt/software

3. 建立软连接，使用可以在任意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

4. 注意不要使用新版本的nodejs，否则容易报如下错误：

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

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

滑到最下面的NodeJS安装，别名在构建环境中有用

三.部署前端项目

1. 安装git

yum install -y git

2. 新建一个Job

3. 配置源码管理，选择Git

若是出现如下错误，则是未安装在linux下安装git，请查看第一步安装git的命令

若是出现如下错误，则是没有权限的问题

解决方法如下：

4. 配置构建环境，下拉选择之前配置的NodeJS

5. 配置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

构建成功