TOC

Bereitstellen von React Applications mit Webhooks und Slack unter Ubuntu 16.04

_Der Autor hat das Programm Tech Education Fund ausgewählt, um eine Spende im Rahmen des Programms Write for DOnations zu erhalten. _

Einführung

Wenn ein Entwickler kontinuierlich Änderungen an einer Anwendung vornimmt, kann ein Bereitstellungssystem mit Webhooks die Entwicklung optimieren, insbesondere für Teams. Das Integrieren von Slack-Benachrichtigungen für Codeänderungen in den Workflow eines Teams kann auch hilfreich sein, wenn ein Teil des Teams auf Back-End-Software wie eine API angewiesen ist.

In diesem Tutorial erstellen Sie eine React-Anwendung mit dem Paket https://github.com/facebook/create-react-app [+ create-react-app + + npm +]. Dieses Paket vereinfacht das Bootstrapping eines React-Projekts, indem Syntax umgesetzt und die Arbeit mit Abhängigkeiten und vorausgesetzten Tools optimiert wird. Nachdem Sie Ihren Anwendungscode zu einem GitHub-Repository hinzugefügt haben, konfigurieren Sie Nginx so, dass Ihre aktualisierten Projektdateien bereitgestellt werden. Anschließend laden Sie den Webhook-Server herunter, richten ihn ein und konfigurieren GitHub so, dass er mit ihm kommuniziert, wenn Ihr Code geändert wird. Schließlich konfigurieren Sie Slack als einen anderen Webhook-Server, der Benachrichtigungen erhält, wenn eine erfolgreiche Bereitstellung ausgelöst wurde.

Letztendlich sieht das Bereitstellungssystem, das Sie in diesem Artikel erstellen, folgendermaßen aus:

image: https://assets.digitalocean.com/articles/react_deploy_webhooks/react-deploy.gif [Beispielbereitstellung]

Dieses kurze Video zeigt ein leeres Commit und einen Push an das GitHub-Repository, wodurch die Anwendungserstellung und Benachrichtigungen in Slack ausgelöst werden.

Voraussetzungen

Um dieses Tutorial abzuschließen, benötigen Sie:

Schritt 1 - Erstellen einer Reaktionsanwendung mit create-react-app

Erstellen wir zuerst die Anwendung, mit der wir unsere Webhooks testen wollen, mit "+ create-react-app +". Wir können dann ein GitHub-Repository erstellen und den Projektcode dorthin übertragen.

Fügen Sie auf Ihrem lokalen Computer das Knotenmodul "+ create-react-app" zu Ihrem globalen Repository hinzu und stellen Sie den Befehl "+ create-react-app" in Ihrer Shell-Umgebung zur Verfügung:

sudo npm install -g create-react-app

Führen Sie anschließend "+ create-react-app" aus, um ein Projekt mit dem Namen "++" zu erstellen:

create-react-app

Navigiere zum Verzeichnis ++:

cd

Öffnen Sie mit + nano + oder Ihrem bevorzugten Texteditor die Datei + package.json:

nano package.json

Die Datei sollte folgendermaßen aussehen:

~ / 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"
 }
}

Die + package.json + Datei enthält die folgenden Skripte:

  • * + start + *: Dieses Skript ist für den Start der Entwicklungsversion der Anwendung verantwortlich. Es wird ein HTTP-Server ausgeführt, der die Anwendung bedient.

  • * + build + *: Dieses Skript ist für die Erstellung der Produktionsversion der Anwendung verantwortlich. Sie werden dieses Skript auf dem Server verwenden.

  • * + test + *: Dieses Skript führt die mit dem Projekt verknüpften Standardtests aus.

  • * + eject + *: Dieses Skript ist eine erweiterte Funktion des Pakets + create-react-app +. Wenn der Entwickler mit der Build-Umgebung, die das Paket bietet, nicht zufrieden ist, kann die Anwendung "ausgeworfen" werden, wodurch Optionen erzeugt werden, die ansonsten nicht verfügbar sind (einschließlich benutzerdefinierter CSS-Transpiler und JS-Verarbeitungstools).

