使用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://myzitong.com/article/ipecjc.html