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

2024-05-06 15:41:44

字体：大中小

来源：转载

供稿：网友

背景

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

目标

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

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

技术方案

选用 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}/""        }      }    }  }}

上一篇：详解javascript 变量提升（Hoisting）

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