Schließen Sie die Datei, wenn Sie den Code überprüft haben.

Als Nächstes erstellen wir ein GitHub-Repository für das Projekt. Sie können diesem Tutorial unter creating a GitHub repository folgen. Notieren Sie sich den Ursprung des Repositorys (d. H. seine GitHub URL).

Zurück in deinem ++ Verzeichnis initialisiere das Repository mit + git +:

git init

Fügen Sie als Nächstes den entfernten Ursprung mit Ihrer GitHub-URL hinzu:

git remote add origin

Stellen Sie alle Dateien im Projektverzeichnis bereit:

git add .

Verpflichte sie:

git commit -m "initial commit"

Und schieben Sie sie in das Repository:

git push origin master

Weitere Informationen zum Erstellen von GitHub-Repositorys und zum Initialisieren vorhandener Anwendungen mit "+ git +" finden Sie unter "https://help.github.com/articles/adding-an-existing-project-to-github-using-the-command-line" von GitHub /[Dokumentation].

Sobald wir das Repository-Setup abgeschlossen haben, können wir die Konfigurationsdetails auf unserem Server angeben.

Schritt 2 - Verzeichnis einrichten und Nginx-Konfiguration

Mit dem vorhandenen Repository ist es jetzt möglich, den Anwendungscode von GitHub abzurufen und Nginx für die Bereitstellung der Anwendung zu konfigurieren.

Melden Sie sich bei Ihrem Server an, wechseln Sie in Ihr Ausgangsverzeichnis und klonen Sie Ihr Repository:

cd ~
git clone

Gehe zum geklonten Projekt:

cd

Um ein Erstellungsverzeichnis innerhalb des Projekts und Dateien für Nginx zu erstellen, müssen Sie den Befehl + yarn build + ausführen. Dadurch wird das Erstellungsskript für das Projekt ausgeführt und das Erstellungsverzeichnis erstellt. Dieser Ordner enthält unter anderem eine "+ index.html " - Datei, eine JavaScript-Datei und eine CSS-Datei. Der Befehl ` Faden +` lädt alle erforderlichen Knotenmodule für Ihr Projekt herunter:

yarn && yarn build

Als nächstes erstellen wir einen Symlink im Verzeichnis "+ / var / www / " zum Verzeichnis " ~ / do-react-example-app ". Dadurch bleibt die Anwendung in unserem Home-Verzeichnis, während sie Nginx zur Verfügung gestellt wird, um sie aus dem Verzeichnis " / var / www +" zu bedienen:

sudo ln -s ~/ /var/www/

Beachten Sie, dass dies eher auf das Projektverzeichnis als auf das Erstellungsverzeichnis verweist, das sich häufiger ändert. Das Erstellen dieses Links kann besonders in Szenarien hilfreich sein, in denen Sie neue Versionen der Anwendung bereitstellen: Indem Sie einen Link zu einer stabilen Version erstellen, vereinfachen Sie das spätere Auslagern, während Sie zusätzliche Versionen bereitstellen. Wenn etwas schief geht, können Sie auf die gleiche Weise auch auf eine frühere Version zurückgreifen.

Für den Symlink sollten einige Berechtigungen festgelegt werden, damit Nginx ihn ordnungsgemäß bereitstellen kann:

sudo chmod -R 755 /var/www

Als Nächstes konfigurieren wir einen Nginx-Serverblock für das Build-Verzeichnis. Erstellen Sie eine neue Serverkonfiguration, indem Sie Folgendes eingeben:

sudo nano /etc/nginx/sites-available/

Kopieren Sie die folgende Konfiguration und ersetzen Sie "++" durch Ihre IP-Adresse oder Domain (falls zutreffend):

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

