如何在Ubuntu上使用Webhooks和Slack部署React

原创

独钓寒江雪_Ly

发布于 2018-08-13 16:09:47

8.7K0

发布于 2018-08-13 16:09:47

介绍

Webhook，也就是人们常说的钩子，是一个很有用的工具。你可以通过定制 Webhook 来监测你在 Github.com 上的各种事件，最常见的莫过于 push 事件。如果你设置了一个监测 push 事件的 Webhook，那么每当你的这个项目有了任何提交，这个 Webhook 都会被触发，这时 Github 就会发送一个 HTTP POST 请求到你配置好的地址。

如此一来，你就可以通过这种方式去自动完成一些重复性工作；比如，你可以用 Webhook 来自动触发一些持续集成（CI）工具的运作，比如 Travis CI；又或者是通过 Webhook 去部署你的线上服务器。

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

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

这段简短的视频显示一段内容提交并推送到GitHub存储库，该存储库触发了Slack中的应用程序构建和通知。

准备

要完成本教程，您需要：

一台已经设置好可以使用sudo命令的非root账号的Ubuntu服务器，并且已开启防火墙。没有服务器的同学可以在这里购买，不过我个人更推荐您使用免费的腾讯云开发者实验室进行试验，学会安装后在购买服务器。
参照本文第一部分，安装Nginx。
参照云+社区教程在本地计算机和服务器上配置安装Git
参照云+社区教程在本地计算机和服务器上安装Node.js和npm
参照云+社区开发者手册在您的服务器上安装yarn。
为Slack配置和各个通道的权限。请参考Slack官方文档

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

让我们首先用create-react-app构建我们将用于测试webhooks的应用程序。然后，我们可以创建一个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

该文件应如下所示：

{
  "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程序包的高级功能。如果开发人员对程序包提供的构建环境不满意，则可以“eject”应用程序，这将生成其他的选项（包括自定义CSS转换器和JS处理工具等）。

检查完代码后关闭文件。返回do-react-example-app目录，使用git命令初始化存储库：

git init

接下来，使用您的GitHub URL添加远程源：

git remote add origin your-github-url

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

git remote add origin your-github-url

提交它们：

git commit -m "initial commit"

并将它们推送到存储库：

git push origin master

有关用git创建GitHub存储库和初始化现有应用程序的更多信息，请参阅GitHub的文档。完成存储库设置后，我们可以继续在服务器上指定配置详细信息。

第二步 - 目录设置和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或域名（如果适用）：

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.html，index.htm，index.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了。

第三步 - 安装和配置Webhook

Webhooks是简单的HTTP服务器，具有可配置的端点，称为hooks。收到HTTP请求后，webhook服务器会执行符合一组可配置规则的可自定义代码。已经有很多webhook服务器集成到互联网上的应用程序中，包括Slack。最广泛使用的webhook服务器实现是用Go编写的Webhook。我们将使用此工具来设置我们的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版本：

webhook version 2.6.5

接下来，让我们在/opt目录中建立hooks和scripts文件夹，第三方应用程序的文件通常保存在这里。由于/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

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

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

具体而言，这些规则定义了以下信息：

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

/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.message，pusher.name，和head_commit.id特性。当您的GitHub存储库中发生配置的事件（如PUSH）时，GitHub将发送一个POST请求，其中包含一个包含该事件信息的JSON正文。

配置文件中的最后一个属性是trigger-rule属性，它告诉webhook服务器将在何种情况下触发hook。如果留空，将始终触发hook。在我们的例子中，我们将配置当GitHub向我们的webhook服务器发送POST请求时触发的hook。具体来说，只有your-github-secret在HTTP请求中的GitHub与规则中的密钥匹配时并且提交发生在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将如下所示：

[
  {
    "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 essentials的介绍。

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

第四步 - 配置GitHub通知

让我们配置我们的GitHub存储库，以便在提交到master时发送HTTP请求：

转到存储库，然后单击“设置”。
然后转到Webhooks并单击位于右上角的Add Webhook。

- 对于**Payload URL**，键入您的服务器地址，如下所示：`http://your_server_ip:9000/hooks/redeploy-app`。如果您有域名，则可以替换掉`your_server_ip`。请注意，名称与hoop定义中的id属性匹配。这是webhook实现的一个细节：定义在`hooks.json`的所有hoops都将出现在URL`http://your_server_ip:9000/hooks/id`中，其中`id`是`hooks.json`文件中的`id`。对于

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

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

第五步 - 编写部署/重新部署脚本

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

创建脚本：

nano /opt/scripts/redeploy.sh

首先，让我们在脚本的顶部添加一个函数来清理它创建的任何文件。如果重新部署未成功通过，我们也可以将此作为通知第三方软件（如Slack）的地方：

#!/bin/bash -e

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

这告诉bash解释器如果脚本完成，它应该运行cleanup函数中的代码。

接下来，提取webhook执行时传递给脚本的参数：

...

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属性。

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

...

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

# !!Placeholder for Slack notification

完整的脚本将如下所示：

#!/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。这是本教程最后一步的占位符。没有通知，没有真正的方法可以知道脚本是否正确执行。

使脚本可执行，以便hook可以执行它：

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配置文件的位置。

你会看到这个输出：

[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}

这告诉我们一切都正确加载，我们的服务器现在通过http://0.0.0.0:9000/hooks/redeploy-app服务hook redeploy-app。这会在服务器上公开可以执行的路径或hook。如果您现在使用URL执行简单的REST调用（如GET），则不会发生任何特殊情况，因为不满足hook规则。如果我们想要成功触发hook，我们必须完成我们在hooks.json定义的trigger-rule。

让我们在本地项目目录中使用空提交来测试它。让webhook服务器保持运行，转跳回本地计算机并输入以下内容：

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

将提交推送到主分支：

git push origin master

您将在服务器上看到这样的输出：

[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通知，看看当hooks通过通知触发成功构建时会发生什么。

第六步 - 添加Slack通知

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

要配置Slack，请执行以下步骤：

在Slack应用程序的主屏幕上，单击左上角的下拉菜单，然后选择Customize Slack。
接下来，转到左侧边栏菜单中的配置应用程序部分。
在“ 管理”面板中，从左侧选项列表中选择“ 自定义集成 ”。
搜索传入的WebHooks集成。
单击“ 添加配置”。
选择现有频道或创建新频道。
单击“ 添加传入Web挂钩”集成。

之后，您将看到一个显示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主体，然后它将解析，在通道中显示相应的通知。

用以下curl替换!!Placeholder for slack notification。请注意，您需要用Webhook URL替换前面提到的your_slack_webhook_url：

#!/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文档。

同样，我们可以在本地项目目录中使用空提交来测试我们的hooks。让webhook服务器运行，转跳回此目录并创建空提交：

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

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

git push origin master

输出（包括构建信息）如下所示：

[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中，您将收到选择通道的消息，通知您应用程序构建已经开始以及何时完成。