TOC

Déploiement d’applications React avec Webhooks et Slack sous Ubuntu 16.04

_L’auteur a sélectionné le Tech Education Fund pour recevoir un don dans le cadre du programme Write for DOnations. _

introduction

Lorsqu’un développeur apporte des modifications continues à une application, un système de déploiement avec Webhooks peut rationaliser le développement, en particulier pour les équipes. L’intégration des notifications Slack pour les modifications de code dans le flux de travail d’une équipe peut également être utile si une partie de l’équipe s’appuie sur un logiciel dorsal tel qu’une API.

Dans ce tutoriel, vous allez créer une application React avec le package https://github.com/facebook/create-react-app [+ create-react-app + + + npm +]. Ce package simplifie le travail d’amorçage d’un projet React en transpilant la syntaxe et en simplifiant le travail avec les dépendances et les outils requis. Après avoir ajouté le code de votre application à un référentiel GitHub, vous allez configurer Nginx pour servir vos fichiers de projet mis à jour. Vous allez ensuite télécharger et configurer le serveur Webhook et configurer GitHub pour qu’il communique avec ce dernier lorsque votre code est modifié. Enfin, vous configurerez Slack pour qu’il agisse comme un autre serveur Webhook, qui recevra des notifications lorsque le déploiement a été effectué avec succès.

En fin de compte, le système de déploiement que vous construisez dans cet article se présentera comme suit:

image: https: //assets.digitalocean.com/articles/react_deploy_webhooks/react-deploy.gif [Exemple de déploiement]

Cette courte vidéo montre une validation et une validation vides dans le référentiel GitHub, ce qui déclenche la construction de l’application et les notifications dans Slack.

Conditions préalables

Pour compléter ce tutoriel, vous aurez besoin de:

Étape 1 - Créer une application React en utilisant create-react-app

Commençons par construire l’application que nous utiliserons pour tester nos Webhooks avec + create-react-app +. Nous pouvons ensuite créer un référentiel GitHub et y insérer le code du projet.

Sur votre ordinateur local, ajoutez le module de noeud + create-react-app à votre référentiel global et rendez la commande` + create-react-app` disponible dans votre environnement shell:

sudo npm install -g create-react-app

Ensuite, lancez + create-react-app pour créer un projet appelé` ++ `:

create-react-app

Naviguez vers le répertoire ++:

cd

Avec + nano + ou votre éditeur de texte favori, ouvrez le fichier + package.json:

nano package.json

Le fichier devrait ressembler à ceci:

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

Le fichier + package.json + comprend les scripts suivants:

  • * + start + *: Ce script est responsable du démarrage de la version de développement de l’application. Il exécute un serveur HTTP qui sert l’application.

  • * + build + *: Ce script est responsable de la création de la version de production de l’application. Vous utiliserez ce script sur le serveur.

  • * + test + *: Ce script exécute les tests par défaut associés au projet.

  • * + eject + *: Ce script est une fonctionnalité avancée du package + create-rea-app +. Si le développeur n’est pas satisfait de l’environnement de construction proposé par le paquet, il est possible d’éjecter l’application, ce qui produira des options qui ne seraient pas disponibles (comme des transpileurs CSS personnalisés et des outils de traitement JS).

Fermez le fichier lorsque vous avez terminé d’inspecter le code.

Ensuite, créons un référentiel GitHub pour le projet. Vous pouvez suivre ce didacticiel sur creating un référentiel GitHub pour obtenir des conseils. Prenez note de l’origine du référentiel (c.-à-d. son URL GitHub).

De retour dans votre répertoire ++, initialisez le référentiel avec + git +:

git init

Ensuite, ajoutez l’origine distante avec votre URL GitHub:

git remote add origin

Placez tous les fichiers dans le répertoire du projet:

git add .

Engagez-les:

git commit -m "initial commit"

Et poussez-les vers le référentiel:

git push origin master

Pour plus d’informations sur la création de référentiels GitHub et l’initialisation d’applications existantes avec + git +, voir https://help.github.com/articles/adding-an-existing-project-to-github-using-the-command-line de GitHub. /[Documentation].

Une fois la configuration du référentiel terminée, nous pouvons passer à la spécification des détails de la configuration sur notre serveur.

