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

安装node环境

1. 点击下载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

2. 配置环境变量

   $ 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

3. 安装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

4. Jenkins配置Node插件

   

   "系统管理"--"全局工具设置"---" NodeJS 安装"

   

npm打包

1. 新建前端项目

   

2. 新建前端项目上传至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

3. 访问vue ui 不要关闭窗口，保持运行，否则页面访问不了哦

   • 访问后会弹出项目管理器

     

     

     

     

     慢慢等待即可，完成以后界面如下

     

     

4. 将该前端项目推送到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

   

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

1. 解压安装包

   $ tar -zxvf nginx-1.21.0.tar.gz

   注意：nginx被解压到了/usr/local/nginx-1.21.0 目录下（不要把压缩包解压到/usr/local/nginx目录下，或者将解压后的目录重命名为nginx，因为nginx会默认安装到/usr/local/nginx目录下）

2. 安装前准备

   安装前先安装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

3. 进入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.

   如果没有其他错误，则可进行下一步

4. 执行make安装

   # 注意：下面2步会将nginx安装到/usr/local/nginx目录下，所以请勿占用nginx目录命名
   # make
   $ make install

   如果上述2步操作未报错，你可以切换到上一级目录，会发现nginx目录已经存在了

   $ cd ..
   $ cd nginx
   $ ls

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

6. 验证是否安装成功

   # 你要将80端口添加到防火墙中
   $ firewall-cmd --zone=public --add-port=80/tcp --permanent
   #重新加载
   $ firewall-cmd --reload
   
   在浏览器访问如下地址
   http://192.168.2.195/

   

7. 项目配置

   为了能让项目在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"
   };

8. 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;
           }
   }

9. 将打好的静态HTML资源文件放到html下，并命名it235Demo，如下：

   

10. 前端界面打包后自动部署

    跟部署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"

11. 打开浏览器访问静态页面，查看是否已经变更

pm2环境安装

1. pm2是什么？

   pm2是node进程管理工具。

   • 内建负载均衡（使用Node cluster 集群模块）
   • 后台运行
   • 收集日志，并有插件配合进行管理
   • 0秒停机重载，可以监听某些文件改动，自动重启，不影响服务
   • 具有Ubuntu和CentOS 的启动脚本
   • 停止不稳定的进程（避免无限循环），限制不稳定的重启的次数
   • 控制台检测
   • 提供 HTTP API
   • 远程控制和实时的接口API ( Nodejs 模块,允许和PM2进程管理器交互 )

2. 使用样例

   启动服务：$ pm2 start app.js

   列出当前服务信息：$ pm2 list

   

   • 其中app name 和id都是这个进程的标识，可以对他们进行别的操作，比如stop，delete等。
   • mode：进程模式，cluster或fork。cluster有多个进程，而fork只有一个。
   • status：进程是否在线
   • restart：重启次数
   • uptime：运行时间
   • cpu：cpu占用率
   • mem：内存占用大小
3. pm2 监视器

   

4. 基于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

   

5. 列出由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 杀死全部进程 

6. 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

1. 插件安装

   

2. 阿里云RAM账号设置

   配置阿里云帐号的Access Key、Secret Key和阿里云EndPoint后缀。

   

   阿里云后缀：内网填"-internal.aliyuncs.com"，外网填".aliyuncs.com",默认外网。如果您的Jenkins也部署在阿里云上面，那么可以使用内网，上传速度更快。

   

   

3. 创建阿里云bucket
4. 增加构建后的操作，（jenkins凭证配置）

   

5. 执行构建，查看日志

   

6. 查看OSS控制台中的bucket中有没有对应的文件

   

总结

以上内容讲解了前端发布构建的主要场景，基本覆盖以vue框架为主的发布体系