jenkins持续集成从0入门到实战【九】构建前端项目-阿里云开发者社区

安装node环境

# 下载
$ 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
$ ./configure

configure操作会检测当前系统环境，以确保能成功安装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 found

PCRE库未安装提示

 ./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框架为主的发布体系

jenkins持续集成从0入门到实战【九】构建前端项目

安装node环境

npm打包

静态界面发布

Nginx下载安装

pm2环境安装

pm2程序Jenkins构建

发布至云oss

总结

热门文章

最新文章

相关课程

相关电子书

相关实验场景

推荐镜像

探索云世界

热门

云计算

大数据

云原生

人工智能

数据库

开发与运维

活动广场

任务中心

训练营

直播

乘风者计划

下载

镜像站

技术资料

jenkins持续集成从0入门到实战【九】构建前端项目

安装node环境

npm打包

静态界面发布

Nginx下载安装

pm2环境安装

pm2程序Jenkins构建

发布至云oss

总结

热门文章

最新文章

相关课程

相关电子书

相关实验场景

推荐镜像