使用 Caddy 自动化发布 Web 应用

前言

Caddy 是一个跟 Nginx 类似的 web 服务器，拥有很多强大的特性，这篇文章是关于如何使用 Caddy 的 http.git 插件配合代码托管平台的 webhook 进行自动发布 Web 应用。

Webhook 就是在代码仓库发生某些事件时(如 push, pull, fork等)，向所配置的地址发送 post 请求，并带上这次事件的信息。

Github 设置

首先在 Github 上新建一个仓库，在本地新建一个 Vue 项目，将代码提交到 Github，在仓库的 Settings 里面配置 webhook。需要配置一个用于接受 Github 发送 post 请求的地址，一个 secret 以及设置在什么事件的情况下发送请求，默认 push 事件就可以了。

另外需要在 Github 上添加一个服务器的 ssh key，用于在服务器上克隆项目。

服务器配置

首先在服务器上安装 Caddy 下载地址，选择 http.git 插件，其它插件按需即可，然后使用网站上提供的命令安装。

然后为 Caddy 创建一个配置文件，在 /etc 目录下创建 Caddyfile 配置文档，需要配置两个服务，一个用来接受 Github 发送的 post 请求，一个用来运行打包之后的 web 项目。

http://justcodeit.fun:3001 {root /root/github/vue-caddy-test/dist                     # 打包后应用位置
}http://justcodeit.fun:3002 {git {repo ssh://git@github.com:xrr2016/vue-caddy-test.git  # 仓库地址path /root/github/vue-caddy-test                      # 源码位置hook /webhook vue-caddy-test                          # webhook 配置then npm install                                      # 要执行的命令then npm run build                                    # 要执行的命令then echo done                                        # 要执行的命令}
}
复制代码

使用 Caddy

使用命令启动 caddy，启动后会自动 clone 项目到配置的 path 目录，一切顺利的话，在配置的应用运行地址就可以访问页面了。

然后在本地修改代码提交到 Github，触发 push 事件，Github 向我们配置的地址发送一个 post请求，服务器接受到这个请求开始执行定义的命令。

caddy --conf /etc/Caddyfile
复制代码

control + c 关闭 Caddy，使用 pm2 就可以将 Caddy 在后台运行了。

pm2 start caddy -n caddy -- -conf /etc/Caddyfile
复制代码

参考

caddy-git

caddy-service