安装node环境
点击下载Linux安装Nodejs
# 下载 $ cd /data/software $ wget https://nodejs.org/dist/latest/node-v16.2.0-linux-x64.tar.gz # 解压 $ tar -zxvf node-v16.2.0-linux-x64.tar.gz $ mv node-v16.2.0-linux-x64 node-v16.2.0配置环境变量
$ vim /etc/profile export PATH=/data/software/node-v16.2.0/bin:$PATH $ souce /etc/profile # 查看npm,cnpm,node版本号 $ node -v v16.2.0 $ npm -v 7.13.0安装cnpm淘宝镜像
npm和 cnpm区别
npm（node package manager）是nodejs的包管理器，用于node插件管理（包括安装、卸载、管理依赖等） npm安装插件过程：从 http://registry.npmjs.org下载对应的插件包（该网站服务器位于国外，所以经常下载缓慢或出现异常）。
cnpm是国内的淘宝团队分享的镜像，同步频率目前为 10分钟 一次以保证尽量与官方服务同步。
cnpm跟npm用法完全一致，只是在执行命令时将npm改为cnpm。npm install -g cnpm --registry=https://registry.npm.taobao.org
Jenkins配置Node插件
"系统管理"--"全局工具设置"---" NodeJS 安装"
npm打包
- 新建前端项目
新建前端项目上传至Gitee，这里我以vue项目做示例
$ npm install -g cnpm --registry=https://registry.npm.taobao.org # 安装vue脚手架 $ cnpm install -g @vue/cli 若出现：无法加载文件 C:\Program Files\nodejs\npm.ps1，因为在此系统上禁止运行脚本 解决方案：https://www.cnblogs.com/chenzhiran/p/12080349.html $ vue -V @vue/cli 4.5.13访问
vue ui不要关闭窗口，保持运行，否则页面访问不了哦- 访问后会弹出项目管理器
慢慢等待即可，完成以后界面如下
- 访问后会弹出项目管理器
将该前端项目推送到Gitee
# 使用命令行推送到Gitee $ git add . $ git commit -m "first commit" $ git remote add origin https://gitee.com/nobug8/it235-jenkins-node.git $ git push -u origin master
Jenkins新建job且配置Nodejs
重要：
在构建后添加执行shell
构建代码如下：
source /etc/profile npm install npm run build尝试执行构建，看到如下日志即表示构建成功
静态界面发布
Nginx下载安装
wget直接下载$ cd /usr/local $ wget http://nginx.org/download/nginx-1.21.0.tar.gz
解压安装包
$ tar -zxvf nginx-1.21.0.tar.gz注意：nginx被解压到了
/usr/local/nginx-1.21.0目录下（不要把压缩包解压到/usr/local/nginx目录下，或者将解压后的目录重命名为nginx，因为nginx会默认安装到/usr/local/nginx目录下）安装前准备
安装前先安装
nginx所需的依赖库，如果缺少依赖库，可能会安装失败$ yum install gcc-c++ $ yum install pcre $ yum install pcre-devel $ yum install zlib $ yum install zlib-devel $ yum install openssl $ yum install openssl-devel进入
nginx-1.21.0目录，并执行以下配置命令$ cd nginx-1.21.0 $ ./configureconfigure操作会检测当前系统环境，以确保能成功安装nginx，如果出错，请检查上述安装前依赖包是否已经安装
如果出现如下信息表示你需要安装依赖库
gcc库未安装提示
checking for OS + Linux 3.10.0-123.el7.x86_64 x86_64 checking for C compiler ... not found ./configure: error: C compiler cc is not foundPCRE库未安装提示
./configure: error: the HTTP rewrite module requires the PCRE library. You can either disable the module by using --without-http_rewrite_module option, or install the PCRE library into the system, or build the PCRE library statically from the source with nginx by using --with-pcre=<path> option.zlib库未安装提示
./configure: error: the HTTP gzip module requires the zlib library. You can either disable the module by using --without-http_gzip_module option, or install the zlib library into the system, or build the zlib library statically from the source with nginx by using --with-zlib=<path> option.
如果没有其他错误，则可进行下一步
执行make安装
# 注意：下面2步会将nginx安装到/usr/local/nginx目录下，所以请勿占用nginx目录命名 # make $ make install如果上述2步操作未报错，你可以切换到上一级目录，会发现nginx目录已经存在了
$ cd .. $ cd nginx $ ls配置nginx开机启动
切换到
/lib/systemd/system/目录，创建nginx.service文件vim nginx.service$ cd /lib/systemd/system/ $ vim nginx.service添加如下内容
[Unit] Description=nginx After=network.target [Service] Type=forking ExecStart=/usr/local/nginx/sbin/nginx ExecReload=/usr/local/nginx/sbin/nginx reload ExecStop=/usr/local/nginx/sbin/nginx quit PrivateTmp=true [Install] WantedBy=multi-user.target退出并保存文件，执行如下名使
nginx开机启动$ systemctl enable nginx.service# 启动nginx $ systemctl start nginx.service # 结束nginx $ systemctl stop nginx.service # 重启nginx $ systemctl restart nginx.service验证是否安装成功
# 你要将80端口添加到防火墙中 $ firewall-cmd --zone=public --add-port=80/tcp --permanent #重新加载 $ firewall-cmd --reload 在浏览器访问如下地址 http://192.168.2.195/
项目配置
为了能让项目在Nginx中访问，我们假设根目录为it235Vue，要求访问：http://192.168.2.194/it235Vue能够访问到项目，我们可以这样做：
在
it235-jenkins-node目录下新增vue.config.js文件，内容如下//表示该项目的资源前缀：it235Vue module.exports = { // vue.config.js publicPath: "/it235Vue/", outputDir: "dist", assetsDir: "assets", indexPath: "index.html" };Nginx静态项目配置
server { listen 80; server_name localhost 192.168.2.194; location /it235Vue { alias /data/app/it235Vue; index index.html; } location @rewrites { rewrite ^(.+)$ /index.html last; } }- 将打好的静态HTML资源文件放到html下，并命名it235Demo，如下：
前端界面打包后自动部署
跟部署
SpringBoot差不多，就是将资源备份，然后重新打包拷贝到指定目录即可，jenkins中完善后的脚本如下：# 一般Nginx和jenkins在不同机器上，这样就需要涉及到跨机器拷贝，使用到免密登录 #!/bin/bash echo "部署的目录和项目名称" DIR="/data/app/" projectName="it235Vue" echo "待部署的应用服务器，可多台" server_ips="192.168.2.194" for server_ip in ${server_ips[@]} do echo "ssh连接进行备份操作" ssh -Tq -oStrictHostKeyChecking=no admin@${server_ip} <<EOF mkdir -p $DIR/backup/${projectName} if [ -f "$DIR/${projectName}.tar.gz" ];then mv $DIR/${projectName}.tar.gz $DIR/backup/${projectName}/${projectName}-`date "+%Y%m%d_%H%M%S"`.tar.gz rm -rf $DIR/${projectName}* fi EOF echo "拷贝tar.gz包到目标服务器的DIR目录" cd ${WORKSPACE} tar -czf ${projectName}.tar.gz dist scp -q -oStrictHostKeyChecking=no ${WORKSPACE}/${projectName}.tar.gz admin@${server_ip}:${DIR}/${projectName}.tar.gz echo "ssh远程连接进行发布操作" ssh -q -oStrictHostKeyChecking=no admin@${server_ip} <<EOF cd ${DIR} mkdir ./${projectName} && tar -zxvf ${projectName}.tar.gz -C ./${projectName} --strip-components 1 EOF done echo "success"- 打开浏览器访问静态页面，查看是否已经变更
pm2环境安装
pm2是什么？
pm2是node进程管理工具。
- 内建负载均衡（使用Node cluster 集群模块）
- 后台运行
- 收集日志，并有插件配合进行管理
- 0秒停机重载，可以监听某些文件改动，自动重启，不影响服务
- 具有Ubuntu和CentOS 的启动脚本
- 停止不稳定的进程（避免无限循环），限制不稳定的重启的次数
- 控制台检测
- 提供 HTTP API
- 远程控制和实时的接口API ( Nodejs 模块,允许和PM2进程管理器交互 )
使用样例
启动服务：$ pm2 start app.js
列出当前服务信息：$ pm2 list
- 其中app name 和id都是这个进程的标识，可以对他们进行别的操作，比如stop，delete等。
- mode：进程模式，cluster或fork。cluster有多个进程，而fork只有一个。
- status：进程是否在线
- restart：重启次数
- uptime：运行时间
- cpu：cpu占用率
- mem：内存占用大小
- pm2 监视器
基于npm安装pm2
# 命令行全局安装pm2，注意需要有node安装目录的写权限 $ npm install -g pm2 $ pm2 start app.js $ pm2 start build/dev-server.js $ pm2 start npm --name it235 -- run serve
列出由pm2管理的所有进程信息,还会显示一个进程会被启动多少次，因为没处理的异常。
$ pm2 logs 显示所有进程日志 $ pm2 stop all 停止所有进程 $ pm2 restart all 重启所有进程 $ pm2 reload all 0秒停机重载进程 (用于 NETWORKED 进程) $ pm2 stop 0 停止指定的进程 $ pm2 restart 0 重启指定的进程 $ pm2 startup 产生 init 脚本 保持进程活着 $ pm2 web 运行健壮的 computer API endpoint $ pm2 delete 0 杀死指定的进程 $ pm2 delete all 杀死全部进程pm2使用详情
$ npm install pm2 -g # 命令行安装 pm2 $ pm2 start app.js -i 4 #后台运行pm2，启动4个app.js # 也可以把'max' 参数传递给 start # 正确的进程数目依赖于Cpu的核心数目 $ pm2 start app.js --name my-api # 命名进程 $ pm2 list # 显示所有进程状态 $ pm2 monit # 监视所有进程 $ pm2 logs # 显示所有进程日志 $ pm2 stop all # 停止所有进程 $ pm2 restart all # 重启所有进程 $ pm2 reload all # 0秒停机重载进程 (用于 NETWORKED 进程) $ pm2 stop 0 # 停止指定的进程 $ pm2 restart 0 # 重启指定的进程 $ pm2 startup # 产生 init 脚本 保持进程活着 $ pm2 web # 运行健壮的 computer API endpoint (http://localhost:9615) $ pm2 delete 0 # 杀死指定的进程 $ pm2 delete all # 杀死全部进程 运行进程的不同方式： $ pm2 start app.js -i max # 根据有效CPU数目启动最大进程数目 $ pm2 start app.js -i 3 # 启动3个进程 $ pm2 start app.js -x #用fork模式启动 app.js 而不是使用 cluster $ pm2 start app.js -x -- -a 23 # 用fork模式启动 app.js 并且传递参数 (-a 23) $ pm2 start app.js --name serverone # 启动一个进程并把它命名为 serverone $ pm2 stop serverone # 停止 serverone 进程 $ pm2 start app.json # 启动进程, 在 app.json里设置选项 $ pm2 start app.js -i max -- -a 23 #在--之后给 app.js 传递参数 $ pm2 start app.js -i max -e err.log -o out.log # 启动 并 生成一个配置文件 你也可以执行用其他语言编写的app ( fork 模式): $ pm2 start my-bash-script.sh -x --interpreter bash $ pm2 start my-python-script.py -x --interpreter python 0秒停机重载: 这项功能允许你重新载入代码而不用失去请求连接。 注意： 仅能用于web应用 运行于Node 0.11.x版本 运行于 cluster 模式（默认模式） $ pm2 reload all CoffeeScript: $ pm2 start my_app.coffee #这就是全部 PM2准备好为产品级服务了吗？ 只需在你的服务器上测试 $ git clone https://github.com/Unitech/pm2.git $ cd pm2 $ npm install # 或者 npm install --dev ，如果devDependencies 没有安装 $ npm test
pm2程序Jenkins构建
source /etc/profile
npm install
npm run build
cd ${WORKSPACE}
# 第一次构建使用即可，或手动创建该进程，后续只需要reload或restart即可
pm2 start npm --name it235 -- run serve
# 第二次使用reload或restart
pm2 restart it235
pm2 reload it235发布至云oss
- 插件安装
- 阿里云RAM账号设置
配置阿里云帐号的Access Key、Secret Key和阿里云EndPoint后缀。
阿里云后缀：内网填"-internal.aliyuncs.com"，外网填".aliyuncs.com",默认外网。如果您的Jenkins也部署在阿里云上面，那么可以使用内网，上传速度更快。
- 创建阿里云bucket
- 增加构建后的操作，（jenkins凭证配置）
- 执行构建，查看日志
- 查看OSS控制台中的bucket中有没有对应的文件
总结
以上内容讲解了前端发布构建的主要场景，基本覆盖以vue框架为主的发布体系
