在Ubuntu16.04上使用Webhooks和Slack部署React应用程序

来自菜鸟教程
跳转至:导航、​搜索

作为 Write for DOnations 计划的一部分,作者选择了 Tech Education Fund 来接受捐赠。

介绍

当开发人员对应用程序进行持续更改时,带有 webhook 的部署系统可以简化开发,特别是对于团队而言。 如果团队的一部分依赖 API 等后端软件,那么将代码更改的 Slack 通知集成到团队的工作流程中也会很有帮助。

在本教程中,您将使用 create-react-app npm 包 构建一个 React 应用程序。 这个包通过转换语法和简化依赖项和必备工具的工作,简化了引导 React 项目的工作。 将应用程序代码添加到 GitHub 存储库后,您将配置 Nginx 以提供更新的项目文件。 然后,您将下载并设置 webhook 服务器,并配置 GitHub 以在修改代码时与其通信。 最后,您将配置 Slack 以充当另一个 webhook 服务器,它会在触发成功部署时接收通知。

最终,您在本文中构建的部署系统将如下所示:

这段简短的视频展示了一个空提交并推送到 GitHub 存储库,这会触发 Slack 中的应用程序构建和通知。

先决条件

要完成本教程,您需要:

  • 一个 Ubuntu 16.04 服务器,您可以按照 Initial Server Setup with Ubuntu 16.04 教程 进行设置。 遵循本指南后,您应该拥有一个具有 sudo 权限的非 root 用户帐户。
  • 按照 如何在 Ubuntu 16.04 上安装 Nginx 的前两个步骤在您的服务器上安装 Nginx。
  • 在本地机器和服务器上配置 Git。 您可以在本教程的 git 入门 中找到安装和配置 Git 的说明。
  • Node.js 和 npm 安装在您的本地机器和服务器上。 对于您的服务器,请按照 如何在 Ubuntu 16.04 上安装 Node.js 中有关从 PPA 安装 Node.js 的说明进行操作。 在您的本地机器上,您可以按照 项目的安装说明
  • 按照 installing yarn 的官方指南在您的服务器上安装 Yarn。
  • 为通知配置 Slack 和单个通道的权限。 您可以在 Slack 权限文档 中找到有关角色和权限的更多信息。

第 1 步——使用 create-react-app 创建一个 React 应用程序

让我们首先构建我们将使用 create-react-app 测试我们的 webhook 的应用程序。 然后我们可以创建一个 GitHub 存储库并将项目代码推送到它。

在本地计算机上,将 create-react-app 节点模块添加到全局存储库,并使 create-react-app 命令在您的 shell 环境中可用:

sudo npm install -g create-react-app

接下来,运行 create-react-app 创建一个名为 do-react-example-app 的项目:

create-react-app do-react-example-app

导航到目录 do-react-example-app

cd do-react-example-app

使用 nano 或您喜欢的文本编辑器,打开 package.json 文件:

nano package.json

该文件应如下所示:

~/do-react-example-app/package.json