server {
       listen 80;

       root /var/www//build;
       index index.html index.htm index.nginx-debian.html;

       server_name ;

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

Die Anweisungen in dieser Datei umfassen:

  • * + listen + *: Die Eigenschaft, die den Server-Listening-Port konfiguriert.

  • * + root + *: Der Pfad zu dem Ordner, aus dem Nginx Dateien bereitstellt.

  • * + index + *: Die Datei, die der Server zuerst zu bedienen versucht. Es wird versucht, eine der folgenden Dateien aus dem Verzeichnis + / var / www // build zu bedienen:` + index.html`, + index.html,` + index.nginx-debian.html`, mit Priorität vom ersten bis zum letzten.

  • * + Servername + *: Der Serverdomänenname oder die IP.

Erstellen Sie als Nächstes einen Symlink im Verzeichnis "+ sites-enabled +":

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

Dadurch wird Nginx angewiesen, die Serverblockkonfiguration im Ordner "+ sites-available +" zu aktivieren.

Überprüfen Sie, ob die Konfiguration gültig ist:

sudo nginx -t

Starten Sie Nginx abschließend neu, um die neue Konfiguration zu übernehmen:

sudo systemctl restart nginx

Mit diesen Konfigurationsdetails können wir mit der Konfiguration des Webhooks fortfahren.

Schritt 3 - Installieren und Konfigurieren von Webhooks

Webhooks sind einfache HTTP-Server mit konfigurierbaren Endpunkten, die als hooks bezeichnet werden. Beim Empfang von HTTP-Anforderungen führen Webhook-Server anpassbaren Code aus, der sich an einen Satz konfigurierbarer Regeln hält. Es sind bereits viele Webhook-Server in Anwendungen im Internet integriert, einschließlich Slack.

Die am häufigsten verwendete Implementierung eines Webhook-Servers ist Webhook, geschrieben in Go. Wir werden dieses Tool verwenden, um unseren Webhook-Server einzurichten.

Stellen Sie sicher, dass Sie sich in Ihrem Home-Verzeichnis auf Ihrem Server befinden:

cd ~

Dann lade den + webhook + herunter:

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

Extrahiere es:

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

Stellen Sie die Binärdatei in Ihrer Umgebung zur Verfügung, indem Sie sie nach "+ / usr / local / bin" verschieben:

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

Zuletzt bereinigen Sie die heruntergeladenen Dateien:

rm -rf webhook-linux-amd64*

Testen Sie die Verfügbarkeit von "+ webhook +" in Ihrer Umgebung, indem Sie Folgendes eingeben:

webhook -version

Die Ausgabe sollte die + webhook + Version anzeigen:

Outputwebhook version 2.6.5

Als Nächstes richten wir die Ordner "+ hooks " und " scripts " im Verzeichnis " / opt " ein, in das normalerweise Dateien für Anwendungen von Drittanbietern verschoben werden. Da das " / opt " - Verzeichnis normalerweise " root " gehört, können wir Verzeichnisse mit Root-Rechten erstellen und den Besitz dann auf das lokale " $ USER +" übertragen.

Erstellen Sie zunächst die Verzeichnisse:

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

Übertragen Sie dann den Besitz auf Ihren + $ USER +:

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

Als nächstes konfigurieren wir den "+ Webhook" -Server, indem wir eine "+ hooks.json" -Datei erstellen. Erstellen Sie mit + nano + oder Ihrem bevorzugten Editor die Datei + hooks.json im Verzeichnis` + / opt / hooks`:

nano /opt/hooks/hooks.json

Damit das "+ webhook +" ausgelöst wird, wenn GitHub HTTP-Anforderungen sendet, benötigt unsere Datei ein JSON-Array von Regeln. Diese Regeln bestehen aus folgenden Eigenschaften:

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

Diese Regeln definieren insbesondere die folgenden Informationen:

  • * + id + *: Der Name des Endpunkts, den der Webhook-Server bedienen soll. Wir werden das ++ nennen.

  • * + execute-command + *: Der Pfad zu dem Skript, das ausgeführt wird, wenn der Hook ausgelöst wird. In unserem Fall ist dies das Skript "+ redeploy.sh " in " / opt / scripts / redeploy.sh +".

  • * + command-working-directory + *: Das Arbeitsverzeichnis, das bei der Ausführung des Befehls verwendet wird. Wir werden "+ / opt / scripts " verwenden, da sich dort " redeploy.sh +" befindet.

  • * + pass-arguments-to-command + *: Die Parameter, die von der HTTP-Anforderung an das Skript übergeben wurden. Wir übergeben eine Commit-Nachricht, einen Push-Namen und eine Commit-ID aus den Nutzdaten der HTTP-Anforderung. Dieselben Informationen werden auch in Ihren Slack-Nachrichten enthalten sein.

Die Datei + / opt / hooks / hooks.json + sollte die folgenden Informationen enthalten:

/opt/hooks/hooks.json

[
 {
   "id": "",
   "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": {}
 }
]

Die Nutzdaten der GitHub-HTTP-POST-Anforderung enthalten die Eigenschaften "+ head_commit.message ", " pusher.name " und " head_commit.id +". Wenn ein konfiguriertes Ereignis (wie PUSH) in Ihrem GitHub-Repository auftritt, sendet GitHub eine POST-Anfrage mit einem JSON-Body, der Informationen zum Ereignis enthält. Einige Beispiele für diese POST-Nutzdaten finden Sie in den GitHub Event Types docs.

Die letzte Eigenschaft in der Konfigurationsdatei ist die Eigenschaft + trigger-rule +, die dem Webhook-Server mitteilt, unter welcher Bedingung der Hook ausgelöst wird. Wenn leer, wird der Haken immer ausgelöst. In unserem Fall konfigurieren wir den Hook so, dass er ausgelöst wird, wenn GitHub eine POST-Anfrage an unseren Webhook-Server sendet. Insbesondere wird es nur ausgelöst, wenn das GitHub-Geheimnis (hier als "+" bezeichnet) in der HTTP-Anforderung mit dem in der Regel übereinstimmt und die Übergabe an den Zweig " master +" erfolgt ist.

Fügen Sie den folgenden Code hinzu, um die "+ Trigger-Regel " zu definieren, und ersetzen Sie "+" durch ein Passwort Ihrer Wahl:

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

In vollem Umfang sieht "+ / opt / hooks / hooks.json +" folgendermaßen aus:

/opt/hooks/hooks.json

[
 {
   "id": "",
   "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": "",
           "parameter":
           {
             "source": "header",
             "name": "X-Hub-Signature"
           }
         }
       },
       {
         "match":
         {
           "type": "value",
           "value": "refs/heads/master",
           "parameter":
           {
             "source": "payload",
             "name": "ref"
           }
         }
       }
     ]
   }
 }
]

