无情画[王唯旖]

00:00 / 00:00

手摸手教你用jenkins构建部署一个基于nuxt.js的应用

前言

为了有更多的时间写代码(手动狗头),在部署发版这种有手就行的操作上,用jenkins做一次一本万利的事何乐而不为呢,节省的时间去做点想做的事,这种固定模式的构建部署工作,是应该解放双手,每次手动复制粘贴极可能出差错,接下来请把你的双手伸出来,手摸手教你解放双手~

服务器配置要求及jenkins安装

服务器配置要求

首先我们到jenkins官网看看服务器最低推荐配置

  • 256MB可用内存
  • 1GB可用磁盘空间(作为一个Docker容器运行jenkins的话推荐10GB)

为小团队推荐的硬件配置:

  • 1GB+可用内存
  • 50 GB+ 可用磁盘空间

软件配置:

  • Java 8—​无论是Java运行时环境(JRE)还是Java开发工具包(JDK)都可以。

注意: 如果将Jenkins作为Docker 容器运行,这不是必需的

安装jenkins

我的服务器是机器是CentOS 7.6,下面是安装步骤:

  1. java环境安装
// 列出所有可安装的rpm软件包
yum list java-1.8*
// 安装
yum install java-1.8.0-openjdk* -y
// 安装完成后执行 java -version 查看是否安装成功,如下图所示则成功:
  1. 安装jenkins
// 1.添加jenkins源
sudo wget -O /etc/yum.repos.d/jenkins.repo https://pkg.jenkins.io/redhat-stable/jenkins.repo

// 可能出现如下图一所示的 certificate has expired,按照提示加上 --no-check-certificate
sudo wget -O /etc/yum.repos.d/jenkins.repo https://pkg.jenkins.io/redhat-stable/jenkins.repo --no-check-certificate

// 成功后如下图二所示

// 2.接下来导入秘钥
sudo rpm --import https://pkg.jenkins.io/redhat-stable/jenkins.io.key

// 3.通过yum命令安装Jenkins
yum -y install jenkins

// 4.安装成功后,如需修改端口号(因为jenkins默认端口号是8080端口号,与tomcat的默认端口冲突),这里我不需要tomcat,所以暂不修改,修改的话如下:
vi /etc/sysconfig/jenkins // 图三位置修改,保存退出

// 5.启动jenkins,如图4:
service jenkins start

图1: 图1

图2: 图2

图3: 图3

图4: 图4

访问jenkins

注意:启动成功后,我们用浏览器访问jenkins(服务器IP+端口号8080),需要先到服务器安全组放行8080端口

/var/lib/jenkins/secrets/initialAdminPassword目录下面把初始密码复制出来填入后如下图:

  1. 选择安装推荐插件
  1. 插件安装完成后会跳转到创建管理员,如下图:

填写完成后一路点 保存并完成

  1. 至此jenkins安装完毕

有些地方的汉化没生效,可以重启一下jenkins,直接链接访问http://xxx.xx.xx.xxx:8080/restart或到服务器上命令方式重启(service jenkins restart

创建一个jenkins任务

由于平时代码提交到GitHub时,总是因为网络原因提交失败,所以选择用gitee做版本管理

  1. jenkins中安装gitee,nodejs插件

点击 系统管理 -> 插件管理 -> 可选插件,搜索 -> 勾选,点击下载

