React

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > React > Jenkins部署React项目

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

作者：ShadowStorm

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

背景

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

目标

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

技术方案

步骤

步骤一：搭建 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

稍做解释：

步骤二：配置 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}\""
        }

      }
    }
  }
}

稍做解释：

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

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

编译前：

编译后：

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

使用

编译和部署

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

回滚

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

其他

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

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

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

您可能感兴趣的文章:
阅读全文