热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

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

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

背景

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

目标

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

  • 编译、部署自动化;
  • 选择指定版本进行回滚;
  • 区分不同的分支(环境);

技术方案

  • 选用 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

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


推荐阅读
  • 本文介绍了Hyperledger Fabric外部链码构建与运行的相关知识,包括在Hyperledger Fabric 2.0版本之前链码构建和运行的困难性,外部构建模式的实现原理以及外部构建和运行API的使用方法。通过本文的介绍,读者可以了解到如何利用外部构建和运行的方式来实现链码的构建和运行,并且不再受限于特定的语言和部署环境。 ... [详细]
  • 大坑|左上角_pycharm连接服务器同步写代码(图文详细过程)
    篇首语:本文由编程笔记#小编为大家整理,主要介绍了pycharm连接服务器同步写代码(图文详细过程)相关的知识,希望对你有一定的参考价值。pycharm连接服务 ... [详细]
  • 本文由编程笔记#小编为大家整理,主要介绍了markdown[软件代理设置]相关的知识,希望对你有一定的参考价值。 ... [详细]
  • 现在比较流行使用静态网站生成器来搭建网站,博客产品着陆页微信转发页面等。但每次都需要对服务器进行配置,也是一个重复但繁琐的工作。使用DockerWeb,只需5分钟就能搭建一个基于D ... [详细]
  • 在Docker中,将主机目录挂载到容器中作为volume使用时,常常会遇到文件权限问题。这是因为容器内外的UID不同所导致的。本文介绍了解决这个问题的方法,包括使用gosu和suexec工具以及在Dockerfile中配置volume的权限。通过这些方法,可以避免在使用Docker时出现无写权限的情况。 ... [详细]
  • Centos7.6安装Gitlab教程及注意事项
    本文介绍了在Centos7.6系统下安装Gitlab的详细教程,并提供了一些注意事项。教程包括查看系统版本、安装必要的软件包、配置防火墙等步骤。同时,还强调了使用阿里云服务器时的特殊配置需求,以及建议至少4GB的可用RAM来运行GitLab。 ... [详细]
  • 使用在线工具jsonschema2pojo根据json生成java对象
    本文介绍了使用在线工具jsonschema2pojo根据json生成java对象的方法。通过该工具,用户只需将json字符串复制到输入框中,即可自动将其转换成java对象。该工具还能解析列表式的json数据,并将嵌套在内层的对象也解析出来。本文以请求github的api为例,展示了使用该工具的步骤和效果。 ... [详细]
  • 本文介绍了一些Java开发项目管理工具及其配置教程,包括团队协同工具worktil,版本管理工具GitLab,自动化构建工具Jenkins,项目管理工具Maven和Maven私服Nexus,以及Mybatis的安装和代码自动生成工具。提供了相关链接供读者参考。 ... [详细]
  • SpringBoot整合SpringSecurity+JWT实现单点登录
    SpringBoot整合SpringSecurity+JWT实现单点登录,Go语言社区,Golang程序员人脉社 ... [详细]
  • 本文探讨了容器技术在安全方面面临的挑战,并提出了相应的解决方案。多租户保护、用户访问控制、中毒的镜像、验证和加密、容器守护以及容器监控都是容器技术中需要关注的安全问题。通过在虚拟机中运行容器、限制特权升级、使用受信任的镜像库、进行验证和加密、限制容器守护进程的访问以及监控容器栈,可以提高容器技术的安全性。未来,随着容器技术的发展,还需解决诸如硬件支持、软件定义基础设施集成等挑战。 ... [详细]
  • 我创建了一个SSH密钥,当我以admin身份在GitBash中运行ssh-Tgit@gitlab.com时,我得到W ... [详细]
  • 这篇文章给大家介绍怎么从源码启动和编译IoTSharp ,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。IoTSharp项目是 ... [详细]
  • Docker安装Rabbitmq(配合宝塔)
    篇首语:本文由编程笔记#小编为大家整理,主要介绍了Docker安装Rabbitmq(配合宝塔)相关的知识,希望对你有一定的参考价值。一、事前准备 ... [详细]
  • docker+k8s+git+jenkins
    docker+k8s+git+jenkins,Go语言社区,Golang程序员人脉社 ... [详细]
  • Docker系列 七. Docker 安装Jenkins
    Docker系列七.Docker安装JenkinsJenkins是一个开源软件项目,是基于Java开发的一种持续集成工具,用于监控持续重复的工作 ... [详细]
author-avatar
幸运幸福摩天轮的世界
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有