《小团队web技术搭建》（六）自动化部署方式（CI/CD）（一）

岛民小强
7,678 阅读8分钟

本文正在参加「金石计划 . 瓜分6万现金大奖」

欢迎关注系列专栏：《小团队web技术搭建》

《小团队web技术搭建》（一）环境和工具的准备-第一部分
《小团队web技术搭建》（二）环境和工具的准备-第二部分
《小团队web技术搭建》（三）环境和工具的准备-第三部分
《小团队web技术搭建》（四）虚拟机的安装使用
《小团队web技术搭建》（五）项目的简单部署方式
《小团队web技术搭建》（六）自动化部署方式（CI/CD）（一）
《小团队web技术搭建》（七）自动化部署方式（CI/CD）（二）
持续更新中...

在上一篇文章中，我们介绍了比较传统的部署方法，我们需要手动登上服务器上传和构建项目，效率也比较低，项目多时也不方便管理。

image.png

项目要发布时，负责运维的兄弟出去浪了联系不上怎么办？（运维同学随身携带电脑，不理你时一般是故意的）

13LLg.gif

我想起几年前一朋友描述他们家公司抢占运维同学的场景，那场面挺难忘的，就像大学的时候大家去自习的教室帮好基友“占座”，有放鞋子的、放书包的、放吃的、把自己放上去的（躺着）。

“占座”常见，“占人”怎么占？有直接到运维同学的工位上的直接等着的，有直接让部门里的女孩子去预约的，还有直接拿手抓饼和老酸奶之类的去“贿赂”的，各种手段，基本就差把运维绑起来供到自己部门里去了。

image.png

不过人家那是大公司，运维拥有着“至高无上”的权限，掌控着公司的发布大权，普通人是不能直接去操作，只能排队求人办事，这就是人情世故。

image.png

小公司可能就一两个运维人员，甚至没有运维，权限管控相对宽松；有没有什么方法，只要一次配好，发布的时候就点击一下就行，实现一键无痛发布，就像小时候妈妈出门前跟你说“饭妈妈做好了，你要吃的时候就热一下”的那种感觉，舒服，温馨，温暖。

当然是有的！

image.png

CI/CD介绍

为了解决手动部署出现的效率低、出错率高等缺点，出现了集成、测试、部署流程自动化的概念，我们经常称之为CI/CD，其中CI是持续集成（Continuous integration)，CD是持续部署（continuous deployment）或持续交付（Continuous Delivery）。

我们不用过于纠结上面三个概念，其中持续部署和持续交付是不同角度上不同的叫法，都是要求流程化自动化、高效发布到目的环境；持续集成就是把环境、团队成员代码、测试流程等流程化。

除了以上好处，还有很重要的一点，运维同学不至于被你们烦死。

image.png

空出更多运维资源，可以更专注到性能、安全问题上，所以CI/CD是个双赢的东西，岂不美哉。

下面我们介绍下主流的和非主流的CI/CD工具。

image.png

Jenkins

说到主流，Jenkins当之无愧。现在，我再来折磨下在第四篇文章中装好的Ubuntu虚拟机，用它来装Jenkins并演示完整流程。

安装Jenkins

为了不进行复杂繁琐的安装步骤，我选择Docker进行安装Jenkins。Docker的安装我们有在第二篇和第四篇文章都有介绍（不同系统版本）。

image.png

我们用docker搜索一下jenkins相关的镜像，关注第一个（star数第一的）：

docker search jenkins

image.png

提示让我们拉取jenkins/jenkins:lts镜像，也可以直接访问DockerHub的Jenkins主页查看说明。下面我们拉取这个镜像：

docker pull jenkins/jenkins:lts

为了方便在必要的时候访问到Jenkins的一些数据，我们建一个Jenkins目录，相关说明可在DockerHubJenkins主页看到：

image.png

新建jenkin home目录(自行设置,记住它)，并修改它的权限（不然docker运行容器会报权限错误）：

mkdir -p /var/jenkin_test_home
sudo chown -R 1000:1000 /var/jenkin_test_home/

查看我们下载的镜像，确保jenkins镜像已经就绪：

docker images

image.png

接下来咱们用它来跑一个容器：

docker run -d --name testjenkins -p 8080:8080 -p 50000:50000 -v /var/jenkin_test_home:/var/jenkins_home jenkins/jenkins:lts

我们来解释一下这行命令

  • -d 是让它到后台运行这样不用一直保持终端开启；
  • -p 8080:8080 -p 50000:50000 把容器的端口映射出来，支持多个，8080和50000端口都是Jenkins需要的，其中8080将是我们访问Jenkins应用端的端口；
  • --name testjenkins 是起一个你中意的名字；
  • -v /var/jenkin_test_home:/var/jenkins_home容器的某个目录映射到你刚才新建的目录；
  • jenkins/jenkins:lts 镜像名称，我们下载时候用的就是它

