「这是我参与2022首次更文挑战的第1天，活动详情查看：2022首次更文挑战」。

效率是我们日常开发中一个很看重的一个关键词。在当今主流的前端开发中，我们都会把开发完后的前端代码通过打包工具，构建成一个经过编译的包给部署到我们的服务器上去。当然在各别公司分工十分明确，部署项目自然是有对应的运维同学来完成，而对于一些个人开发者，或者小型公司的前端组织来说可能往往还是以前端手动打包手动部署的方式来完成，这就带来了时间成本的浪费，所以自动化部署其实是解放了这方面的双手来提速了开发的效率。

这篇文章其实比较适合拥有基础linux命令的同学和基础部署知识的同学食用，当然了如果是小白也没关系，坑都是一步步踩过来的，我也是自学一步步踩过来的，途中遇到太多的报错和失败才收获的宝贵经验，而我也才一年多的开发经验而已。

🛑 注意编写脚本命令的时候要注意命令之间的空格！！！！

一、什么是spug？

引入官方法文档的原话：Spug是面向中小型企业设计的轻量级无 Agent 的自动化运维平台，整合了主机管理、主机批量执行、主机在线终端、文件在线上传下载、应用发布部署、在线任务计划、配置中心、监控、报警等一系列功能。

而spug还是很优秀的开源项目，在github拥有7k的Star，是一个不错的开源项目，前端界面是我们很熟悉的React开发的，后端代码基于Django开发。如果用动手能力的可以完全自己二次开源，部署起来。

二、搭建spug

本身这篇文章的出发点就是以最快速和最简单的方式来搭起，所以同学们可以跟着下面的步骤一步步的来操作来完成我们标题最终的目的。

1. 环境准备

同学们最好可以准备一台比较稍微好点的服务器，因为我们需要借助docker服务来搭建，并且在项目构建的时候也需要一定的内存空间，和磁盘空间。

这里我挑选了一个我一个不常用的轻量测试服务器来进行演示。没有服务器的同学们可以在阿里云，华为云，腾讯云，百度云，青云等等云服务厂商进行选购或者申请首次使用。镜像系统我建议选择centos7.6，稳定性是比较脍炙人口的，当然这个并不是固定的。

而ssh工具也是我们日常开发中必不可少的一个工具，他可以很轻松让我们在本机连接我们的远程服务器。我本人的开发环境是mac，在mac生态里有一个比较实用和界面美观的ssh工具 --Termius，而使用windows系统的同学们我比较推荐的则是 --xshell，他们都是很优秀的软件。

xshell：

Termius：

2. 开始操作

首先我们通过ssh工具连接上我们的服务器(这里我就用Termius来演示)：

⛔️ 以下安装以centos系统环境为主，并且会多重复粘上代码块，方便同学复制。

第一步在登陆进命令行里我们首先安装 yum-utils，这个工具的主要作用是管理repository及扩展包的工具 (主要是针对repository)，等待安装无误之后，就会再次出现命令行输入，此时我们可以继续执行下一个命令。

yum install -y yum-utils

第二步我们执行以下命令。而当前执行的命令的意思是添加一个yum仓库源，而该仓库源正是我们的docker容器。而这后面docker-ce意思为社区版本的免费版，与之对应的还有docker-ee，它是面向企业的版本，收费，但是功能更加强悍。

yum-config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo

第三步继续执行以下命令，这个命令的意思为安装最新的docker引擎和容器

yum install docker-ce docker-ce-cli containerd.io

第四步我们只需要执行启动docker的命令即可，此时我们就已经把docker给安装到我们的服务器内并且运行了起来。


# 启动docekr
systemctl start docker

# 查看docker版本，验证docker安装成功
docker --version

第五步我们就要通过docker把我们spug的镜像源给安装过来。这里我们国内的用户可以选择阿里云的镜像源，这个是和docker hub是同步的，道理就和npm与cnpm一样

docker pull registry.aliyuncs.com/openspug/spug

第六步运行我们已经下载好的spug镜像，在这前提我们可以使用docker images查看镜像是已经被pull下到我们的服务器里。确定已经存在之后我们可以跑起来我们的spug。这里的步骤其实意思和我们前端程序员经常安装依赖之后yarn | npm install 再去跑起我们的项目一样，yarn dev | start | xxx。

