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

背景

从策划到设计制作，每一步都追求做到细腻，制作可持续发展的企业网站。为客户提供做网站、成都网站设计、网站策划、网页设计、域名注册、网络空间、网络营销、VI设计、网站改版、漏洞修补等服务。为客户提供更好的一站式互联网解决方案,以客户的口碑塑造优易品牌,携手广大客户,共同发展进步。

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

目标

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

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

技术方案

选用 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项目的方法步骤
标题链接：http://kswjz.com/article/ipecjc.html

扫二维码与项目经理沟通

我们在微信上24小时期待你的声音

解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流

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

扫二维码与项目经理沟通

其他资讯

行业动态

企业网站建设的重要性！

服务项目

网站建设

移动端/APP

微信/小程序

技术支持

其它服务

更多服务项目

联系吧在百度地图上找到我们

电话：13518219792

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

扫二维码与项目经理沟通

其他资讯

行业动态

企业网站建设的重要性！

服务项目

网站建设

移动端/APP

微信/小程序

技术支持

其它服务

更多服务项目

联系吧 在百度地图上找到我们

电话：13518219792

联系吧在百度地图上找到我们