Ein letztes zu überprüfendes Konfigurationselement sind die Firewall-Einstellungen Ihres Servers. Der Webhook-Server überwacht den Port "+ 9000 +". Dies bedeutet, dass eine Firewall, die auf dem Server ausgeführt wird, Verbindungen zu diesem Port zulassen muss. Geben Sie Folgendes ein, um eine Liste Ihrer aktuellen Firewall-Regeln anzuzeigen:

sudo ufw status

Wenn der Port "+ 9000 +" nicht in der Liste enthalten ist, aktivieren Sie ihn:

sudo ufw allow 9000

Weitere Informationen zu "+ ufw +" finden Sie in dieser Einführung zu "https://www.digitalocean.com/community/tutorials/ufw-essentials-common-firewall-rules-and-commands[ufw essentials".

Als Nächstes richten wir unser GitHub-Repository so ein, dass HTTP-Anforderungen an diesen Endpunkt gesendet werden.

Schritt 4 - Konfigurieren von GitHub-Benachrichtigungen

Konfigurieren Sie unser GitHub-Repository so, dass HTTP-Anforderungen gesendet werden, wenn ein Commit an den Master erfolgt:

  • 1. Gehen Sie zu Ihrem Repository und klicken Sie auf * Einstellungen *.

  • 2. Gehen Sie dann zu * Webhooks * und klicken Sie oben rechts auf * Webhook hinzufügen *.

  • 3. Geben Sie für die * Payload URL * Ihre Serveradresse wie folgt ein: + http: //: 9000 / hooks / +. Wenn Sie einen Domainnamen haben, können Sie diesen anstelle von ` verwenden. Beachten Sie, dass der Endpunktname mit der Eigenschaft "+ id +" in der Hook-Definition übereinstimmt. Dies ist ein Detail der Webhook-Implementierungen: Alle in "+ hooks.json +" definierten Hooks werden in der URL als "+ http: //: 9000 / hooks / +" angezeigt, wobei "" die "+ id +" in ist `+ hooks.json + Datei.

  • 4. Wählen Sie für * Inhaltstyp * * application / json * aus.

  • 5. Geben Sie für * Secret * das Geheimnis (++) ein, das Sie in der Definition von + hooks.json + festgelegt haben.

  • 6. Für * Welche Ereignisse möchten Sie diesen Webhook auslösen? * Wählen Sie * Nur Ereignis drücken *.

  • 7. Klicken Sie auf die Schaltfläche * Webhook hinzufügen *.