Étape 2 - Configuration du répertoire et configuration de Nginx

Avec le référentiel en place, il est maintenant possible d’extraire le code de l’application de GitHub et de configurer Nginx pour servir l’application.

Connectez-vous à votre serveur, accédez à votre répertoire personnel et clonez votre référentiel:

cd ~
git clone

Aller au projet cloné:

cd

Pour créer un répertoire de construction dans le projet et des fichiers à utiliser par Nginx, vous devrez exécuter la commande + yarn build +. Ceci exécute le script de construction du projet, créant le répertoire de construction. Ce dossier comprend, entre autres, un fichier + index.html +, un fichier JavaScript et un fichier CSS. La commande + yarn + téléchargera tous les modules de nœuds requis pour votre projet:

yarn && yarn build

Faisons ensuite un lien symbolique dans le répertoire + / var / www / + vers le répertoire + ~ / do-react-example-app +. Ceci maintiendra l’application dans notre répertoire personnel, tout en le rendant disponible pour que Nginx puisse le servir à partir du répertoire + / var / www +:

sudo ln -s ~/ /var/www/

Notez que cela renvoie au répertoire du projet plutôt qu’au répertoire de construction, qui change plus fréquemment. La création de ce lien peut être particulièrement utile dans les scénarios où vous déployez de nouvelles versions de l’application: en créant un lien vers une version stable, vous simplifiez le processus de remplacement ultérieurement, lors du déploiement de versions supplémentaires. Si quelque chose ne va pas, vous pouvez également revenir à une version précédente de la même manière.

Certaines autorisations doivent être définies sur le lien symbolique pour que Nginx puisse le servir correctement:

sudo chmod -R 755 /var/www

Ensuite, configurons un bloc de serveur Nginx pour servir le répertoire de construction. Créez une nouvelle configuration de serveur en tapant:

sudo nano /etc/nginx/sites-available/

Copiez la configuration suivante en remplaçant ++ par votre adresse IP ou votre domaine (le cas échéant):

/ 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;
       }
}

Les directives de ce fichier incluent:

  • * + listen + *: La propriété qui configure le port d’écoute du serveur.

  • * + root + *: chemin d’accès au dossier à partir duquel Nginx servira les fichiers.

  • * + index + *: Le fichier que le serveur essaie de servir en premier. Il essaiera de servir l’un des fichiers suivants du répertoire + / var / www // build:` + index.html`, + index.html,` + index.nginx-debian.html`, avec priorité. du premier au dernier.

  • * + nom_serveur + *: nom de domaine ou adresse IP du serveur.

Ensuite, créez un lien symbolique dans le répertoire + sites-enabled +:

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

Cela indiquera à Nginx d’activer la configuration de blocage du serveur à partir du dossier + sites-available +.

Vérifiez si la configuration est valide:

sudo nginx -t

Enfin, redémarrez Nginx pour appliquer la nouvelle configuration:

sudo systemctl restart nginx

Avec ces détails de configuration en place, nous pouvons passer à la configuration du Webhook.

Étape 3 - Installation et configuration de Webhooks

Les Webhooks sont de simples serveurs HTTP dotés de points de terminaison configurables appelés hooks. À la réception des demandes HTTP, les serveurs Webhook exécutent un code personnalisable qui respecte un ensemble de règles configurables. Il existe déjà de nombreux serveurs Webhook intégrés à des applications sur Internet, y compris Slack.

L’implémentation la plus largement utilisée d’un serveur webhook est Webhook, écrite en Go. Nous allons utiliser cet outil pour configurer notre serveur webhook.

Assurez-vous que vous êtes dans votre répertoire personnel sur votre serveur:

cd ~

Ensuite, téléchargez le + webhook +:

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

Extrait le:

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

Rendez le binaire disponible dans votre environnement en le déplaçant vers + / usr / local / bin:

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

Enfin, nettoyez les fichiers téléchargés:

rm -rf webhook-linux-amd64*

Testez la disponibilité de + webhook + dans votre environnement en tapant:

webhook -version

La sortie devrait afficher la version + webhook +:

Outputwebhook version 2.6.5

