在 Ubuntu 16.04 上使用 Webhook 和 Slack 部署 React 应用程序

作者选择技术教育Fund]接受捐赠作为WRITE FOR DIRECTIONS计划的一部分。

简介

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

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

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

示例deployment

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

前提条件

要完成本教程,您需要:

  • Ubuntu 16.04服务器,您可以按照使用Ubuntu 16.04 tutorial.进行初始服务器设置]进行设置按照本指南操作之后,您应该拥有一个具有sudo权限的非根用户帐户。
  • 按照如何在Ubuntu 16.04.上安装nginx]的前两步在您的服务器上安装nginx
  • 您的本地计算机和服务器上都配置了Git。您可以在本教程Git.入门》中找到安装和配置Git的说明
  • 您的本机和服务器上安装了Node.js和npm。对于您的服务器,请遵循How to Install Node.js on Ubuntu 16.04.》中关于从PPA安装Node.js的说明在您的本地计算机上,您可以按照项目安装说明.
  • 按照安装yarn.]上的官方指南在您的服务器上安装Yarn
  • 配置Slack和各个通知频道的权限。您可以在松弛权限docs.]中找到有关角色和权限的更多信息

步骤1-使用Create-Reaction-app创建Reaction应用程序

让我们首先使用Create-Reaction-app构建用于测试我们的网络挂钩的应用程序。然后,我们可以创建一个GitHub存储库,并将项目代码推送到其中。

在您的本地机器上,将Create-Reaction-app节点模块添加到您的全局存储库,并使Create-Reaction-app命令在您的外壳环境中可用:

1[environment local]
2sudo npm install -g create-react-app

接下来,运行Create-Reaction-app创建一个名为do-reaction-Example-app的项目:

1[environment local]
2create-react-app do-react-example-app

导航到do-reaction-Example-app目录:

1[environment local]
2cd do-react-example-app

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

1[environment local]
2nano package.json

该文件应如下所示:

 1[environment local]
 2[label ~/do-react-example-app/package.json]
 3
 4{
 5  "name": "do-react-example-app",
 6  "version": "0.1.0",
 7  "private": true,
 8  "dependencies": {
 9    "react": "^16.2.0",
10    "react-dom": "^16.2.0",
11    "react-scripts": "1.0.17"
12  },
13  "scripts": {
14    "start": "react-scripts start",
15    "build": "react-scripts build",
16    "test": "react-scripts test --env=jsdom",
17    "eject": "react-scripts eject"
18  }
19}

Package.json文件包含以下脚本:

  • start :该脚本负责启动应用程序的开发版本。它运行一个为应用程序提供服务的HTTP服务器。
  • 构建 :该脚本负责制作应用程序的生产版。您将在服务器上使用此脚本。
  • test :该脚本运行与项目关联的默认测试。
  • 弹出 :该脚本是Create-Reaction-app包的高级功能。如果开发人员对包提供的构建环境不满意,则可以)。

检查完代码后关闭该文件。

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

回到您的do-action-ample-app目录,使用git初始化库:

1[environment local]
2git init

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

1[environment local]
2git remote add origin your-github-url

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

1[environment local]
2git add .

承诺:

1[environment local]
2git commit -m "initial commit"

并将它们推送到存储库:

1[environment local]
2git push origin master

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

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

Step 2-目录设置和Nginx配置

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

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

1cd ~
2git clone your-github-url

转到克隆项目:

1cd do-react-example-app

要在项目内创建一个Build目录和文件以供Nginx使用,您将需要运行yer Build命令。这将运行项目的构建脚本,创建构建目录。该文件夹包括一个index.html文件、一个JavaScript文件和一个css文件等。ya n命令将下载您的项目所需的所有节点模块:

1yarn && yarn build

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

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

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

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

1sudo chmod -R 755 /var/www

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

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

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

 1[label /etc/nginx/sites-available/test-server]
 2server {
 3        listen 80;
 4
 5        root /var/www/do-react-example-app/build;
 6        index index.html index.htm index.nginx-debian.html;
 7
 8        server_name your_server_ip_or_domain;
 9
10        location / {
11                try_files $uri /index.html;
12        }
13}

此文件中的指令包括:

  • listen :配置服务器监听端口的属性。
  • root :Ngnix提供文件的文件夹路径。
  • index :服务器首先尝试服务的文件。它将尝试提供/var/www/do-action-Example-app/Build目录中的以下任意文件:index.htmlindex.htmindex.nginx-debian.html,优先顺序为从前到后。
  • 服务器名称 :服务器域名或IP。

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

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

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