Wenn jemand ein Commit in Ihr Repository überträgt, sendet GitHub eine POST-Anfrage mit den Nutzdaten, die Informationen zum Commit-Ereignis enthalten. Neben anderen nützlichen Eigenschaften enthält es die Eigenschaften, die wir in der Auslöserregel definiert haben, damit unser Webhook-Server prüfen kann, ob die POST-Anforderung gültig war. Ist dies der Fall, enthält es weitere Informationen wie "+ drücker.name +".

Die vollständige Liste der mit Nutzdaten gesendeten Eigenschaften finden Sie auf der Seite GitHub Webhooks.

Schritt 5 - Schreiben des Bereitstellungs- / erneuten Bereitstellungsskripts

Zu diesem Zeitpunkt haben wir den Webhook auf das Skript "+ redeploy.sh +" verwiesen, aber das Skript selbst wurde nicht erstellt. Es wird die Arbeit erledigen, den neuesten Hauptzweig aus unserem Repository zu ziehen, Knotenmodule zu installieren und den Build-Befehl auszuführen.

Erstellen Sie das Skript:

nano /opt/scripts/redeploy.sh

Fügen wir zunächst eine Funktion zum Anfang des Skripts hinzu, mit der alle von ihm erstellten Dateien bereinigt werden. Wir können dies auch als Ort verwenden, um Software von Drittanbietern wie Slack zu benachrichtigen, wenn die erneute Bereitstellung nicht erfolgreich war:

/opt/scripts/redeploy.sh

#!/bin/bash -e

function cleanup {
     echo "Error occoured"
     #
}
trap cleanup ERR

Dies teilt dem "+ bash " - Interpreter mit, dass, wenn das Skript abrupt beendet wird, der Code in der Funktion " cleanup +" ausgeführt werden soll.

Als nächstes extrahieren Sie die Parameter, die + webhook + beim Ausführen an das Skript übergibt:

/opt/scripts/redeploy.sh

...

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


#

Beachten Sie, dass die Reihenfolge der Parameter der Eigenschaft + pass-arguments-to-command a aus der Datei` + hooks.json` entspricht.

Rufen wir zuletzt die Befehle auf, die zum erneuten Bereitstellen der Anwendung erforderlich sind:

/opt/scripts/redeploy.sh

...

cd ~//
git pull origin master
yarn && yarn build

#

Das vollständige Skript sieht folgendermaßen aus:

/opt/scripts/redeploy.sh