Ensuite, configurons les dossiers + hooks + et + + scripts + dans le répertoire + / opt +, où se trouvent généralement les fichiers des applications tierces. Comme le répertoire + / opt + appartient généralement à + ​​root +, nous pouvons créer des répertoires dotés des privilèges root, puis en transférer la propriété au + $ USER + local.

Tout d’abord, créez les répertoires:

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

Transférez ensuite la propriété sur votre + $ USER +:

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

Ensuite, configurons le serveur + webhook en créant un fichier` + hooks.json`. Avec + nano + ou votre éditeur favori, créez le fichier + hooks.json dans le répertoire` + / opt / hooks`:

nano /opt/hooks/hooks.json

Pour que le + webhook + soit déclenché lorsque GitHub envoie des demandes HTTP, notre fichier aura besoin d’un tableau de règles JSON. Ces règles comprennent les propriétés suivantes:

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

Plus précisément, ces règles définissent les informations suivantes:

  • * + id + *: nom du noeud final utilisé par le serveur Webhook. Nous appellerons cela ++.

  • * + execute-command + *: Le chemin du script qui sera exécuté lorsque le hook sera déclenché. Dans notre cas, ce sera le script + redeploy.sh + situé dans + / opt / scripts / redeploy.sh +.

  • * + command-working-directory *: Le répertoire de travail qui sera utilisé lors de l’exécution de la commande. Nous allons utiliser + / opt / scripts + car c’est là que se trouve + redeploy.sh +.

  • * + pass-arguments-to-command + *: Paramètres transmis au script à partir de la requête HTTP. Nous allons passer un message de validation, un nom de pousseur et un identifiant de validation à partir du contenu de la requête HTTP. Cette même information sera également incluse dans vos messages Slack.

Le fichier + / opt / hooks / hooks.json + devrait inclure les informations suivantes:

/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": {}
 }
]

La charge utile de la demande HTTP POST GitHub inclut les propriétés + head_commit.message +, + pusher.name + et + head_commit.id +. Lorsqu’un événement configuré (tel que PUSH) se produit dans votre référentiel GitHub, GitHub envoie une demande POST avec un corps JSON contenant des informations sur l’événement. Vous trouverez des exemples de ces charges utiles POST dans la docs GitHub.

La dernière propriété du fichier de configuration est la propriété + trigger-rule +, qui indique au serveur Webhook dans quelles conditions le raccordement sera déclenché. Si laissé vide, le hook sera toujours déclenché. Dans notre cas, nous allons configurer le raccordement pour qu’il soit déclenché lorsque GitHub envoie une demande POST à ​​notre serveur webhook. Plus précisément, il ne sera déclenché que si le secret GitHub (désigné ici par «+») dans la demande HTTP correspond à celui de la règle et si la validation est arrivée à la branche ` master +`.

Ajoutez le code suivant pour définir la + trigger-rule +, en remplaçant ++ par un mot de passe de votre choix:

...
   "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"
           }
         }
       }
     ]
   }
 }
]

Au complet, + / opt / hooks / hooks.json + ressemblera à ceci:

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

Un dernier élément de configuration à vérifier concerne les paramètres de pare-feu de votre serveur. Le serveur webhook écoutera sur le port + 9000 +. Cela signifie que si un pare-feu est en cours d’exécution sur le serveur, il devra autoriser les connexions à ce port. Pour voir une liste de vos règles de pare-feu actuelles, tapez:

sudo ufw status

Si le port + 9000 + n’est pas inclus dans la liste, activez-le:

sudo ufw allow 9000

Pour plus d’informations sur + ufw +, voir cette introduction à ufw essentials.

Ensuite, configurons notre référentiel GitHub pour envoyer des requêtes HTTP à ce noeud final.

Étape 4 - Configuration des notifications GitHub