{
  "name": "do-react-example-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "react-scripts": "1.0.17"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

package.json 文件包括以下脚本:

  • start:这个脚本负责启动应用程序的开发版本。 它运行一个为应用程序服务的 HTTP 服务器。
  • build:这个脚本负责制作应用程序的生产版本。 您将在服务器上使用此脚本。
  • test:此脚本运行与项目关联的默认测试。
  • eject:此脚本是 create-react-app 包的高级功能。 如果开发人员对包提供的构建环境不满意,可以“弹出”应用程序,这将产生原本不可用的选项(包括自定义 CSS 转译器和 JS 处理工具等)。

检查完代码后关闭文件。

接下来,让我们为项目创建一个 GitHub 存储库。 您可以按照本教程 创建 GitHub 存储库 获得指导。 记下存储库的来源(即 其 GitHub URL)。

回到您的 do-react-example-app 目录,使用 git 初始化存储库:

git init

接下来,使用您的 GitHub URL 添加远程源:

git remote add origin your-github-url

暂存项目目录中的所有文件:

git add .

提交他们:

git commit -m "initial commit"

并将它们推送到存储库:

git push origin master

有关使用 git 创建 GitHub 存储库和初始化现有应用程序的更多信息,请参阅 GitHub 的 文档

完成存储库设置后,我们可以继续在服务器上指定配置详细信息。

第 2 步 — 目录设置和 Nginx 配置

存储库到位后,现在可以从 GitHub 拉取应用程序代码并配置 Nginx 来为应用程序提供服务。

登录到您的服务器,转到您的主目录,然后克隆您的存储库:

cd ~
git clone your-github-url

转到克隆的项目:

cd do-react-example-app

要在项目和文件中创建构建目录以供 Nginx 服务,您将需要运行 yarn build 命令。 这将运行项目的构建脚本,创建构建目录。 此文件夹包括 index.html 文件、JavaScript 文件和 CSS 文件等。 yarn 命令将为您的项目下载所有必需的节点模块:

yarn && yarn build

接下来,让我们在 /var/www/ 目录中创建一个指向 ~/do-react-example-app 目录的符号链接。 这会将应用程序保留在我们的主目录中,同时让 Nginx 可以从 /var/www 目录提供服务:

sudo ln -s ~/do-react-example-app /var/www/do-react-example-app

请注意,这链接到项目目录而不是生成目录,后者更频繁地更改。 在部署应用程序的新版本的情况下,创建此链接特别有用:通过创建指向稳定版本的链接,您可以在部署其他版本时简化稍后将其换出的过程。 如果出现问题,您也可以以相同的方式恢复到以前的版本。

应该在符号链接上设置一些权限,以便 Nginx 可以正确提供它:

sudo chmod -R 755 /var/www

接下来,让我们配置一个 Nginx 服务器块来为构建目录提供服务。 通过键入以下内容进行新的服务器配置:

sudo nano /etc/nginx/sites-available/test-server

复制以下配置,将 your_server_ip_or_domain 替换为您的 IP 或域(如果适用):

/etc/nginx/sites-available/test-server

server {
        listen 80;

        root /var/www/do-react-example-app/build;
        index index.html index.htm index.nginx-debian.html;

        server_name your_server_ip_or_domain;

        location / {
                try_files $uri /index.html;
        }
}

该文件中的指令包括:

  • listen:配置服务器监听端口的属性。
  • root:Ngnix 将提供文件的文件夹的路径。
  • index:服务器首先尝试服务的文件。 它将尝试从 /var/www/do-react-example-app/build 目录中提供以下任何文件:index.htmlindex.htmindex.nginx-debian.html,优先级从第一个到最后一个。
  • server_name:服务器域名或IP。

接下来,在 sites-enabled 目录中创建一个符号链接:

sudo ln -s /etc/nginx/sites-available/test-server /etc/nginx/sites-enabled/test-server

这将告诉 Nginx 从 sites-available 文件夹启用服务器块配置。

检查配置是否有效:

sudo nginx -t

最后,重启 Nginx 以应用新配置:

sudo systemctl restart nginx

有了这些配置细节,我们就可以继续配置 webhook。

第 3 步 — 安装和配置 Webhook

Webhook 是简单的 HTTP 服务器,具有称为 hooks 的可配置端点。 在接收到 HTTP 请求后,webhook 服务器会执行符合一组可配置规则的可定制代码。 互联网上已经有许多 webhook 服务器集成到应用程序中,包括 Slack。

Webhook 服务器最广泛使用的实现是 Webhook,用 Go 编写。 我们将使用这个工具来设置我们的 webhook 服务器。

确保您位于服务器上的主目录中:

cd ~

然后下载webhook

wget https://github.com/adnanh/webhook/releases/download/2.6.6/webhook-linux-amd64.tar.gz

提取它:

tar -xvf webhook-linux-amd64.tar.gz

通过将二进制文件移动到 /usr/local/bin 使二进制文件在您的环境中可用:

sudo mv webhook-linux-amd64/webhook /usr/local/bin

最后,清理下载的文件:

rm -rf webhook-linux-amd64*

通过键入以下内容测试 webhook 在您的环境中的可用性:

webhook -version

输出应显示 webhook 版本:

Outputwebhook version 2.6.5

接下来,让我们在/opt目录下设置hooksscripts文件夹,第三方应用程序的文件通常存放的地方。 由于 /opt 目录通常归 root 所有,因此我们可以创建具有 root 权限的目录,然后将所有权转移到本地 $USER

首先,创建目录:

sudo mkdir /opt/scripts
sudo mkdir /opt/hooks

然后将所有权转移到您的 $USER

sudo chown -R $USER:$USER /opt/scripts
sudo chown -R $USER:$USER /opt/hooks

接下来,让我们通过创建 hooks.json 文件来配置 webhook 服务器。 使用 nano 或您喜欢的编辑器,在 /opt/hooks 目录下创建 hooks.json 文件:

nano /opt/hooks/hooks.json

为了在 GitHub 发送 HTTP 请求时触发 webhook,我们的文件需要一个 JSON 规则数组。 这些规则包含以下属性:

{
    "id": "",
    "execute-command": "",
    "command-working-directory": "",
    "pass-arguments-to-command": [],
    "trigger-rule": {}
}

具体来说,这些规则定义了以下信息:

  • id:webhook 服务器将服务的端点的名称。 我们称之为 redeploy-app
  • execute-command:触发钩子时将执行的脚本的路径。 在我们的例子中,这将是位于 /opt/scripts/redeploy.sh 中的 redeploy.sh 脚本。
  • command-working-directory:执行命令时将使用的工作目录。 我们将使用 /opt/scripts 因为这是 redeploy.sh 所在的位置。
  • pass-arguments-to-command:从HTTP请求传递给脚本的参数。 我们将从 HTTP 请求的有效负载中传递提交消息、推送器名称和提交 ID。 同样的信息也将包含在您的 Slack 消息中。

/opt/hooks/hooks.json 文件应包含以下信息:

/opt/hooks/hooks.json

[
  {
    "id": "redeploy-app",
    "execute-command": "/opt/scripts/redeploy.sh",
    "command-working-directory": "/opt/scripts",
    "pass-arguments-to-command":
    [
      {
        "source": "payload",
        "name": "head_commit.message"
      },
      {
        "source": "payload",
        "name": "pusher.name"
      },
      {
        "source": "payload",
        "name": "head_commit.id"
      }
    ],
    "trigger-rule": {}
  }
]

GitHub HTTP POST 请求的负载包括 head_commit.messagepusher.namehead_commit.id 属性。 当您的 GitHub 存储库中发生配置的事件(如 PUSH)时,GitHub 将发送一个 POST 请求,其中包含有关该事件的信息的 JSON 正文。 这些 POST 有效负载的一些示例可以在 GitHub 事件类型文档 中找到。

配置文件中的最后一个属性是 trigger-rule 属性,它告诉 webhook 服务器在什么情况下会触发 hook。 如果留空,挂钩将始终被触发。 在我们的例子中,我们将配置当 GitHub 向我们的 webhook 服务器发送 POST 请求时触发的钩子。 具体来说,只有当 HTTP 请求中的 GitHub 密码(这里表示为 your-github-secret)与规则中的密码匹配,并且提交发生在 master 分支时才会触发。

添加以下代码以定义 trigger-rule,将 your-github-secret 替换为您选择的密码:

... 
    "trigger-rule":
    {
      "and":
      [
        {
          "match":
          {
            "type": "payload-hash-sha1",
            "secret": "your-github-secret", 
            "parameter":
            {
              "source": "header",
              "name": "X-Hub-Signature"
            }
          }
        },
        {
          "match":
          {
            "type": "value",
            "value": "refs/heads/master",
            "parameter":
            {
              "source": "payload",
              "name": "ref"
            }
          }
        }
      ]
    }
  }
]