这里运行spug的这条命令需要特别的讲解一下，首先 -d的意思是在后台运行容器并打印容器 ID。--restart=always的意思是在当 Docker 重启时，指定的容器能自动启动。 -p 8100:80 这里指的是我们将通过本地8100端口映射到容器的80端口，这里提一下最好不要以本地80端口为默认，容易导致spug的登陆会话权限问题#190，然后容器端口因为默认映射为80，不喜欢的同学可以去服务器修改docker/xxxx/nginx.conf里的配置。而且有防火墙开启的同学记得在自己的服务器控制台打开安全组打开对应的端口哦。当然也可以使用命令打开而这里我就不展开说说了这个部分资料很容易找到。

# 查看当前本地的docker镜像
docker images

# 运行spug
docker run -d --restart=always --name=spug -p 8100:80 -v /spug:/data registry.aliyuncs.com/openspug/spug

# 查看正在运行的镜像
docker ps -a

接下来我们就进入到运行的spug镜像里面，docker exec spug这个的意思是进入spug的容器之中，而后面就是执行了spug的初始化脚本命令init_spug 默认创建了一个密码为spug.dev账号为admin的用户。

docker exec spug init_spug admin spug.dev

然后我们重启一下spug容器

# 重启spug
docker restart spug

# 再次查看状态
docker ps -a

在docekr容器内我们安装一下node的环境，因为node自带了npm，也可以顺便借用npm把yarn安装到里面。在docker容器里安装node

#查看spug的镜像id
docker ps -a

# 进入到spug镜像里
# 注意命令间的空格
# 例子：docker exec -it d8s9a8da0as /bin/bash

docker exec -it [容器ID] /bin/bash

# 安装node
yum install nodejs

# 安装yarn
npm install yarn -g

3. 打开spug平台

现在我们可以通过浏览器地址栏输入自己的服务器公网ip打开自己运行的spug端口，来看看我们的spug运维平台是否跑了起来，无惊无险的话，哈哈😁 我们就能看到一下的界面

接下来我们输入刚刚默认生成的账号密码，进入到主界面我们就能看到spug的真面目了

当然最重要的是我们要先来改一下默认的账户密码。来到系统管理>账户管理，编辑一下我们默认的账户

4. 设置构建相关

首先我们可以先设定一个组的概念，比如生产机、测试机

然后加入我们将来要部署运行项目的服务器(因为当前演示的原因我就直接也用当前这个服务器来做部署机器，大家也可以这样尝试)，填好相关的信息之后，点击验证会跳到一个输入服务器密码的窗口，输入完服务器密码就可以看到我们的服务器被加入到我们的平台里了。

然后我们暂时先停在这里，去准备我们将要部署的前端项目。

三、准备一个前端项目

因为演示原因，我就暂且随便用一个前端项目来做演示吧。这里我选择使用一个svelte + typescript + vite 的一个创建项目来做演示。考虑到大家的服务器应该都是国内的，所以我们为了后面自动化构建的顺利，我们选用gitee来作为我们的代码仓库。

那么我这里就在我的小号gitee新建一个 spug-ci-demo的项目。🤣 这里我强调一下，因为可能我对代码的隔离度有比较大的洁癖，我通常练习的东西都会扔在这个小号的gitee或者的小号的github里，而我的主账号github和gitee则是自己都会维护的项目😁，所以大佬们不用看着账号有什么项目，忽略就好。

对于从没有使用过nginx或者其他web服务器部署过前端项目的同学，我在文章的结尾已经准备好了一篇教学文，大家按照步骤去做就可以了这里我就不展开教学了，不然内容就特别的庞大了。在centos7安装nginx，部署前端项目

1. 先成功利用nginx手动成功部署一次

把本地打包好的项目，扔到我们的服务器的nginx里面，这里我们使用的Termius是自带了ftp工具的，而windows同学可以下载使用xftp或者其他同类型的工具来操作。然后记得跟着结尾那篇nginx的文章来修改对应的nginx.conf(图三)配置，然后我们通过访问公网ip+nginx配置的端口来访问部署的前端项目(图四)

图一：

图二：

图三：

图四：

四、继续配置我们的spug

我们继续回到spug的平台，然后我们来到 配置中心>环境管理新建一个环境，这里我们新建一个测试环境。(这里其实就一个名字而已没有什么特别的)。

然后新建一个应用，表单的数据可以随意填写，但是尽量按照表单的提示规范来填写，方便后期可以好认。这个应用其实就是我们部署项目的一个任务组而已。

