使用Jenkins部署React项目的方法步骤

网络编程 2024/12/31 佚名

2 0 1

蝙蝠岛资源网 Design By www.hbtsch.com

背景

公司的前端项目部署方式比较简单，整个过程基本上是手动的；

目标

通过工具实现以下几个任务：

编译、部署自动化；
选择指定版本进行回滚；
区分不同的分支（环境）；

技术方案

选用 jenkins 作为部署工具；也便于后续 CI 的接入；
使用 docker 进行编译，确保每次编译的环境的稳定；

步骤

步骤一：搭建 Jenkins

搭建 Jenkins 有很多方案，这里选择使用 docker 搭建。

docker-compose.yml 的内容如下：

version: '3'
services:
 fejenkins:
  user: root
  image: jenkinsci/blueocean
  ports:
   - "8080:8080"
   - "50000:50000"
  volumes:
   - /data/jenkins_home:/var/jenkins_home
   - /data/nm_cache:/var/nm_cache
   - /var/run/docker.sock:/var/run/docker.sock

通过 docker-compose up 命令启动；启动后通过初始密码进行第一个用户的创建和 Jenkins 初始化的一些列操作，初始密码会打印在 jenkins docker 启动命令行的输出中，注意查看。

当然也可以不使用 docker-compose：

docker run --rm -u root -v /data/jenkins_home:/var/jenkins_home -v /data/nm_cache:/var/nm_cache -v /var/run/docker.sock:/var/run/docker.sock -p 8080:8080 -p 50000:50000 jenkinsci/blueocean

稍做解释：

/data/jenkins_home:/var/jenkins_home /var/jenkins_home 是 jenkinsci image 的默认数据存放路径，这里将路径映射到宿主机的指定文件夹；
/data/nm_cache:/var/nm_cache nm_cache 涵义是 node_modules cache，顾名思义，这里是想对编译所需的 node_modules 做缓存，将缓存文件夹也映射到宿主机；
/var/run/docker.sock:/var/run/docker.sock 这里是将宿主机运行 docker 后产生的 sock 文件映射到了 jenkins container 中。这样，jenkins 中使用 docker 进行编译时，其实是使用宿主机的 docker 来运行的，而不是在 docker container 中又启动了 docker。这里稍微有点绕，若是暂时看不明白，需要找一些深入介绍 docker 的文章阅读；

步骤二：配置 Jenkins

添加 Credentials

通过 Jenkins 进行 git 操作需要对应 git repo 的权限，这里需要用到有 git repo 权限的密钥文件。同样，通过 Jenkins 将编译产物 scp 到服务器上的时候，也需要服务器的密钥文件。

这两类密钥文件需要配置在 Jenkins 中，在：Jenkins > Credentials > System > Global credentials (unrestricted) 里进行 Add Credentials 的操作。

添加 Jenkins Item

Jenkins > New Item，然后选择 Pipeline，在下面的 Pipeline 配置区域的 Definition 中选择 Pipeline script，Script 如下：