Configurons notre référentiel GitHub pour qu’il envoie des requêtes HTTP lorsqu’une validation vers le maître se produit:

  • 1. Allez dans votre référentiel et cliquez sur * Paramètres *.

  • 2. Ensuite, allez à * Webhooks * et cliquez sur * Ajouter Webhook *, situé dans le coin supérieur droit.

  • 3. Pour l’URL * Payload *, tapez l’adresse de votre serveur comme suit: + http: //: 9000 / hooks / +. Si vous avez un nom de domaine, vous pouvez l’utiliser à la place de `. Notez que le nom du noeud final correspond à la propriété `+ id +` dans la définition du hook. Ceci est un détail des implémentations webhook: tous les hooks définis dans `+ hooks.json +` apparaîtront dans l'URL sous la forme `+ http: //: 9000 / hooks / +`, où ' `est le + id + dans `+ hooks.json + fichier.

  • 4. Pour * Type de contenu *, choisissez * application / json *.

  • 5. Pour * Secret *, tapez le secret (++) que vous avez défini dans la définition + hooks.json +.

  • 6. Pour * quels événements souhaiteriez-vous déclencher ce Webhook? * Sélectionnez * Il suffit de pousser l’événement *.

  • 7. Cliquez sur le bouton * Ajouter un Webhook *.

Désormais, lorsque quelqu’un envoie une validation dans votre référentiel, GitHub envoie une demande POST avec la charge utile contenant des informations sur l’événement de validation. Parmi d’autres propriétés utiles, il contiendra les propriétés que nous avons définies dans la règle de déclenchement, afin que notre serveur webhook puisse vérifier si la demande POST était valide. Si c’est le cas, il contiendra d’autres informations telles que + pusher.name +.

La liste complète des propriétés envoyées avec une charge utile se trouve sur la page GitHub Webhooks.

Étape 5 - Écriture du script de déploiement / redéploiement

À ce stade, nous avons pointé le lien Web vers le script + redeploy.sh +, mais nous n’avons pas créé le script lui-même. Il effectuera le travail consistant à extraire la dernière branche principale de notre référentiel, à installer des modules de nœud et à exécuter la commande de construction.

Créez le script:

nano /opt/scripts/redeploy.sh

Premièrement, ajoutons une fonction en haut du script qui nettoiera tous les fichiers qu’il a créés. Nous pouvons également l’utiliser pour indiquer à un logiciel tiers, tel que Slack, que le redéploiement n’a pas abouti:

/opt/scripts/redeploy.sh

#!/bin/bash -e

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

Cela indique à l’interprète + bash + que si le script s’achève abruptement, il doit exécuter le code dans la fonction + cleanup +.

Ensuite, extrayez les paramètres que + webhook + transmet au script lors de son exécution:

/opt/scripts/redeploy.sh

...

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


#

Notez que l’ordre des paramètres correspond à la propriété + pass-arguments-to-command a du fichier` + hooks.json`.

Enfin, appelons les commandes nécessaires au redéploiement de l’application:

/opt/scripts/redeploy.sh

...

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

#

Le script complet ressemblera à ceci:

/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

#

Le script ira dans le dossier, extraira le code de la dernière branche principale, installera de nouveaux packages et construira la version de production de l’application.

Notez le ++. Ceci est un espace réservé pour la dernière étape de ce tutoriel. Sans notifications, il n’existe aucun moyen réel de savoir si le script s’est exécuté correctement.

Rendre le script exécutable pour que le hook puisse l’exécuter:

chmod +x /opt/scripts/redeploy.sh

Comme Nginx est configuré pour servir les fichiers à partir de + / var / www // build +, lorsque ce script est exécuté, le répertoire de construction sera mis à jour et Nginx servira automatiquement les nouveaux fichiers.

Nous sommes maintenant prêts à tester la configuration. Lançons le serveur webhook:

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

Le paramètre + -hooks + indique + webhook + l’emplacement du fichier de configuration.

Vous verrez cette sortie:

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}

Cela nous indique que tout est chargé correctement et que notre serveur sert maintenant le hook ++ via l’URL + http: //0.0.0.0: 9000 / hooks / +. Cela expose un chemin ou un raccordement sur le serveur qui peut être exécuté. Si vous effectuez maintenant un appel REST simple (comme GET) avec cette URL, rien de spécial ne se produira car les règles de raccordement ne sont pas satisfaites. Si nous voulons que le hook soit déclenché avec succès, nous devons remplir le + trigger-rule + défini dans + hooks.json +.

Essayons cela avec une validation vide dans le répertoire du projet local. En laissant votre serveur Webhook en marche, revenez sur votre machine locale et tapez ce qui suit:

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

Poussez le commit vers la branche master:

git push origin master

Vous verrez une sortie comme celle-ci sur votre serveur:

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