容器后台运行了，我们看看它是否真的在跑，可以用ps查看容器状态:

docker ps

image.png

或者去看看容器的日志是否正常：

docker logs testjenkins

image.png

看起来是正常了，查看一下服务器（这里我用的是虚拟机，所以查看本地ip，正常服务器需要去访问公网ip）：

image.png

浏览器访问jenkins（8080端口）http://192.168.1.100:8080/，看到界面已经出来了，需要我们做一些初始化工作。

image.png

按照它给的提示我们我们去找下我们映射的jenkins home目录下的文件内容，把它复制粘贴到密码输入框，然后点继续(这字符串也是作为jenkins的admin密码)：

cat /var/jenkin_test_home/secrets/initialAdminPassword

image.png

image.png

然后按照它的提示慢慢往下点（可以自己按需选择少量插件安装加快速度，后面还可以加装；或者在这一步之前把它换成国内镜像源会快些），等待它安装，：

image.png

image.png

配置一个账号或者点击下方的使用admin账号：

image.png

安装完成： image.png

image.png

image.png

准备一个项目

我们以上次用的github仓库small-team-tech为例，并上传了一个加了构建流程的项目：

npm run build

执行上面的命令会显示Hello World + 构建时间，就知道是否发布成功了。

安装需要的jenkins插件

在首页依次进入Manage Jenkins->Configure System->Nanage Plugins，在可安装列表中依次搜索并安装如下插件：

  • NPM and Yarn Wrapper and Steps (npm构建)
  • Publish Over SSH (远程连接服务器)
  • NodeJS Plugin (Node支持)

点击install without restart，不用重启。

配置远程服务器连接

由于我们的jenkins和要部署上去的服务器不是同一台机器，我们要配置一些东西让jenkins能远程访问到服务器，并把jenkins自动构建的产物上传到这台服务器。这里我们要部署的就是上一篇文章中我们用于部署的那台。

在jenkins所在的服务器，复制私钥：

# 手动复制下行命令输出的内容
cat ~/.ssh/id_rsa

在首页依次进入Manage Jenkins->Configure System->Publish over SSH image.png

在下列两张图的表单填写的东西我们说明下：

  • Passphrase 填写远程服务器ssh登录密码
  • Key 填写刚才复制的私钥
  • SSH Server Name 写一个你能分辨的名称
  • Hostname 远程服务器地址
  • Username 远程服务器ssh登录用户名
  • Remote Directory 写一个远程服务器的目录，这个目录必须要存在，这里因为我们要部署的位置在/www就填写了/www

image.png

image.png

点击下方的测试配置按钮，出现Success就说明连接配置ok，然后点击保存就行：

image.png

配置git权限

在首页依次进入Manage Jenkins->Manage Credentials->全局凭据 (unrestricted)->Add Credentials

我们先在jenkins服务器生成一个ssh key,并复制它的内容：

ssh-keygen -t rsa -C “youremail@qq.com”

# 内容显示出来后复制到git平台新增的一个ssh key，和下方添加凭据的Key一栏：
cat ~/.ssh/id_rsa

类型选SSH Username with private key，上面复制的内容粘贴到git平台新增的一个ssh key，和下方添加凭据的Key一栏： image.png

image.png

image.png

最后点击Create即可。

新建自动任务

现在我们有CI/CD工具了，需要上去配一些自动流程，在Jenkins里叫job(任务)，现在让我们点击Create a job:

image.png

在源码管理填写git信息，Credentials选择我们刚才新建的：

image.png

选一个你要拉取这个git仓库代码的分支（github现在默认分支为main）：

image.png

配置构建步骤：

image.png

配置构建构建操作，就是把构建产物传输到我们刚才新建的连接的服务器：

image.png

OK，我们点击保存，新建Job完成！

配置nginx

首先为对应上面构建脚本，我们到要部署的目标服务器新建一个目录用于存放项目构建物：

mkdir -p /www/projects/demo/demo2

修改nginx:

# 可用nginx -t 命令查看nginx配置文件路径
vi /etc/nginx/nginx.conf

在http字段下加一个server:

server { 
    listen 8990; 
    root /www/projects/demo/demo2; 
}

让nginx配置生效：

nginx -s reload

运行jenkins任务

我们搭建好了任务和nginx，现在运行下它：

image.png

image.png

然后再次等待： image.png

在这个过程，如果你觉得无聊或者它报红了，你可以点进去查看日志： image.png

在错误中尝试和排错多次后，我终于运行成功：

image.png

image.png

访问浏览器（nginx配的8990端口）http://47.96.177.197:8990/:

image.png

由于篇幅关系，我们有机会再介绍别的一些CI/CD工具，有点顶不住。

ceeb653ely8h4o1kpd53mg20a00a0tnp.gif

感谢阅读！欢迎关注系列专栏：《小团队web技术搭建》

avatar
文章
阅读
粉丝