开发者社区> 君哥聊编程> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

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

简介: 在前后端分离的大背景下,前端团队的工程化非常重要,本篇我们来学习构建发布前端项目
+关注继续查看

安装node环境

  1. 点击下载Linux安装Nodejs

    image.png

    # 下载
    $ 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插件

    image.png

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

    image.png

npm打包

  1. 新建前端项目

    image.png

  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 不要关闭窗口,保持运行,否则页面访问不了哦

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

      image.png

      image.png

      image.png

      image.png

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

      image.png

      image.png

  4. 将该前端项目推送到Gitee

    image.png

    # 使用命令行推送到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

    image.png

  5. Jenkins新建job且配置Nodejs

    image.png

    image.png

    image.png

    重要:

    image.png

    在构建后添加执行shell

    image.png

    构建代码如下:

    source /etc/profile
    npm install
    npm run build

    尝试执行构建,看到如下日志即表示构建成功

    image-20210524234425446.png

    image-20210524234740816.png

静态界面发布

6152595-ad86af969bb284a6.png

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/

    image.png

  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,如下:

    image.png

  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

    image.png

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

    image.png

  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

    image.png

  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构建

image.png

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. 插件安装

    image.png

  2. 阿里云RAM账号设置

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

    image.png

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

    image.png

    image.png

  3. 创建阿里云bucket
  4. 增加构建后的操作,(jenkins凭证配置)

    image.png

  5. 执行构建,查看日志

    image.png

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

    image.png

总结

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

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
jenkins持续集成从0入门到实战【三】集成Git和Maven
Maven是目前主流的自动化构建工具,而Git也是目前主流的分布式版本控制系统。要做Java项目的持续集成必须会集成这2个工具。
37 0
jenkins持续集成从0入门到实战【二】安装插件和凭证配置
Jenkins的插件生态非常强大,能覆盖我们所必须用到的功能,同时凭证也是相当的灵活,一起来学习吧。
46 0
教您一步一步利用Jenkins构建持续集成,持续交付环境CI/CD
教您一步一步利用Jenkins构建持续集成,持续交付环境CI/CD
50 0
从0搭建属于自己的jenkins持续集成平台
Jenkins在日常工作中占据了一个非常重要的角色,帮助我们节省了大量用于构建的时间。有些公司有运维大哥对Jenkins进行维护,如果没有那只能自己动手了。俗话说的好自己动手丰衣足食,所以本文就从0开始搭建属于自己的Jenkins持续平台。主要包含,**普通项目构建**、**流水线构建**、**多分支流水线构建**并将构建结果辅以钉钉通知。
1972 0
使用 Jenkins 实现 Java 项目的持续集成和持续交付
本文参考中国 DevOps 社区核心组织者刘征老师在中国 DevOps 社区济南 Meetup 活动上分享的 "用Jenkins实施CI/CD工作坊",展示如何使用 Jenkins 实现 Java 项目的 CI/CD (持续集成/持续交付)。
2438 0
Jenkins 集群搭建
一.前言 Jenkins是当下比较流行的一款功能强大的持续集成工具,它支持搭建集群,来提高多项目的构建速度,模式为主从模式,master会将任务分配到各个从节点进行并发构建,从而提高速度,下面介绍一下如何搭建Jenkins集群。
2407 0
jenkins构建自由风格项目[四]
标签(linux): jenkins 笔者Q:972581034 交流群:605799367。有任何疑问可与笔者或加群交流 构建一个php项目 创建一个新的项目 选择从git获取源码 配置gitlab deploy keys 第一步: 第二步: 第三步: 第四步: 第五步: 构建一个VUE...
2332 0
新手搭建Jenkins进行持续集成
Jenkins简要说明 Jenkins是一个持续集成的工具。不管是在开发中,还是在与测试的沟通中,总是不断要自己进行打包编译,发布到服务器上,也要不断交付给测试相关的更新包,这不仅麻烦,有时还会有缺失。
3828 0
+关注
君哥聊编程
多年一线资深coder,性能调优小哥
文章
问答
文章排行榜
最热
最新
相关电子书
更多
混合应用平台构建实战
立即下载
移动项目快速持续交付的工程化实践
立即下载
蚂蚁金服Docker网络插件 开发和实践
立即下载