主页 / 网络编程 /

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

网络编程 2021-07-04 15:50www.168986.cn编程入门

这篇文章主要介绍了使用Jenkins部署React项目的方法步骤，长沙网络推广觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随长沙网络推广过来看看吧

背景

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

目标

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

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

技术方案

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

步骤

步骤一搭建 Jenkins

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

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

也可以不使用 docker-pose

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，在狼蚁网站SEO优化的 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//path/"

    CACHE_DIR = "/var/nm_cache/your_project_name/"

    GIT_URL = "git@github.: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.
          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

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

上一篇：Vue实现一个图片懒加载插件下一篇：vue基础之v-bind属性、class和style用法分析

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

狼蚁网络搜索

狼蚁网络导航

长沙seo优化

长沙网络营销

长沙网站建设

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

编程语言

狼蚁网络搜索

狼蚁网络导航

长沙seo优化

长沙网络营销

长沙网站建设