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

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

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

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

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

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

软件配置:

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

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

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

1. java环境安装

// 列出所有可安装的rpm软件包
yum list java-1.8*

// 安装
yum install java-1.8.0-openjdk* -y
// 安装完成后执行 java -version 查看是否安装成功，如下图所示则成功：

2. 安装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：

图2：

图3：

图4：

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

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

1. 选择安装推荐插件

2. 插件安装完成后会跳转到创建管理员，如下图：

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

3. 至此jenkins安装完毕

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

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

1. 在jenkins中安装gitee，nodejs插件

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

nodejs下载同理

2. 配置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 步骤。

3. 配置nodejs插件

• 前往 系统管理 -> 全局工具配置->NodeJS

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

  如图：

4. 点击新建任务 > 输入项目名称 > 选择第一个Freestyle project > 确定

5. 任务配置

• 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

 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; #反向代理，服务器起的项目地址
        }
    }

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