在当前应用新建一个发布，我们选择常规发布

然后我们从上往下按顺序填好信息。这里着重的讲解一下git仓库地址这部分因为权限等原因问题可能会导致我们的平台会读不出仓库的信息，所以填写代码地址的时候我们可以把账号密码也填在这个地址上类似的链接为：https://账号:密码@gitee.com/coderq-sub/spug-ci-demo.git，而且账号如果为邮箱地址或者带有@符合的一定要转译一下，比如 xxxx@qq.com -> 就要写成 xxxx%40qq.com

来到下一步，就要开始写我们构建时候的每一步shell的命令了。这里需要着重的讲一下，文件过滤规则这里指的是我们构建服务器把我们的代码拷贝下来之后的文件夹，这里我们可以选择包含，并且在下方的textarea填写一个/dist，意思为到时候只保留dist文件夹的东西，其余的都排除出去。代码检出前执行此时运行到我们是处于代码克隆下来的代码文件夹内部，这里我们通常可以为依赖添加软连接，让我们每次构建依赖的时候不用重新安装依赖，达到快速构建的目的。但是由于不想过于的复杂这里我们暂时只编写pwd，echo "代码检出前执行"两行命令，第一个是用来查看当前的目录地址是什么，第二个是打印后面的字符串，让我们方便在日志里查看代码的执行顺序。代码检出后执行这里我们就可以开始把依赖真正的安装下来，并且把代码打包成dist文件夹，当然我们依然打印当前地址和字符来便于判断，然后我们可以来到下一步。

来到配置的最后一步，这里讲解一下部署路径其实就是上面我们前端项目放在服务器的路径，但是这里有个比较特殊的情况spug会主动创建文件夹并且接管你填写的路径，所以因为我们上面已经创建好的缘故，我们这里可以暂时先随便填写一个文件地址，到时候后期清理即可。储存路径则是我们版本存储的一个地方，因为spug是默认支持回退版本的功能的，所以这里储存的是我们的一个构建的缓存版本，版本数量则是我们需要缓存多少个版本，这里我们写一版就好，当然这个也不是固定的看大家喜好。应用发布前执行这里我们就可以把刚刚打包好的dist文件夹里的所有文件通过\cp -rf强制不询问的覆盖到我们正在部署的项目文件夹里，这里加\的原因是因为linux的个别系统会对一些敏感命令有别名的设置这里大家可以输入验证一下就知道了alias，这里我们添加斜杠就是为了使用原有的命令。应用发布后执行一般可以做一些清除缓存和一些没必要留存的文件等等的命令操作，这里我们也暂时不用特别操作。编写完成之后我们点击提交

别名：

我们选择新建申请，这里的意思是我们手动创建一条部署申请

此时填好我们这次的发布内容，稍微等一会，平台就读取到了我们的代码仓库信息，并且可以选择当前的分支和要部署的那个版本的提交。点击确定。(为了确保我们的页面是成功部署了新的页面，此时我们需要打开本地的代码修改一些页面的内容，然后提交一个新的commit，来进行部署成新的页面)

接着我们点击确定之后就能看到一个弹出来的日志构建信息

GIf动图：

Large GIF (1388x864).gif

看到构建成功之后我们再次打开我们的前端项目地址，看看是否有变化。😁看来是成功的新添加的方法已经展示在页面。

GIf动图：

Large GIF (1008x666).gif

五、结合webhook达成最后的目的自动化构建

让我们继续打开应用管理选择我们创建的应用展开之后，点击webhook，选择我们要发布的代码分支或者tag。这里的意思是，只要选择的分支有变化或者tag有变化那么spug就会自动克隆最新的代码进行自动化部署。

这里我们选择好分支之后，下方的webhook URL就会生成一条链接，而底下的Secret Token则需要去设置自己的秘钥，秘钥的复杂程度自己决定就好。(图2)

然后我们来到代码仓库也就是我们现在的gitee，来到我们的项目里面。点击管理页面，找到webhook菜单，选择添加webhook

把我们刚刚webhook URL粘贴到下方的URL地址，而webhook签名则是我们自己设置的那个秘钥，然后下方你对自己的需要打上勾。这里的意思下方的五个条件那个触发之后都会进行一次推送数据，如果是进行webhook的构建服务的话就会被触发进行构建构建部署，所以这里我只需要push、Tag Push、Pull Request就足够了，然后点击添加。