https://d226lax1qjow5r.cloudfront.net/blog/blogposts/ngrok-in-node-red-dr/ngrok-featured.png

Démarrer avec Ngrok dans Node-RED

Publié le April 20, 2021

Temps de lecture : 6 minutes

Note : Certains des outils ou méthodes décrits dans cet article peuvent ne plus être pris en charge ou ne plus être d'actualité. Pour un contenu mis à jour ou une assistance, consultez nos derniers articles ou contactez-nous sur le site Communauté Vonage Slack

Si vous avez commencé à vous familiariser avec le monde des API Nexmo, il y a de fortes chances que vous ayez déjà rencontré des webhooks. Et c'est tant mieux ! Ils constituent un moyen parfait d'être notifié d'événements tels que les SMS entrants, les reçus de livraison et une variété d'événements liés aux appels vocaux. Mais il y a un hic. Lorsque vous créez des consommateurs de webhooks, vous avez besoin d'une URL accessible au public pour configurer le service API. Si vous n'exposez pas votre serveur à l'internet, il n'y a aucun moyen de recevoir des messages sur vos webhooks. Si vous développez sur localhost, c'est là que Ngrok entre en jeu.

Qu'est-ce que Ngrok et pourquoi l'utiliseriez-vous ?

Ngrok est une application multiplateforme qui expose votre serveur local à un unique. ngrok.io via des tunnels sécurisés. Par défaut, il crée des points de terminaison HTTP et HTTPS, ce qui le rend utile pour tester des intégrations avec des services tiers ou des API qui nécessitent des domaines SSL/TLS valides.

Une autre option consisterait à déployer votre code sur un serveur distant. Bien que l'utilisation de ce type de services devienne de plus en plus facile, elle implique généralement un certain coût et un certain temps de travail. De plus, le redéploiement de votre code toutes les deux minutes pendant le débogage peut être légèrement frustrant.

Exposer votre serveur local à l'internet avec ngrok ne nécessite qu'une commande dans votre terminal, une fois que vous l'avez installé sur votre machine locale. Lire l'article de blog d'Aaron d'Aaron pour en savoir plus sur cette option.

An image showing the output of an ngrok tunnel in the Terminal

Si vous préférez ne pas quitter votre éditeur Node-RED, vous pouvez utiliser la commande ngrok node pour la même fonctionnalité.

An image showing Ngrok layout in NodeRed

Après avoir spécifié le port sur lequel Node-RED écoute (généralement 1880), le client ngrok initie une connexion sécurisée au serveur ngrok et n'importe qui peut alors faire des requêtes à votre serveur local à travers l'adresse du tunnel ngrok.


Préoccupations en matière de sécurité

En exécutant ce nœud, vous exposerez votre installation Node-RED à l'internet public, il vous est donc fortement conseillé de de mettre un mot de passe administrateur sur l'éditeur.


Mise en place de Ngrok dans Node-RED

Installer lenode-red-contrib-ngrok Paquet

Tout d'abord, vous devez installer le nœud ngrok. Pour ce faire, ouvrez Gérer la palette dans le menu hamburger de votre éditeur Node-RED, recherchez le paquetage node-red-contrib-ngrok et cliquez sur installer. Après avoir redémarré votre éditeur, le nœud ngrok devrait apparaître dans la palette des nœuds.

Image showing managing the palette in NodeRed

Configurer Ngrok

Le nœud ngrok prend les chaînes de caractères sur ou off en entrée pour démarrer/arrêter le tunnel, et affiche l'adresse de l'hôte ngrok en tant que charge utile msg.payload.

La façon la plus simple de procéder consiste à câbler deux nœuds inject comme entrée du nœud ngrok l'un avec la charge utile de la chaîne de caractères sur et l'autre avec off. Pour une utilisation plus facile, vous pouvez également définir les propriétés Name de ces nœuds dans les propriétés du nœud, de manière à ce que la fonctionnalité de ces nœuds soit claire. Ensuite, pour afficher l'adresse de l'hôte dans la barre latérale de débogage, connectez un noeud debug après ngrok.

La dernière étape avant de lancer déployerouvrez les propriétés du nœud ngrok et spécifiez le numéro de port. Dans le cas de Node-RED, la valeur par défaut est 1880. La région ngrok par défaut est les États-Unis, mais vous pouvez également la définir sur l'Europe ou l'Asie. Vous pouvez également ajouter votre authtoken pour votre Account ngrok si vous en avez un. Ne vous inquiétez pas si vous n'en avez pas, sautez cette étape pour l'instant. Le nœud vous avertira qu'il n'est pas entièrement configuré, mais ce n'est pas un problème.

An image of NodeRed showing how to set various properties for Ngrok

Tout est prêt ! Une fois que vous avez appuyé sur déployer et que vous avez cliqué sur le bouton sur inject naviguez vers l'URL affichée dans la zone de débogage pour trouver votre éditeur Node-RED à une adresse publique.

Ce tunnel durera 8 heures et votre éditeur est maintenant publiquement disponible sur internet. Après 8 heures, vous devrez redémarrer votre tunnel et vous obtiendrez un autre sous-domaine ngrok généré aléatoirement. C'est un excellent moyen de partager rapidement des démonstrations locales ou des applications de preuve de concept, mais n'oubliez pas que toute personne connaissant l'URL pourra modifier votre flux. Il est donc fortement conseillé de de définir un mot de passe administrateur sur l'éditeur.