检查配置是否有效:

1sudo nginx -t

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

1sudo systemctl restart nginx

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

Step 3 -安装配置Webhooks

Webhooks是简单的HTTP服务器,它具有称为_hooks_的可配置端点。在接收到HTTP请求时,WebHook服务器执行遵循一组可配置规则的可定制代码。已经有许多WebHook服务器集成到互联网上的应用程序中,包括Slack。

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

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

1cd ~

然后下载webhook

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

解压它:

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

将二进制文件移至/usr/local/bin,使其在您的环境中可用:

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

最后,清理下载的文件:

1rm -rf webhook-linux-amd64*

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

1webhook -version

输出应显示webhook版本:

1[secondary_label Output]
2webhook version 2.6.5

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

首先,创建目录:

1sudo mkdir /opt/scripts
2sudo mkdir /opt/hooks

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

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

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

1nano /opt/hooks/hooks.json

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

1{
2    "id": "",
3    "execute-command": "",
4    "command-working-directory": "",
5    "pass-arguments-to-command": [],
6    "trigger-rule": {}
7}

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

  • id :WebHook服务器要服务的端点的名称。我们将其命名为reploy-app
  • EXECUTE-COMMAND :钩子触发时执行的脚本的路径。在我们的示例中,这将是位于/opt/脚本/reploy.sh中的reploy.sh脚本。
  • 命令-工作-目录 :执行命令时使用的工作目录。我们将使用/opt/scripts,因为那是reploy.sh所在的位置。
  • 将参数传递给命令 :从HTTP请求传递给脚本的参数。我们将从HTTP请求的有效负载传递一条提交消息、推送器名称和提交id。同样的信息也将包括在您的Slack消息中。

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

 1[label /opt/hooks/hooks.json]
 2[
 3  {
 4    "id": "redeploy-app",
 5    "execute-command": "/opt/scripts/redeploy.sh",
 6    "command-working-directory": "/opt/scripts",
 7    "pass-arguments-to-command":
 8    [
 9      {
10        "source": "payload",
11        "name": "head_commit.message"
12      },
13      {
14        "source": "payload",
15        "name": "pusher.name"
16      },
17      {
18        "source": "payload",
19        "name": "head_commit.id"
20      }
21    ],
22    "trigger-rule": {}
23  }
24]

GitHub HTTP POST请求的负载包括head_Commit.Messagepusher.namehead_Commit.id属性。当配置的事件(如推送)在您的GitHub存储库中发生时,GitHub将发送一个带有JSON主体的POST请求,其中包含有关该事件的信息。这些POST有效负载的一些示例可以在giHub事件类型docs.]中找到

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

添加以下代码来定义rigger-rule,用您选择的密码替换Your-GitHub-secu

 1... 
 2    "trigger-rule":
 3    {
 4      "and":
 5      [
 6        {
 7          "match":
 8          {
 9            "type": "payload-hash-sha1",
10            "secret": "your-github-secret", 
11            "parameter":
12            {
13              "source": "header",
14              "name": "X-Hub-Signature"
15            }
16          }
17        },
18        {
19          "match":
20          {
21            "type": "value",
22            "value": "refs/heads/master",
23            "parameter":
24            {
25              "source": "payload",
26              "name": "ref"
27            }
28          }
29        }
30      ]
31    }
32  }
33]

完整地说,/opt/hooks/hooks.json将如下所示:

 1[label /opt/hooks/hooks.json]
 2[
 3  {
 4    "id": "redeploy-app",
 5    "execute-command": "/opt/scripts/redeploy.sh",
 6    "command-working-directory": "/opt/scripts",
 7    "pass-arguments-to-command":
 8    [
 9      {
10        "source": "payload",  
11        "name": "head_commit.message"
12      },
13      {
14        "source": "payload",
15        "name": "pusher.name"
16      },
17      {
18        "source": "payload",
19        "name": "head_commit.id"
20      }
21    ],
22    "trigger-rule":
23    {
24      "and":
25      [
26        {
27          "match":
28          {
29            "type": "payload-hash-sha1",
30            "secret": "your-github-secret", 
31            "parameter":
32            {
33              "source": "header",
34              "name": "X-Hub-Signature"
35            }
36          }
37        },
38        {
39          "match":
40          {
41            "type": "value",
42            "value": "refs/heads/master",
43            "parameter":
44            {
45              "source": "payload",
46              "name": "ref"
47            }
48          }
49        }
50      ]
51    }
52  }
53]

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

1sudo ufw status

如果列表中没有9000端口,则启用该端口:

1sudo ufw allow 9000

有关ufw的更多信息,请参阅ufw essentials.

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

第四步-配置GitHub通知

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

  • 1.进入您的存储库,单击[设置]。

  • 2.进入[Webhooks],点击右上角的[添加WebHook]。

  • 3.对于 负载地址** ,输入您的服务器地址如下:http://your_server_ip:9000/hooks/redeploy-app.如果您有域名,可以用它来代替you_server_ip。请注意,端点名称与挂钩定义中的id属性匹配。以下是WebHook的实现细节:hooks.json中定义的所有钩子在url中都会显示为http://your_server_ip:9000/hooks/id,,其中idhooks.json文件中的id

  • 4. 内容类型** 选择** 应用程序/json** 。

  • 5.对于 Secret** ,输入您在hooks.json定义中设置的秘密(Your-GitHub-ici)。

  • 6.对于 您希望触发这个WebHook的事件是什么?** 选择** 只需推流事件** 。

  • 7.点击[添加网页挂钩]按钮。

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

与payload一起发送的属性的完整列表可以在GitHub Webhooks页面上找到。

步骤5-编写部署/重新部署脚本

此时,我们已将Web挂钩指向reploy.sh脚本,但我们尚未创建该脚本本身。它将从我们的存储库中提取最新的主分支,安装节点模块,并执行构建命令。

创建脚本:

1nano /opt/scripts/redeploy.sh

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

1[label /opt/scripts/redeploy.sh]
2#!/bin/bash -e
3
4function cleanup {
5      echo "Error occoured"
6      # !!Placeholder for Slack notification
7}
8trap cleanup ERR

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

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

1[label /opt/scripts/redeploy.sh]
2...
3
4commit_message=$1 # head_commit.message
5pusher_name=$2 # pusher.name
6commit_id=$3 # head_commit.id
7
8# !!Placeholder for Slack notification

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

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

1[label /opt/scripts/redeploy.sh]
2...
3
4cd ~/do-react-example-app/
5git pull origin master
6yarn && yarn build
7
8# !!Placeholder for Slack notification

完整的脚本将如下所示:

 1[label /opt/scripts/redeploy.sh]
 2#!/bin/bash -e
 3
 4function cleanup {
 5      echo "Error occoured"
 6      # !!Placeholder for Slack notification
 7}
 8trap cleanup ERR
 9
10commit_message=$1 # head_commit.message
11pusher_name=$2 # pusher.name
12commit_id=$3 # head_commit.id
13
14# !!Placeholder for Slack notification
15
16cd ~/do-react-example-app/
17git pull origin master
18yarn && yarn build
19
20# !!Placeholder for Slack notification

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

注意"!!Slack通知的占位符`。这是本教程中最后一步的占位符。如果没有通知,就无法真正了解脚本是否正确执行。

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

1chmod +x /opt/scripts/redeploy.sh

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

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

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

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

您将看到以下输出:

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

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

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

1[environment local]
2git commit --allow-empty -m "Trigger notification"

将提交推送到主分支:

1[environment local]
2git push origin master

您将在服务器上看到类似以下内容的输出:

1[secondary_label Output]
2[webhook] 2018/06/14 20:05:55 [af35f1] incoming HTTP request from 192.30.252.36:49554
3[webhook] 2018/06/14 20:05:55 [af35f1] redeploy-app got matched
4[webhook] 2018/06/14 20:05:55 [af35f1] redeploy-app hook triggered successfully
5[webhook] 2018/06/14 20:05:55 200 | 726.412µs | 203.0.113.0:9000 | POST /hooks/redeploy-app
6[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通知,看看当钩子触发一个成功的带有通知的构建时会发生什么。

Step 6 -添加Slack插件

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

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

  • 1.在Slack应用程序主屏幕上,点击左上角的下拉菜单,选择[自定义Slack]。

  • 2.接下来,进入左侧菜单中的 配置应用** 部分。

  • 3.在[管理]面板中,从左侧选项列表中选择[自定义集成]。

  • 4.搜索 传入WebHooks** 集成。

  • 5.点击[添加配置]。

  • 6.选择已有频道或新建频道。

  • 7.点击[添加传入WebHooks集成]。

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

返回您的服务器,打开reploy.sh脚本:

1nano /opt/scripts/redeploy.sh

在上一步中,我们在Slack通知脚本中保留了占位符,表示为!!Slack Notify占位符。现在,我们将用向Slack WebHook服务器发出POST HTTP请求的curl调用替换它们。Slack钩子需要JSON正文,然后它将解析该正文,并在通道中显示适当的通知。

!空闲通知占位符替换为以下curl调用。需要注意的是,您需要用前面提到的WebHook URL 替换you_slack_webhook_url

 1[label /opt/scripts/redeploy.sh]
 2#!/bin/bash -e
 3
 4function cleanup {
 5      echo "Error occoured"
 6      curl -X POST -H 'Content-type: application/json' --data "{
 7              \"text\": \"Error occoured while building app with changes from ${pusher_name} (${commit_id} -> ${commit_message})\",
 8              \"username\": \"buildbot\",
 9              \"icon_url\": \"https://i.imgur.com/JTq5At3.png\"
10      }" your_slack_webhook_url
11}
12trap cleanup ERR
13
14commit_message=$1 # head_commit.message
15pusher_name=$2 # pusher.name
16commit_id=$3 # head_commit.id
17
18curl -X POST -H 'Content-type: application/json' --data "{
19        \"text\": \"Started building app with changes from ${pusher_name} (${commit_id} -> ${commit_message})\",
20        \"username\": \"buildbot\",
21        \"icon_url\": \"https://i.imgur.com/JTq5At3.png\"
22}" your_slack_webhook_url
23
24cd ~/do-react-example-app/
25git pull origin master
26yarn && yarn build
27
28curl -X POST -H 'Content-type: application/json' --data "{
29        \"text\": \"Build and deploy finished with changes from ${pusher_name} (${commit_id} -> ${commit_message})\",
30        \"username\": \"buildbot\",
31        \"icon_url\": \"https://i.imgur.com/JTq5At3.png\"
32}" your_slack_webhook_url

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

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

有关Slack机器人和集成的更多信息,请参阅Slack WebHooks documentation.

同样,我们可以在本地项目目录中使用空提交来测试我们的挂钩。让WebHook服务器保持运行状态,导航回此目录并创建空提交:

1[environment local]
2git commit --allow-empty -m "Trigger notification"

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

1[environment local]
2git push origin master

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

 1[secondary_label Output]
 2[webhook] 2018/06/14 20:09:55 [1a67a4] incoming HTTP request from 192.30.252.34:62900
 3[webhook] 2018/06/14 20:09:55 [1a67a4] redeploy-app got matched
 4[webhook] 2018/06/14 20:09:55 [1a67a4] redeploy-app hook triggered successfully
 5[webhook] 2018/06/14 20:09:55 200 | 462.533µs | 203.0.113.0:9000 | POST /hooks/redeploy-app
 6[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
 7[webhook] 2018/06/14 20:10:05 [1a67a4] command output:   % Total    % Received % Xferd Average Speed Time Time Time Current
 8                                 Dload Upload Total Spent Left Speed
 9100 228 0 2 100 226 11 1324 --:--:-- --:--:-- --:--:--  1329
10okFrom https://github.com/sammy/do-react-example-app
11 * branch master     -> FETCH_HEAD
12   82438ac..5415869 master     -> origin/master
13Updating 82438ac..5415869
14Fast-forward
15yarn install v1.7.0
16[1/4] Resolving packages...
17success Already up-to-date.
18Done in 1.16s.
19yarn run v1.7.0
20$ react-scripts build
21Creating an optimized production build...
22Compiled successfully.
23
24File sizes after gzip:
25
26  36.94 KB build/static/js/main.a0b7d8d3.js
27  299 B build/static/css/main.c17080f1.css
28
29The project was built assuming it is hosted at the server root.
30You can control this with the homepage field in your package.json.
31For example, add this to build it for GitHub Pages:
32
33  "homepage" : "http://myname.github.io/myapp",
34
35The build folder is ready to be deployed.
36You may serve it with a static server:
37
38  yarn global add serve
39  serve -s build
40
41Find out more about deployment here:
42
43  http://bit.ly/2vY88Kr
44
45Done in 7.72s.
46  % Total    % Received % Xferd Average Speed Time Time Time Current
47                                 Dload Upload Total Spent Left Speed
48100 233 0 2 100 231 10 1165 --:--:-- --:--:-- --:--:--  1166
49ok
50[webhook] 2018/06/14 20:10:05 [1a67a4] finished handling redeploy-app

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

结论

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

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

本教程中的系统可以扩展,因为WebHook服务器是模块化的,可以配置为与其他应用程序一起工作,如GitLab.如果通过JSON配置WebHook服务器太多,您可以使用Hookdoo.)构建类似的设置有关如何配置webhook的触发器规则的详细信息,请参阅WebHook项目示例钩子page.

Published At
Categories with 技术
comments powered by Disqus