完整的 /opt/hooks/hooks.json 将如下所示:

/opt/hooks/hooks.json

[
  {
    "id": "redeploy-app",
    "execute-command": "/opt/scripts/redeploy.sh",
    "command-working-directory": "/opt/scripts",
    "pass-arguments-to-command":
    [
      {
        "source": "payload",  
        "name": "head_commit.message"
      },
      {
        "source": "payload",
        "name": "pusher.name"
      },
      {
        "source": "payload",
        "name": "head_commit.id"
      }
    ],
    "trigger-rule":
    {
      "and":
      [
        {
          "match":
          {
            "type": "payload-hash-sha1",
            "secret": "your-github-secret", 
            "parameter":
            {
              "source": "header",
              "name": "X-Hub-Signature"
            }
          }
        },
        {
          "match":
          {
            "type": "value",
            "value": "refs/heads/master",
            "parameter":
            {
              "source": "payload",
              "name": "ref"
            }
          }
        }
      ]
    }
  }
]

最后一个要检查的配置项是服务器的防火墙设置。 webhook 服务器将监听端口 9000。 这意味着如果防火墙在服务器上运行,它需要允许连接到这个端口。 要查看当前防火墙规则的列表,请键入:

sudo ufw status

如果端口 9000 未包含在列表中,请启用它:

sudo ufw allow 9000

有关 ufw 的更多信息,请参阅 ufw 要领 的介绍。

接下来,让我们设置我们的 GitHub 存储库以将 HTTP 请求发送到此端点。

第 4 步 — 配置 GitHub 通知

让我们配置我们的 GitHub 存储库以在向 master 提交时发送 HTTP 请求:

    1. 转到您的存储库并单击 设置
    1. 然后转到 Webhooks 并点击右上角的 Add Webhook
    1. 对于 Payload URL,键入您的服务器地址,如下所示:http://your_server_ip:9000/hooks/redeploy-app。 如果您有域名,您可以使用它来代替 your_server_ip。 请注意,端点名称与挂钩定义中的 id 属性匹配。 这是 webhook 实现的细节:在 hooks.json 中定义的所有钩子将在 URL 中显示为 http://your_server_ip:9000/hooks/id,其中 idhooks.json 文件。
    1. 对于内容类型,选择application/json
    1. 对于 Secret,键入您在 hooks.json 定义中设置的密钥 (your-github-secret)。
    1. 对于 您希望哪些事件触发此 webhook? 选择 Just push event
    1. 单击 添加 webhook 按钮。

现在,当有人将提交推送到您的存储库时,GitHub 将发送一个 POST 请求,其中包含有关提交事件的信息的有效负载。 在其他有用的属性中,它将包含我们在触发规则中定义的属性,因此我们的 webhook 服务器可以检查 POST 请求是否有效。 如果是,它将包含其他信息,例如 pusher.name

可以在 GitHub Webhooks 页面 上找到随有效负载发送的属性的完整列表。

第 5 步 — 编写部署/重新部署脚本

此时,我们已将 webhook 指向 redeploy.sh 脚本,但我们尚未创建脚本本身。 它将完成从我们的存储库中提取最新的主分支、安装节点模块和执行构建命令的工作。

创建脚本:

nano /opt/scripts/redeploy.sh

首先,让我们在脚本顶部添加一个函数,该函数将清理它创建的所有文件。 如果重新部署未成功通过,我们也可以将其用作通知 Slack 等第三方软件的地方:

/opt/scripts/redeploy.sh

#!/bin/bash -e

function cleanup {
      echo "Error occoured"
      # !!Placeholder for Slack notification
}
trap cleanup ERR

这告诉 bash 解释器,如果脚本突然结束,它应该运行 cleanup 函数中的代码。

接下来,提取webhook在执行脚本时传递给脚本的参数:

/opt/scripts/redeploy.sh

...

commit_message=$1 # head_commit.message
pusher_name=$2 # pusher.name
commit_id=$3 # head_commit.id


# !!Placeholder for Slack notification

请注意,参数的顺序对应于 hooks.json 文件中的 pass-arguments-to-command 属性。

最后,让我们调用重新部署应用程序所需的命令:

/opt/scripts/redeploy.sh

...

cd ~/do-react-example-app/
git pull origin master
yarn && yarn build

# !!Placeholder for Slack notification

完整的脚本将如下所示:

/opt/scripts/redeploy.sh

#!/bin/bash -e

function cleanup {
      echo "Error occoured"
      # !!Placeholder for Slack notification
}
trap cleanup ERR

commit_message=$1 # head_commit.message
pusher_name=$2 # pusher.name
commit_id=$3 # head_commit.id

# !!Placeholder for Slack notification

cd ~/do-react-example-app/
git pull origin master
yarn && yarn build

# !!Placeholder for Slack notification

该脚本将转到该文件夹,从最新的 master 分支中提取代码,安装新的包,并构建应用程序的生产版本。

注意 !!Placeholder for Slack notification。 这是本教程最后一步的占位符。 如果没有通知,就无法知道脚本是否正确执行。

使脚本可执行,以便钩子可以执行它:

chmod +x /opt/scripts/redeploy.sh

因为 Nginx 被配置为从 /var/www/do-react-example-app/build 提供文件,所以当这个脚本执行时,构建目录将被更新,Nginx 将自动提供新文件。

现在我们准备测试配置。 让我们运行 webhook 服务器:

webhook -hooks /opt/hooks/hooks.json -verbose

-hooks 参数告诉 webhook 配置文件的位置。

您将看到以下输出:

