前端工程化：Jenkins 实现前端自动化构建部署

刘坤15
611 阅读5分钟

本文主要用于记录分享Jenkins + Nginx + pm2实现前端构建部署

DevOps

提到 Jenkins，想到的第一个概念就是 CI/CD 在这之前应该再了解一个概念。

DevOps Development 和 Operations 的组合，是一种方法论，并不特指某种技术或者工具。DevOps 是一种重视 Dev 开发人员和 Ops 运维人员之间沟通、协作的流程。通过自动化的软件交付，使软件的构建，测试，发布更加的快捷、稳定、可靠。

CI

CI 的英文名称是Continuous Integration，中文翻译为：持续集成。

试想软件在开发过程中，需要不断的提交，合并进行单元测试和发布测试版本等等，这一过程是痛苦的。持续集成CI是在源代码变更后自动检测、拉取、构建的过程。

image.png

CD

CD 对应两个概念 持续交付Continuous Delivery 持续部署Continuous Deployment 提交交付顾名思义是要拿出点东西的。在 CI 的自动化流程阶段后，运维团队可以快速、轻松地将应用部署到生产环境中或发布给最终使用的用户。

从前端的角度考虑，在某些情况下肯定是不能直接通过自动化的方式将最终的 build 结果直接扔到生产机的。持续交互就是可持续性交付供生产使用的的最终 build。最后通过运维或者后端小伙伴进行部署。

image.png

持续部署

作为持续交付的延伸，持续部署可以自动将应用发布到生产环境。

image.png

开始准备

我个人使用的是腾讯云服务器 + MobaXtem，建议买个内存大一点（别问，问就是有坑）

安装Jenkins

jenkins教程链接Redhat Jenkins Packages

# 下载 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-2023.key
# 升级 yum 源中的所有包（可忽略）
sudo yum upgrade 
# Jenkins 依赖于 java 所以需要安装 JDK 
sudo  yum install fontconfig java-17-openjdk
# 安装 Jenkins 
sudo yum install jenkins

安装完成后可以使用 systemctl 命令管理 Jenkins 服务

# 启动 Jenkins 服务 
systemctl start jenkins 
# 重启 Jenkins 服务 
systemctl restart jenkins 
# 停止 Jenkins 服务 
systemctl stop jenkins 
# 查看 Jenkins 服务状态 
systemctl status jenkins

启动服务后访问服务器地址 + 8080 端口，Jenkins 默认为 8080 端口。（所以云服务器记得开8080端口，不然访问不了）

Jenkins使用

访问ip+端口会看到这个页面

image.png 然后使用cat /var/lib/jenkins/secrets/initialAdminPassword 查看密码复制过来，点击继续进入插件安装页面，暂时安装系统推荐插件即可，然后创建用户

image.png

配置前言

自动构建部署流程为：git拉取代码-》下载依赖-》构建-》将构建包放到对应目录下 因此需要几个关键工具，我这里使用的是git, nvm

git安装

# 安装git工具
sudo yum install git
# 检查是否安装成功
git --version

安装nvm工具

nvm工具教程Linux 下安装 nvm | NVM (p6p.net) 我使用的是nvm v0.39.2

# 下载安装
curl -o- <https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.2/install.sh> | bash`
# 加载生效（关掉重新进入终端）
source ~/.bashrc
# 检查
nvm --version

注意！！！nvm下载node最好换镜像，不然下载速度贼慢

# 编辑.bashrc
vim ~/.bashrc
# 在尾部添加
export NVM_NODEJS_ORG_MIRROR=https://npmmirror.com/mirrors/node
# 保存退出重新打开终端加载生效
source ~/.bashrc
# 安装需要的node版本，我这里用的最新的
nvm install --lts
# 检查node版本
node -v   v20.17.0
npm -v    10.8.2
# 安装完成之后设置npm淘宝镜像
npm config set registry https://registry.npmmirror.com

配置jenkins

jenkins中需要用到几个插件，在系统管理-》插件管理-》avaliable-plugin里面找，具体不细说了

我额外安装的是nvm-wrapper，Gitee Plugin

安装完成后到dashboard中新建任务

image.png

创建完成后进行配置

源码管理添加关键信息Repositories，Credentials，Branches to build

image.png

构建触发器我使用的是定时构建和gitee webhook

image.png 注意使用gitee webhook需要配置，具体配置教程可参考gitee教程Jenkins 插件 - Gitee.com

构建环境选择使用nvm

image.png

Build Steps配置执行shel脚本，这里我只给出我自己写的配置脚本

echo "准备构建打包"
# 查看当前的目录
pwd
# nvm --verison
# 检查node版本
node -v
# 检查npm版本
npm -v
#最新地址 淘宝 NPM 切换npm淘宝镜像
npm config set registry https://registry.npmmirror.com
# 下载依赖包
npm install
# 执行构建脚本
npm run build:test

echo "构建完成"
ls
# 移除原包
rm -rf /root/cloud-music/
# 将打包后的包放在对应位置上
cp -rf ./cloud-music /root/

至此Jenkins的自动化构建部署就完成了，最终实现在在每天2点或者在代码提交时进行构建部署

NGINX

前端构建部署好了，但是页面访问还需要用到非常关键的核心Nginx

安装

# 安装nginx
sudo dnf install nginx
# 启动 nginx 服务
systemctl start nginx
# 查看 nginx 服务
systemctl status nginx 
# 停用 niginx 服务
systemctl stop nginx

配置前端

详细请移步前端应该掌握的Nginx相关知识Nginx是在前端服务部署时是很重要的一部分，也是部署的基础，学会了通过Nginx部署前 - 掘金 (juejin.cn)

编辑nginx.conf,使用vim /etc/nginx/nginx.conf 1.user nginx改成user root 2.增加映射

location /cloud-music {
    alias /root/cloud-music;
    try_files $uri $uri/ /root/cloud-music/index.html;
}

后台nodejs服务

安装PM2npm install -g pm2

安装完进入node服务下启动

pm2 start app.js --name xxxx

avatar
文章
阅读
粉丝