Ajoutons maintenant les notifications Slack et examinons ce qui se produit lorsque le hook déclenche une construction réussie avec notifications.

Étape 6 - Ajout de notifications de jeu

Pour recevoir des notifications Slack lorsque votre application est redéployée, vous pouvez modifier le script + redeploy.sh + pour envoyer des demandes HTTP à Slack. Il est également nécessaire de configurer Slack pour recevoir les notifications de votre serveur en activant * l’intégration Webhook * dans le panneau de configuration de Slack. Une fois que vous avez une * URL Webhook * de Slack, vous pouvez ajouter des informations sur le serveur Slack Webhook à votre script.

Pour configurer Slack, procédez comme suit:

  • 1. Sur l’écran principal de l’application Slack, cliquez sur le menu déroulant situé en haut à gauche et choisissez * Personnaliser Slack *.

  • 2. Ensuite, allez dans les sections * Configurer les applications * situées dans la barre latérale gauche * Menu *.

  • 3. Dans le panneau * Gérer *, choisissez * Intégration personnalisée * dans la liste d’options de gauche.

  • 4. Recherchez l’intégration * Incoming WebHooks *.

  • 5. Cliquez sur * Ajouter une configuration *.

  • 6. Choisissez un canal existant ou créez-en un nouveau.

  • 7. Cliquez sur * Ajouter une intégration WebHooks entrante *.

Après cela, un écran affichant les paramètres Slack Webhook apparaîtra. Notez l’URL * Webhook *, qui correspond au point de terminaison généré par le serveur Slack Webhook. Lorsque vous avez terminé de prendre note de cette URL et d’apporter d’autres modifications, assurez-vous d’appuyer sur le bouton * Enregistrer les paramètres * en bas de la page.

Retournez sur votre serveur et ouvrez le script + redeploy.sh +:

nano /opt/scripts/redeploy.sh

Dans l’étape précédente, nous avons laissé des espaces réservés dans le script pour les notifications Slack, notés ++. Nous allons maintenant les remplacer par les appels + curl + qui font des requêtes HTTP POST au serveur Slack Webhook. Le hook Slack attend le corps JSON, qu’il analysera ensuite, en affichant la notification appropriée dans le canal.

Remplacez le ` par les appels `+ curl +` suivants. Notez que vous devrez remplacer ` par l'* URL Webhook * notée précédemment:

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

Nous avons remplacé chaque espace réservé par un appel + curl + légèrement différent:

  • Le premier garantit que nous recevons une notification de toutes les erreurs survenues lors de l’exécution du script.

  • Le second envoie la notification que la construction de l’application a commencé.

  • Le troisième envoie la notification que la construction s’est terminée avec succès.

Pour plus d’informations sur les slack bots et les intégrations, consultez la documentation Slack webhooks.

De nouveau, nous pouvons tester notre hook avec un commit vide dans le répertoire du projet local. En laissant le serveur webhook en marche, revenez dans ce répertoire et créez le commit vide:

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

Poussez le commit vers la branche master pour déclencher la construction:

git push origin master

La sortie, y compris les informations de construction, ressemblera à ceci:

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

Dans Slack, vous recevrez des messages sur le canal de votre choix, vous indiquant que la création de l’application a commencé et quand elle est terminée.

Conclusion

Nous avons maintenant terminé la configuration d’un système de déploiement utilisant webhooks, Nginx, des scripts shell et Slack. Vous devriez maintenant pouvoir:

  • Configurez Nginx pour qu’il fonctionne avec les versions dynamiques de votre application.

  • Configurez le serveur webhook et écrivez les points d’ancrage déclenchés par les requêtes GitHub POST.

  • Écrire des scripts qui déclenchent les versions d’application et les notifications.

  • Configurez Slack pour recevoir ces notifications.

Le système de ce didacticiel peut être étendu, car le serveur Webhook est modulaire et peut être configuré pour fonctionner avec d’autres applications telles que GitLab. Si la configuration du serveur Webhook via JSON est excessive, vous pouvez créer une configuration similaire à l’aide de https://www.hookdoo.com [Hookdoo]. Pour plus d’informations sur la configuration des règles de déclenchement pour + webhook +, reportez-vous à la page de projet Webhook https://github.com/adnanh/webhook/wiki/Hook-Examples.

Related