Output[webhook] 2017/12/10 13:32:03 version 2.6.5 starting
[webhook] 2017/12/10 13:32:03 setting up os signal watcher
[webhook] 2017/12/10 13:32:03 attempting to load hooks from /opt/hooks/hooks.json
[webhook] 2017/12/10 13:32:03 os signal watcher ready
[webhook] 2017/12/10 13:32:03 found 1 hook(s) in file
[webhook] 2017/12/10 13:32:03   loaded: redeploy-app
[webhook] 2017/12/10 13:32:03 serving hooks on http://0.0.0.0:9000/hooks/{id}

这告诉我们一切都已正确加载,并且我们的服务器现在通过 URL http://0.0.0.0:9000/hooks/redeploy-app 为钩子 redeploy-app 提供服务。 这暴露了服务器上可以执行的路径或钩子。 如果您现在使用此 URL 执行简单的 REST 调用(如 GET),则不会发生任何特殊情况,因为未满足挂钩规则。 如果我们想要成功触发钩子,我们必须满足我们在hooks.json中定义的trigger-rule

让我们在本地项目目录中使用一个空提交来测试它。 让您的 webhook 服务器运行,导航回您的本地计算机并键入以下内容:

git commit --allow-empty -m "Trigger notification"

将提交推送到主分支:

git push origin master

您将在服务器上看到如下输出:

Output[webhook] 2018/06/14 20:05:55 [af35f1] incoming HTTP request from 192.30.252.36:49554
[webhook] 2018/06/14 20:05:55 [af35f1] redeploy-app got matched
[webhook] 2018/06/14 20:05:55 [af35f1] redeploy-app hook triggered successfully
[webhook] 2018/06/14 20:05:55 200 | 726.412µs | 203.0.113.0:9000 | POST /hooks/redeploy-app
[webhook] 2018/06/14 20:05:55 [af35f1] executing /opt/scripts/redeploy.sh (/opt/scripts/redeploy.sh) with arguments ["/opt/scripts/redeploy.sh" "Trigger notification" "sammy" "82438acbf82f04d96c53cd684f8523231a1716d2"] and environment [] using /opt/scripts as cwd

现在让我们添加 Slack 通知,看看当钩子触发带有通知的成功构建时会发生什么。

第 6 步 — 添加 Slack 通知

要在您的应用重新部署时接收 Slack 通知,您可以修改 redeploy.sh 脚本以向 Slack 发送 HTTP 请求。 还需要通过在 Slack 配置面板中启用 Webhook Integration 来配置 Slack 以从您的服务器接收通知。 从 Slack 获得 Webhook URL 后,您可以将有关 Slack webhook 服务器的信息添加到脚本中。

要配置 Slack,请执行以下步骤:

    1. 在 Slack 应用程序的主屏幕上,单击位于左上角的下拉菜单,然后选择 Customize Slack
    1. 接下来,转到位于左侧边栏 菜单 中的 配置应用程序 部分。
    1. Manage 面板中,从左侧选项列表中选择 Custom Integration
    1. 搜索 Incoming WebHooks 集成。
    1. 单击添加配置
    1. 选择现有频道或创建新频道。
    1. 单击 添加传入 WebHooks 集成

之后,您将看到一个显示 Slack webhook 设置的屏幕。 记下 Webhook URL,它是 Slack webhook 服务器生成的端点。 记下此 URL 并进行任何其他更改后,请务必按页面底部的 保存设置 按钮。

返回您的服务器并打开 redeploy.sh 脚本:

nano /opt/scripts/redeploy.sh

在上一步中,我们在脚本中为 Slack 通知留下了占位符,表示为 !!Placeholder for Slack notification。 我们现在将用 curl 调用替换这些调用,这些调用向 Slack webhook 服务器发出 POST HTTP 请求。 Slack 钩子需要 JSON 主体,然后它将对其进行解析,并在通道中显示适当的通知。

!!Placeholder for slack notification 替换为以下 curl 调用。 请注意,您需要将 your_slack_webhook_url 替换为您之前记下的 Webhook URL

/opt/scripts/redeploy.sh

#!/bin/bash -e

function cleanup {
      echo "Error occoured"
      curl -X POST -H 'Content-type: application/json' --data "{
              \"text\": \"Error occoured while building app with changes from ${pusher_name} (${commit_id} -> ${commit_message})\",
              \"username\": \"buildbot\",
              \"icon_url\": \"https://i.imgur.com/JTq5At3.png\"
      }" your_slack_webhook_url
}
trap cleanup ERR

commit_message=$1 # head_commit.message
pusher_name=$2 # pusher.name
commit_id=$3 # head_commit.id