nodejs下载同理

  1. 配置gitee插件
  • 前往 系统管理 -> 系统配置 -> Gitee 配置 -> Gitee 链接
  • 链接名 中输入 Gitee 或者你想要的名字
  • Gitee 域名 URL 中输入Gitee完整 URL地址: https://gitee.com (Gitee私有化客户输入部署的域名)
  • 证书令牌 中如还未配置Gitee APIV5 私人令牌,点击 添加 - > Jenkins
    • Domain 选择 全局凭据
    • 类型 选择 Gitee API 令牌
    • 范围 选择你需要的范围(我这里选择的全局)
    • Gitee API 令牌 输入你的Gitee私人令牌,获取地址:https://gitee.com/profile/personal_access_tokens
    • ID, 描述 中输入你想要的 ID 和描述即可。
  • 证书令牌 选择配置好的 Gitee APIV5 Token
  • 点击 高级 ,可配置是否忽略 SSL 错误(视您的Jenkins环境是否支持),并可设置链接测超时时间(视您的网络环境而定)
  • 点击 测试链接 测试链接是否成功,如失败请检查以上 3,5,6 步骤。
  1. 配置nodejs插件
  • 前往 系统管理 -> 全局工具配置->NodeJS

    • 别名: 随便起,自己认识就好

    如图:

  1. 点击新建任务 > 输入项目名称 > 选择第一个Freestyle project > 确定
  1. 任务配置
  • General模块按照自己需求配置
  • 源码管理:
    • 点击 Git
    • 输入你的仓库地址
    • 凭据Credentials 中请输入 git 仓库 https 地址对应的 用户名密码凭据,或者 ssh 对应的 ssh key 凭据,注意 Gitee API Token 凭据不可用于源码管理的凭据,只用于 gitee 插件的 API 调用凭据。
    • Branches to build:
      • 对于单仓库工作流输入: origin/${giteeSourceBranch}
      • 对于 PR 工作流输入: pull/${giteePullRequestIid}/MERGE
    • Additional Behaviours:
      • 对于单仓库工作流,如果你希望推送的分支构建前合并默认分支(发布的分支),可以做以下操作:
      • 点击 Add 下拉框
      • 选择 Merge before build
      • 设置 Name of repository 为 origin
      • 设置 Branch to merge to 为 ${ReleaseBranch} 即您要合并的默认分支(发布分支)
    • 对于 PR 工作流,Gitee服务端已经将 PR 的原分支和目标分支作了预合并,您可以直接构建,如果目标分支不是 默 认分支(发布分支),您也可以进行上诉构建前合并。
  • 构建触发器: 因为想手动点击构建发布,所以暂时没做配置
  • 构建环境:
    • 选择之前配置的nodejs版本
  • 构建
    • 选择执行shell脚本
    • 没有pm2的下载一下pm2
// 全局安装pm2
npm install pm2 -g
 
// pm2 软连接(/root/softw/node-v10.15.1-linux-x64/bin/pm2 这个路径结合自己安装的路径)
ln -s /root/softw/node-v10.15.1-linux-x64/bin/pm2 /usr/bin/pm2

文件名对应自己项目的文件名

  #!/bin/bash
  node -v
  #进入当前项目jenkins工作空间,此时会把仓库代码拉取到这里。
  cd $WORKSPACE

  #因为node-sass很难下载,所以加上淘宝源的方式
  npm config set sass_binary_site=https://npm.taobao.org/mirrors/node-sass

  # 因为root权限不能这样执行,所以加上--unsafe-perm=true --allow-root,如果可以下载就不加
  npm install --registry=https://registry.npm.taobao.org --unsafe-perm=true --allow-root

  #执行 nuxt package.json中的"build": "nuxt build",命令,开始构建生成.nuxt目录
  npm run build

  # 先清空原来项目所有文件,避免有缓存数据
  #.nuxt 隐藏文件,删除
  rm /www/wwwroot/wowmonkey.cn/.nuxt -rf
  rm /www/wwwroot/wowmonkey.cn/* -rf

  # 复制 .nuxt目录,static目录,node_modules目录(不要还不行),nuxt.config.js文件和package.json文件
  cp -r .nuxt /www/wwwroot/wowmonkey.cn
  cp -r static /www/wwwroot/wowmonkey.cn
  cp -r node_modules /www/wwwroot/wowmonkey.cn
  cp nuxt.config.js package.json /www/wwwroot/wowmonkey.cn

  # 复制好以上文件后,进入项目运行目录,我是放在 /www/wwwroot/wowmonkey.cn目录下
  cd /www/wwwroot/wowmonkey.cn

  # 需要先安装pm2,使用pm2的delete命令删除原来已经在运行的服务。
  pm2 delete -s "blog-client"

  #使用pm2 命令执行 npm run start,并为当前服务命名
  pm2 start npm --name "blog-client" -- run start --watch

nginx配置

 server {
        listen 80;
        server_name 域名;
        location / {
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;  
            proxy_set_header Connection "upgrade";
            proxy_set_header Host $host;
            proxy_set_header X-Nginx-Proxy true;
            proxy_cache_bypass $http_upgrade;
            proxy_pass http://127.0.0.1:7777; #反向代理,服务器起的项目地址
        }
    }

写在最后

如果构建点都不想点击的话,可以配置一下构建触发器, 提交代码触发任务构建,好了,不多说了,有问题可以留言哦

本文发布于:2022-01-07 17:00:50

文章标签: Jenkins

版权声明:原创文章,如需转载,请注明原出处,避免错误及误导,以便溯源

本文地址: https://wowmonkey.cn/article/61d8014256511c228e68e614

暂无评论,你来说两句?