#!/bin/bash -e

function cleanup {
     echo "Error occoured"
     #
}
trap cleanup ERR

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

#

cd ~//
git pull origin master
yarn && yarn build

#

Das Skript wechselt in den Ordner, ruft den Code aus dem neuesten Hauptzweig ab, installiert neue Pakete und erstellt die Produktionsversion der Anwendung.

Beachten Sie das ++. Dies ist ein Platzhalter für den letzten Schritt in diesem Lernprogramm. Ohne Benachrichtigungen gibt es keine echte Möglichkeit, festzustellen, ob das Skript ordnungsgemäß ausgeführt wurde.

Machen Sie das Skript ausführbar, damit der Hook es ausführen kann:

chmod +x /opt/scripts/redeploy.sh

Da Nginx so konfiguriert ist, dass Dateien aus "+ / var / www // build +" bereitgestellt werden, wird bei Ausführung dieses Skripts das Erstellungsverzeichnis aktualisiert und Nginx stellt automatisch neue Dateien bereit.

Jetzt können wir die Konfiguration testen. Führen Sie den Webhook-Server aus:

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

Der Parameter "+ -hooks " teilt " webhook +" den Speicherort der Konfigurationsdatei mit.

Sie werden diese Ausgabe sehen:

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}

Dies sagt uns, dass alles korrekt geladen ist und unser Server nun den Hook "+" über die URL " http: //0.0.0.0: 9000 / hooks / " bedient. Dies macht einen Pfad oder Hook auf dem Server verfügbar, der ausgeführt werden kann. Wenn Sie jetzt einen einfachen REST-Aufruf (wie GET) mit dieser URL ausführen, passiert nichts Besonderes, da die Hook-Regeln nicht erfüllt wurden. Wenn der Hook erfolgreich ausgelöst werden soll, müssen wir die in ` hooks.json ` definierte ` trigger-rule +` erfüllen.

Testen wir dies mit einem leeren Commit im lokalen Projektverzeichnis. Lassen Sie Ihren Webhook-Server aktiv, navigieren Sie zurück zu Ihrem lokalen Computer und geben Sie Folgendes ein:

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

Übertragen Sie das Commit an den Master-Zweig:

git push origin master

Sie sehen die Ausgabe auf Ihrem Server wie folgt:

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" "" "82438acbf82f04d96c53cd684f8523231a1716d2"] and environment [] using /opt/scripts as cwd

Fügen wir nun Slack-Benachrichtigungen hinzu und schauen, was passiert, wenn der Hook eine erfolgreiche Erstellung mit Benachrichtigungen auslöst.

Schritt 6 - Slack Notifications hinzufügen

Um Slack-Benachrichtigungen zu erhalten, wenn Ihre App erneut bereitgestellt wird, können Sie das Skript "+ redeploy.sh +" so ändern, dass HTTP-Anforderungen an Slack gesendet werden. Sie müssen Slack auch so konfigurieren, dass Benachrichtigungen von Ihrem Server empfangen werden, indem Sie die * Webhook-Integration * im Slack-Konfigurationsfenster aktivieren. Sobald Sie eine * Webhook-URL * von Slack haben, können Sie Ihrem Skript Informationen zum Slack-Webhook-Server hinzufügen.

Führen Sie die folgenden Schritte aus, um Slack zu konfigurieren:

  • 1. Klicken Sie im Hauptbildschirm der Slack-Anwendung auf das Dropdown-Menü oben links und wählen Sie * Slack anpassen *.

  • 2. Gehen Sie dann zu den Abschnitten * Configure Apps * in der linken Seitenleiste * Menu *.

  • 3. Wählen Sie im Bereich * Verwalten * aus der linken Liste der Optionen die Option * Benutzerdefinierte Integration * aus.

  • 4. Suchen Sie nach der * Incoming WebHooks * -Integration.

  • 5. Klicken Sie auf * Konfiguration hinzufügen *.

  • 6. Wähle einen vorhandenen Kanal oder erstelle einen neuen.

  • 7. Klicken Sie auf * Eingehende WebHooks-Integration hinzufügen *.