pipeline {
  environment {
    SERVER_IP_1 = "11.22.33.44"
    SERVER_CREDENTIALSID = "abcd1234-abcd-abcd-abcd-abcd1234abcd"
    SERVER_DEPLOY_DIR = "/your/www/path/"

    CACHE_DIR = "/var/nm_cache/your_project_name/"

    GIT_URL = "git@github.com:example/example.git"
    GIT_BRANCH = "master"
    GIT_CREDENTIALSID = "abcd1234-abcd-abcd-abcd-abcd1234abcd"
  }
  agent none
  stages {
    stage('Checkout code') {
      agent any
      steps {
        git (
          branch: "${GIT_BRANCH}",
          credentialsId: "${GIT_CREDENTIALSID}",
          url: "${GIT_URL}",
          changelog: true
        )
        sh '''
          ls -al
          cache_dir="${CACHE_DIR}"
          cache_nm="${CACHE_DIR}node_modules"
          cache_lock="${CACHE_DIR}yarn.lock"

          if [ ! -d "$cache_dir" ]; then mkdir ${cache_dir}; fi
          if [ ! -d "$cache_nm" ]; then mkdir ${cache_nm}; fi
          if [ -d "$cache_nm" ]; then ln -sf ${cache_nm} ./; fi
          if [ -f "$cache_lock" ]; then mv -n ${cache_lock} .; fi

          ls -al
        '''
      }
    }
    stage('Build') {
      agent {
        docker {
          image 'node:8-alpine'
          args ''
        }
      }
      steps {
        sh '''
          npm config set registry https://registry.npm.taobao.org
          yarn install
          yarn build
          tar -cvf build.tar build

          ls -al
          mv ./yarn.lock ${CACHE_DIR}
          rm -rf ./node_modules
          ls -al
        '''
        archiveArtifacts artifacts: 'build.tar', fingerprint: true
      }
    }
    stage('Deploy') {
      agent any
      steps {
        unarchive mapping: ['build.tar': 'build.tar']
        echo '--- Deploy ---'

        sshagent(["${SERVER_CREDENTIALSID}"]) {
         sh "scp -o StrictHostKeyChecking=no build.tar root@${SERVER_IP_1}:${SERVER_DEPLOY_DIR}"
         sh "ssh -o StrictHostKeyChecking=no root@${SERVER_IP_1} \"rm -rf ${SERVER_DEPLOY_DIR}build; tar -xvf ${SERVER_DEPLOY_DIR}build.tar -C ${SERVER_DEPLOY_DIR}\""
        }

      }
    }
  }
}

稍做解释：

这个部署脚本分为三个步骤：

Checkout code（在指定 git 仓库通过指定证书文件获取代码）
Build（通过指定命令进行编译，将编译后的产物存档）
Deploy（通过指定命令部署）

在 Build 阶段前后，我们各做了一些工作，以求每次部署可以复用 node_modules，因为下载 node_modules 的时间可能很长，而并不是每次都会修改 package.json，所以其实 node_modules 大概率可以复用；

编译前：

看指定 node_modules 缓存文件夹是否存在，不存在则新建该文件夹；
看缓存文件夹中是否有 node_modules 文件夹，如果没有则新建该文件夹；并且将该文件夹软连接到当前目录；
看缓存文件夹中是否有 yarn.lock 文件，如果有则移动到当前文件夹；

编译后：

移除 node_modules 文件夹的软连接；
将 yarn.lock 文件移动到缓存文件夹中；

这里使用了 yarn install 的某些特性：

没有 node_modules 或者 yarn.lock 时会安装全量依赖；
有 node_modules 和 yarn.lock 但是 yarn.lock 和 package.json 不匹配时，会安装所需依赖；
有 node_modules 和 yarn.lock，且 yarn.lock 和 packge.json 配置时，跳过安装依赖；

使用

编译和部署

编译和部署直接点击 Build Now 即可；

回滚

回滚的本质其实是：重新部署某个历史版本。在 Build History 找到想要重新部署的版本，点击 Restart from Stage，在新页面中选择 Stage Name 为 Deploy。

其他

若是想要进入 docker container 交互，可以通过以下命令

docker exec -i -t [dockername] /bin/bash

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

Jenkins部署React项目

标签：

Jenkins部署React项目

蝙蝠岛资源网 Design By www.hbtsch.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

蝙蝠岛资源网 Design By www.hbtsch.com

评论“使用Jenkins部署React项目的方法步骤”

暂无使用Jenkins部署React项目的方法步骤的评论...

www.hbtsch.com 蝙蝠岛资源网

139,976影音资源

144,792福利资源

21,817软件资源

631,128技术资源

使用Jenkins部署React项目的方法步骤

Jenkins部署React项目

Vue实现一个图片懒加载插件

vue基础之v-bind属性、class和style用法分析

评论“使用Jenkins部署React项目的方法步骤”

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

更新日志

友情链接