curl -X POST -H 'Content-type: application/json' --data "{
        \"text\": \"Started building app with changes from ${pusher_name} (${commit_id} -> ${commit_message})\",
        \"username\": \"buildbot\",
        \"icon_url\": \"https://i.imgur.com/JTq5At3.png\"
}" your_slack_webhook_url

cd ~/do-react-example-app/
git pull origin master
yarn && yarn build

curl -X POST -H 'Content-type: application/json' --data "{
        \"text\": \"Build and deploy finished with changes from ${pusher_name} (${commit_id} -> ${commit_message})\",
        \"username\": \"buildbot\",
        \"icon_url\": \"https://i.imgur.com/JTq5At3.png\"
}" your_slack_webhook_url

我们用稍微不同的 curl 调用替换了每个占位符:

  • 第一个确保我们收到执行脚本时发生的任何错误的通知。
  • 第二个发送应用程序构建已开始的通知。
  • 第三个发送构建已成功完成的通知。

更多关于 Slack 机器人和集成的信息可以在 Slack webhooks 文档 中找到。

同样,我们可以在本地项目目录中使用空提交来测试我们的钩子。 让 webhook 服务器继续运行,导航回此目录并创建空提交:

git commit --allow-empty -m "Trigger notification"

将提交推送到主分支以触发构建:

git push origin master

包括构建信息在内的输出将如下所示:

Output[webhook] 2018/06/14 20:09:55 [1a67a4] incoming HTTP request from 192.30.252.34:62900
[webhook] 2018/06/14 20:09:55 [1a67a4] redeploy-app got matched
[webhook] 2018/06/14 20:09:55 [1a67a4] redeploy-app hook triggered successfully
[webhook] 2018/06/14 20:09:55 200 | 462.533µs | 203.0.113.0:9000 | POST /hooks/redeploy-app
[webhook] 2018/06/14 20:09:55 [1a67a4] executing /opt/scripts/redeploy.sh (/opt/scripts/redeploy.sh) with arguments ["/opt/scripts/redeploy.sh" "Trigger notification" "sammy" "5415869a4f126ccf4bfcf2951bcded69230f85c2"] and environment [] using /opt/scripts as cwd
[webhook] 2018/06/14 20:10:05 [1a67a4] command output:   % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
100   228    0     2  100   226     11   1324 --:--:-- --:--:-- --:--:--  1329
okFrom https://github.com/sammy/do-react-example-app
 * branch            master     -> FETCH_HEAD
   82438ac..5415869  master     -> origin/master
Updating 82438ac..5415869
Fast-forward
yarn install v1.7.0
[1/4] Resolving packages...
success Already up-to-date.
Done in 1.16s.
yarn run v1.7.0
$ react-scripts build
Creating an optimized production build...
Compiled successfully.

File sizes after gzip:

  36.94 KB  build/static/js/main.a0b7d8d3.js
  299 B     build/static/css/main.c17080f1.css

The project was built assuming it is hosted at the server root.
You can control this with the homepage field in your package.json.
For example, add this to build it for GitHub Pages:

  "homepage" : "http://myname.github.io/myapp",

The build folder is ready to be deployed.
You may serve it with a static server:

  yarn global add serve
  serve -s build

Find out more about deployment here:

  http://bit.ly/2vY88Kr

Done in 7.72s.
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
100   233    0     2  100   231     10   1165 --:--:-- --:--:-- --:--:--  1166
ok
[webhook] 2018/06/14 20:10:05 [1a67a4] finished handling redeploy-app

在 Slack 中,您将收到消息到您选择的频道,通知您应用程序构建已经开始以及何时完成。

结论

我们现在已经完成了使用 webhooks、Nginx、shell 脚本和 Slack 设置部署系统。 您现在应该能够:

  • 配置 Nginx 以使用应用程序的动态构建。
  • 设置 webhook 服务器并编写在 GitHub POST 请求上触发的钩子。
  • 编写触发应用程序构建和通知的脚本。
  • 配置 Slack 以接收这些通知。

本教程中的系统可以扩展,因为 webhook 服务器是模块化的,并且可以配置为与其他应用程序一起使用,例如 GitLab。 如果通过 JSON 配置 webhook 服务器太多,您可以使用 Hookdoo 构建类似的设置。 有关如何为 webhook 配置触发规则的更多信息,请参见 webhook 项目 示例挂钩页面