Danach wird ein Bildschirm mit den Einstellungen für den Slack-Webhook angezeigt. Notieren Sie sich die * Webhook-URL *, bei der es sich um den vom Slack-Webhook-Server generierten Endpunkt handelt. Wenn Sie diese URL notiert und weitere Änderungen vorgenommen haben, müssen Sie auf die Schaltfläche * Save Settings * (Einstellungen speichern) unten auf der Seite klicken.

Kehren Sie zu Ihrem Server zurück und öffnen Sie das Skript "+ redeploy.sh +":

nano /opt/scripts/redeploy.sh

Im vorherigen Schritt haben wir im Skript für Slack-Benachrichtigungen Platzhalter mit der Bezeichnung "+" belassen. Wir werden diese nun durch " curl +" - Aufrufe ersetzen, die POST-HTTP-Anforderungen an den Slack-Webhook-Server senden. Der Slack-Hook erwartet, dass der JSON-Body, den er dann analysiert, die entsprechende Benachrichtigung im Channel anzeigt.

Ersetzen Sie das `` durch die folgenden `+ curl +` Aufrufe. Beachten Sie, dass Sie "" durch die * Webhook-URL * ersetzen müssen, die Sie zuvor notiert haben:

/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\"
     }"
}
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\"
}"

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\"
}"

Wir haben jeden Platzhalter durch einen etwas anderen "+ curl +" - Aufruf ersetzt:

  • Der erste stellt sicher, dass wir über alle Fehler informiert werden, die beim Ausführen des Skripts aufgetreten sind.

  • Der zweite sendet die Benachrichtigung, dass der Build der Anwendung gestartet wurde.

  • Der dritte sendet die Benachrichtigung, dass der Build erfolgreich abgeschlossen wurde.

Weitere Informationen zu Slack-Bots und -Integrationen finden Sie in der Slack-Webhooks-Dokumentation.

Wieder können wir unseren Hook mit einem leeren Commit im lokalen Projektverzeichnis testen. Navigieren Sie auf dem aktiven Webhook-Server zurück zu diesem Verzeichnis und erstellen Sie das leere Commit:

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

Schieben Sie das Commit in den Master-Zweig, um den Build auszulösen:

git push origin master

Die Ausgabe, einschließlich der Build-Informationen, sieht folgendermaßen aus:

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" "" "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//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

In Slack erhalten Sie Nachrichten an den Kanal Ihrer Wahl, in denen Sie darüber informiert werden, dass die Anwendungserstellung gestartet wurde und wann sie abgeschlossen ist.

Fazit

Wir haben jetzt die Einrichtung eines Bereitstellungssystems mit Webhooks, Nginx, Shell-Skripten und Slack abgeschlossen. Sie sollten jetzt in der Lage sein:

  • Konfigurieren Sie Nginx für die Arbeit mit dynamischen Builds Ihrer Anwendung.

  • Richten Sie den Webhook-Server ein und schreiben Sie Hooks, die bei GitHub-POST-Anforderungen ausgelöst werden.

  • Schreiben Sie Skripts, die Anwendungsbuilds und Benachrichtigungen auslösen.

  • Konfigurieren Sie Slack für den Empfang dieser Benachrichtigungen.

Das System aus diesem Tutorial kann erweitert werden, da der Webhook-Server modular aufgebaut ist und für die Verwendung mit anderen Anwendungen wie GitLab konfiguriert werden kann. Wenn die Konfiguration des Webhook-Servers über JSON zu umfangreich ist, können Sie unter https://www.hookdoo.com [Hookdoo] ein ähnliches Setup erstellen. Weitere Informationen zum Konfigurieren von Auslöserregeln für "+ Webhook +" finden Sie im Webhook-Projekt unter example hooks page.

Related