Étapes supplémentaires

Bien que votre tunnel ngrok soit opérationnel et que tout ce que vous avez fait jusqu'à présent ne nécessite pas que vous ayez un Account ngrok, il peut être intéressant de d'en créer un.

Si vous choisissez de vous inscrire pour un compte gratuit, vous pouvez alors vous authentifier avec ngrok dans le nœud ngrok en fournissant votre nom d'utilisateur et votre mot de passe. authtoken et votre tunnel ne sera plus limité à 8 heures. Le nom du sous-domaine sera toujours généré aléatoirement, mais il restera le même. Obtenez votre authtoken à partir de https://dashboard.ngrok.com/auth et collez-le dans les propriétés de votre ngrok dans les propriétés de votre nœud.

An Ngrok display showing how to retrieve your AuthToken

Le paquet comprend 1 processus ngrok en ligne, 4 tunnels/processus ngrok et 40 connexions/minute. Il s'agit d'une solution idéale pour les démonstrations rapides et les besoins simples en matière de tunnels.

Vous pouvez également consulter leurs [plans d'abonnement] payants (https://dashboard.ngrok.com/billing/plan) si vous recherchez encore plus de fonctionnalités, notamment des sous-domaines personnalisés, des noms d'hôtes réservés, une liste blanche d'adresses IP, un plus grand nombre de processus/tunnels/connexions, etc.

Fonctionnalités utiles de Ngrok

Tableau de bord

Cette interface web fonctionnant localement sur votre machine, normalement sur [port 4040] (http://127.0.0.1:4040/), fournit des informations précieuses sur votre tunnel. Vous pouvez facilement inspecter l'état de votre tunnel, les détails des requêtes que vous avez faites à travers lui et les réponses reçues, y compris le contenu de tous les en-têtes. Assurez-vous de bien regarder tout ce qui se trouve sous l'option inspecter car cela peut s'avérer très utile pour déboguer les interactions de l'API.

An image showing the Ngrok dashboard

Demandes de rediffusion

Le plus beau du tableau de bord ? Vous pouvez rejouer demandes ou les rejouer avec des modifications. Par exemple, si vous avez un flux qui capture les messages entrants de l'API SMS Nexmo, plutôt que d'avoir à envoyer un autre SMS pour déclencher le webhook, vous pouvez simplement rejouer la dernière demande de SMS entrant. C'est puissant !

A gif showing how to trigger webhooks in Ngrok

Quelle est la prochaine étape ?

Dans ce tutoriel, vous avez appris à exposer votre serveur local à l'internet grâce à la puissance de Node-RED. Vous voulez le voir en action ? Choisissez l'un de nos tutoriels Node-RED et continuez !

Si vous avez suivi ce chapitre, vous avez déjà un tunnel en cours d'exécution, alors n'hésitez pas à sauter le chapitre suivant. Exposer votre serveur local à l'internet à l'internet.

  • [Envoi de notifications de groupe avec Google Sheets et Node-RED] (https://developer.vonage.com/en/blog/sms-notifications-google-sheets-nodered-dr)

  • [Comment créer un SVI en utilisant Node-RED et les API de Nexmo] (https://developer.vonage.com/en/blog/interactive-voice-response-node-red-dr)

  • [Créez votre propre boîte vocale avec Node-RED et l'API Voice de Nexmo] (https://developer.vonage.com/en/blog/build-voicemail-node-red-voice-api-dr)

  • [Renvoyer un appel via un Voice Proxy avec Node-RED](https://developer.vonage.com/en/blog/forward-call-via-voice-proxy-node-red-dr)

  • [Créer une conférence téléphonique avec Node-RED](https://developer.vonage.com/en/blog/conference-call-node-red-dr)

  • [Verify les numéros de téléphone avec Node-RED](https://developer.vonage.com/en/blog/verify-phone-numbers-with-node-red-dr)

  • [Comment passer des appels téléphoniques en synthèse vocale avec Node-RED] (https://developer.vonage.com/en/blog/make-text-to-speech-phone-calls-node-red-dr/)

  • [Comment recevoir des appels téléphoniques avec Node-RED] (https://developer.vonage.com/en/blog/receive-phone-calls-node-red-dr/)

  • [Comment envoyer des SMS avec Node-RED] (https://developer.vonage.com/en/blog/send-sms-messages-node-red-dr/)

  • [Comment recevoir des SMS avec Node-RED](https://developer.vonage.com/en/blog/receive-sms-messages-node-red-dr/)

Plus d'informations sur Ngrok

  • [Comment ça marche] (https://ngrok.com/product)

  • [Docs] (https://ngrok.com/docs)

Partager:

https://a.storyblok.com/f/270183/372x373/36054b72d0/julia-biro.png
Julia BiroDéfenseur des développeurs

Julia s'engage à aider ses collègues développeurs en créant des tutoriels, des guides et des ressources pratiques. Grâce à son expérience en matière de sensibilisation et d'éducation, elle vise à rendre la technologie plus accessible et à améliorer l'expérience globale des développeurs. Vous pouvez souvent la trouver lors d'événements communautaires locaux.