Prévisualisation des applications en cours d'exécution dans l'environnement de développement AWS Cloud9 intégré (IDE) - AWS Cloud9
Exécution d'une applicationPrévisualisation d'une application en cours d'exécutionRechargement de la prévisualisation d'une applicationModification du type de prévisualisation d'une applicationOuverture de la prévisualisation d'une application dans un onglet de navigateur web distinctBasculement vers une autre URL de prévisualisationPartage d'une application en cours d'exécution sur Internet

Les traductions sont fournies par des outils de traduction automatique. En cas de conflit entre le contenu d'une traduction et celui de la version originale en anglais, la version anglaise prévaudra.

Prévisualisation des applications en cours d'exécution dans l'environnement de développement AWS Cloud9 intégré (IDE)

Vous pouvez utiliser l' AWS Cloud9 IDE pour prévisualiser une application en cours d'exécution depuis l'IDE.

Exécution d'une application

Avant de pouvoir prévisualiser votre application depuis l'IDE, celle-ci doit être exécutée dans l'environnement de AWS Cloud9 développement. Il doit utiliser le protocole HTTP sur les ports suivants :

  • 8080

  • 8081

  • 8082

Tous les ports ci-dessus doivent utiliser l'adresse IP de 127.0.0.1localhost, ou0.0.0.0.

Note

Vous n'avez pas besoin d'exécuter votre application en utilisant HTTP sur le port 8080, 8081 ou 8082avec l'adresse IP de 127.0.0.1, localhost ou 0.0.0.0. Cependant, vous ne pourrez pas afficher votre application en cours d'exécution depuis l'IDE.

Note

L'application de prévisualisation est exécutée dans l'IDE et est chargée dans un élément iframe. Certains serveurs d'applications peuvent bloquer par défaut les requêtes provenant d'éléments iframe, tels que l'en-tête X-Frame-Options. Si votre application de prévisualisation ne s'affiche pas dans l'onglet d'aperçu, assurez-vous que votre serveur d'applications n'interdit pas l'affichage du contenu dans les iframes.

Pour écrire le code permettant d'exécuter votre application sur un port et une adresse IP spécifiques, consultez la documentation de votre application.

Pour exécuter votre application, consultez Exécution de votre code.

Pour tester ce comportement, ajoutez le JavaScript code suivant à un fichier nommé server.js à la racine de votre environnement. Ce code exécute un serveur en utilisant un fichier nommé Node.js.

Note

Dans l'exemple de code suivant, text/html est le Content-Type du contenu renvoyé. Pour renvoyer le contenu dans un format différent, spécifiez un autre Content-Type. Par exemple, vous pouvez spécifier text/css pour un format de fichier CSS.

var http = require('http');
var fs = require('fs');
var url = require('url');

http.createServer( function (request, response) {
  var pathname = url.parse(request.url).pathname;
  console.log("Trying to find '" + pathname.substr(1) + "'...");

  fs.readFile(pathname.substr(1), function (err, data) {
    if (err) {
      response.writeHead(404, {'Content-Type': 'text/html'});
      response.write("ERROR: Cannot find '" + pathname.substr(1) + "'.");
      console.log("ERROR: Cannot find '" + pathname.substr(1) + "'.");
    } else {
      console.log("Found '" + pathname.substr(1) + "'.");
      response.writeHead(200, {'Content-Type': 'text/html'});
      response.write(data.toString());
    }
    response.end();
  });
}).listen(8080, 'localhost'); // Or 8081 or 8082 instead of 8080. Or '127.0.0.1' instead of 'localhost'.

Vous pouvez également ajouter le code Python ci-dessous à un fichier portant un nom comme server.py dans la racine de votre environnement. Dans l'exemple suivant, un serveur est exécuté à l'aide de Python.

import os
import http.server
import socketserver

ip = 'localhost' # Or '127.0.0.1' instead of 'localhost'.
port = '8080' # Or '8081' or '8082' instead of '8080'.
Handler = http.server.SimpleHTTPRequestHandler
httpd = socketserver.TCPServer((ip, int(port)), Handler)
httpd.serve_forever()

Ajoutez ensuite le code HTML ci-dessous à un fichier portant un nom comme index.html dans la racine de votre environnement/

<html>
  <head>
    <title>Hello Home Page</title>
  </head>
  <body>
    <p style="font-family:Arial;color:blue">Hello, World!</p>
  </body>
</html>

Pour voir la sortie HTML de ce fichier dans l'onglet de prévisualisation d'application, exécutez server.js avec Node.js ou le fichier server.py avec Python. Suivez les étapes de la section suivante afin de la prévisualiser. Dans l'onglet de prévisualisation de l'application, ajoutez /index.html à la fin de l'URL, puis appuyez sur Enter.

Prévisualisation d'une application en cours d'exécution

Avant de programmer vos applications, prenez en compte les éléments suivants :

  • Votre application s'exécute à l'aide du protocole HTTP via le port 8080, 8081 ou 8082.

  • L'adresse IP de votre application dans l'environnement est 127.0.0.1, localhost ou 0.0.0.0.

  • Le fichier de code de votre application est ouvert et actif dans l' AWS Cloud9 IDE.

Après avoir confirmé tous ces détails, choisissez l'une des options suivantes dans la barre de menu :

  • Preview, Preview Running Application

  • Tools, Preview, Preview Running Application

Cette action ouvre un onglet de prévisualisation d'application dans l'environnement, puis affiche la sortie de l'application dans l'onglet.

Note

Si l'onglet de prévisualisation d'application affiche une erreur ou qu'il est vide, essayez de suivre les étapes de dépannage dans L'onglet d'aperçu d'application affiche une erreur ou est vide. Si, lorsque vous essayez de prévisualiser une application ou un fichier, vous recevez le message suivant : « La fonctionnalité de prévisualisation est désactivée car les cookies tiers sont désactivés dans votre navigateur », suivez les étapes de résolution des problèmes décrites dansRemarque sur l'aperçu d'une application ou l'aperçu d'un fichier : « Cookies tiers désactivés ».

Note

Si l'application n'est pas déjà en cours d'exécution, une erreur s'affiche dans l'onglet de prévisualisation d'application. Exécutez ou redémarrez l'application, puis choisissez à nouveau la commande de la barre de menus.

Supposons, par exemple, que votre application ne puisse s'exécuter sur aucun des ports ou aucune des adresses IP mentionnés. Ou bien, votre application doit s'exécuter sur plusieurs de ces ports en même temps. Par exemple, votre application doit s'exécuter sur des ports 8080 et 3000 en même temps. Si tel est le cas, l'onglet d'aperçu de l'application peut afficher une erreur ou être vide. En effet, l'onglet d'aperçu d'application dans l'environnement ne fonctionne qu'avec les ports et les adresses IP précédents. De plus, l'application ne fonctionne qu'avec un seul port à la fois.

Nous vous déconseillons de partager l'URL de l'onglet de prévisualisation avec d'autres personnes. (L'URL est au format suivant :https://12a34567b8cd9012345ef67abcd890e1.vfs.cloud9.us-east-2.amazonaws.com/. Dans ce format, 12a34567b8cd9012345ef67abcd890e1 il s'agit de l'ID AWS Cloud9 attribué à l'environnement. us-east-2est l'identifiant de Région AWS l'environnement.) Cette URL ne fonctionne que lorsque l'IDE de l'environnement est ouvert et que l'application est exécutée dans le même navigateur web.

Si vous essayez de consulter l'adresse IP de 127.0.0.1localhost, ou en 0.0.0.0 utilisant l'onglet d'aperçu de l'application dans l'IDE ou dans un onglet de navigateur Web distinct en dehors de l' AWS Cloud9 IDE, l'IDE tente par défaut d'accéder à votre ordinateur local, plutôt qu'à l'instance ou à votre propre serveur connecté à l'environnement.

Pour obtenir des instructions sur la manière de fournir à d'autres utilisateurs une prévisualisation de votre application en cours d'exécution en dehors de l'IDE, consultez Partage d'une application en cours d'exécution sur Internet.

Rechargement de la prévisualisation d'une application

Dans l'onglet de prévisualisation, choisissez le bouton Actualiser (la flèche circulaire).

Note

Cette commande ne redémarre pas le serveur. Elle actualiser simplement le contenu de l'onglet de prévisualisation de l'application.

Modification du type de prévisualisation d'une application

Dans l'onglet d'aperçu de l'application, choisissez l'une des options suivantes dans la liste des types d'aperçu :

  • Navigateur : affiche la prévisualisation de la sortie dans un format de navigateur web.

  • Contenu brut (UTF-8) : tente de prévisualiser la sortie au format Unicode Transformation Format 8 bits (UTF-8), le cas échéant.

  • Markdown : tente d'afficher l'aperçu de la sortie au format Markdown, le cas échéant.

Ouverture de la prévisualisation d'une application dans un onglet de navigateur web distinct

Dans l'onglet de prévisualisation d'application, choisissez Afficher dans une nouvelle fenêtre.

Note

L' AWS Cloud9 IDE doit également être exécuté dans au moins un autre onglet du même navigateur Web. Sinon, la prévisualisation de l'application ne s'affiche pas dans un onglet de navigateur web distinct.

L' AWS Cloud9 IDE doit également être exécuté dans au moins un autre onglet du même navigateur Web. Sinon, la prévisualisation de l'application ne s'affiche pas dans un onglet de navigateur web distinct. Si l'onglet de prévisualisation d'application affiche une erreur ou qu'il est vide, essayez de suivre les étapes de dépannage dans Remarque sur l'aperçu d'une application ou l'aperçu d'un fichier : « Cookies tiers désactivés ».

Basculement vers une autre URL de prévisualisation

Dans l'onglet de prévisualisation de l'application, saisissez le chemin d'une URL différente dans la barre d'adresse. La barre d'adresse se trouve entre le bouton Actualiser et la liste des types de prévisualisation.

Partage d'une application en cours d'exécution sur Internet

Après avoir prévisualisé votre application en cours d'exécution, vous pouvez la rendre accessible à 'autres utilisateurs sur le réseau Internet.

Pour ce faire, si une instance Amazon EC2 est connectée à votre environnement, procédez comme suit. Sinon, consultez la documentation du serveur.

Étape 1 : Obtenir l'ID et l'adresse IP de l'instance

Au cours de cette étape, vous notez les ID d'instance et l'adresse IP publique de l'instance Amazon EC2 connectée à l'environnement. Vous aurez besoin de l'ID d'instance dans une étape ultérieure pour autoriser les demandes d'application entrantes. Ensuite, vous donnez l'adresse IP publique à d'autres personnes pour qu'elles puissent accéder à l'application en cours d'exécution.

  1. Obtenez l'ID de l'instance Amazon EC2. Pour ce faire, procédez comme suit :

    • Dans une session de terminal dans l' AWS Cloud9 IDE pour l'environnement, exécutez la commande suivante pour obtenir l'ID de l'instance Amazon EC2.

      curl http://169.254.169.254/latest/meta-data/instance-id

      L'ID d'instance est au format suivant : i-12a3b456c789d0123. Notez l'ID de l'instance.

    • Dans l'IDE de l'environnement, dans la barre de menus, choisissez votre icône d'utilisateur, puis Gérer l'instance EC2.

      Choisir de gérer l'instance depuis l' AWS Cloud9 IDE

      Dans la console Amazon EC2 qui s'affiche, notez l'ID de l'instance qui s'affiche dans la colonne ID de l'instance. L'ID d'instance est au format suivant : i-12a3b456c789d0123.

  2. Obtenez l'adresse IP publique de l'instance Amazon EC2. Pour ce faire, procédez comme suit :

    • Dans l'IDE de l'environnement, choisissez Partager dans la barre de menus. Dans la boîte de dialogue Partager cet environnement), notez l'adresse IP publique dans la zone Application. Format de l'adresse IP publique : 192.0.2.0.

    • Dans une session de terminal de l'IDE de l'environnement, exécutez la commande suivante pour obtenir l'adresse IP publique de l'instance Amazon EC2.

      curl http://169.254.169.254/latest/meta-data/public-ipv4

      Format de l'adresse IP publique : 192.0.2.0. Notez cette adresse.

    • Dans l'IDE de l'environnement, dans la barre de menus, choisissez votre icône d'utilisateur, puis Gérer l'instance EC2. Dans la console Amazon EC2 qui s'affiche, sous l'onglet Description, notez l'adresse IP publique du champ Adresse IP publique IPv4. Format de l'adresse IP publique : 192.0.2.0.

    Note

    L'adresse IP publique de votre application peut changer chaque fois que l'instance de votre application redémarre. Pour éviter que votre adresse IP ne change, allouez une adresse IP Elastic. Attribuez ensuite cette adresse à l'instance en cours d'exécution. Pour obtenir des instructions, consultez les sections Allocation d'une adresse IP élastique et association d'une adresse IP élastique à une instance en cours d'exécution dans le guide de l'utilisateur Amazon EC2. L'attribution d'une adresse IP élastique peut Compte AWS entraîner des frais. Pour plus d’informations, consultez Tarification Amazon EC2.

Étape 2 : Configurer le groupe de sécurité de l'instance

Dans cette étape, vous utilisez la console Amazon EC2 pour configurer le groupe de sécurité Amazon EC2 de l'instance connectée à l'environnement. Configurez-le pour autoriser les requêtes HTTP entrantes via le port 8080, 8081 ou 8082.

Note

Vous n'êtes pas obligé d'utiliser HTTP sur le port 8080, 8081 ou 8082. Si vous ne le faites pas, vous ne pouvez pas afficher votre application en cours d'exécution depuis l'IDE. Pour plus d’informations, consultez Prévisualisation d'une application en cours d'exécution. Si vous exécutez sur un autre protocole ou port, remplacez-le pendant toute cette étape.

Pour une renforcer la sécurité, vous pouvez également définir une liste de contrôle d'accès réseau (ACL) pour un sous-réseau dans un VPC que l'instance peut utiliser. Pour plus d'informations sur les groupes de sécurité et les ACL réseau, consultez les rubriques suivantes :

  1. Dans l'IDE de l'environnement, dans la barre de menus, choisissez votre icône d'utilisateur, puis Gérer une instance EC2. Ensuite, passez directement à l'étape 3 de cette procédure.

  2. Si la sélection de Manage EC2 Instance (Gérer une instance EC2) ou d'autres étapes de cette procédure affiche des erreurs, connectez-vous à la console Amazon EC2 en utilisant les informations d'identification d'un administrateur de votre Compte AWS. Puis suivez les instructions suivantes. Si vous ne pouvez pas le faire, contactez l'administrateur de votre compte Compte AWS .

    1. Connectez-vous à l' AWS Management Console adresse https://console.aws.amazon.com/ si ce n'est pas déjà fait.

    2. Ouvrez la console Amazon EC2. Pour ce faire, choisissez Services dans la barre de navigation. Choisissez ensuite EC2.

    3. Dans la barre de navigation, choisissez l' Région AWS emplacement de votre environnement.

    4. Si le tableau de bord EC2 s'affiche, choisissez Instances en cours d'exécution. Dans le cas contraire, dans le panneau de navigation, développez Instances si nécessaire, puis choisissez Instances.

    5. Dans la liste des instances, sélectionnez l'instance où l'ID d'instance correspond à l'ID d'instance que vous avez noté plus tôt.

  3. Dans l'onglet Description de l'instance, choisissez le lien du groupe de sécurité en regard de Groupes de sécurité.

  4. Le groupe de sécurité étant affiché, examinez l'onglet Entrant. S'il existe déjà une règle dans laquelle Type est défini sur Règle TCP personnalisée et Plage de ports est défini sur 8080, 8081 ou 8082, choisissez Annuler et accédez directement à Étape 3 : Configurer le sous-réseau de l'instance. Autrement, choisissez Modifier.

  5. Dans la boîte de dialogue Modifier les règles entrantes, choisissez Ajouter une règle.

  6. Pour Type, choisissez Règle TCP personnalisée.

  7. Pour Plage de ports, entrez 8080, 8081 ou 8082.

  8. Pour Source, choisissez N'importe où.

    Note

    Le choix de N'importe où pour Source autorise les demandes entrantes de n'importe quelle adresse IP. Pour limiter cela à des adresses IP spécifiques, choisissez Personnalisé, puis entrez la plage d'adresses IP. Sinon, choisissez Mon IP pour limiter les requêtes à partir de votre adresse IP uniquement.

  9. Choisissez Enregistrer.

Étape 3 : Configurer le sous-réseau de l'instance

Utilisez les consoles Amazon EC2 et Amazon VPC afin de configurer un sous-réseau pour l'instance Amazon EC2 connectée à l'environnement. Ensuite, autorisez les requêtes HTTP entrantes via le port 8080, 8081 ou 8082.

Note

Vous n'avez pas besoin d'exécuter les instances en utilisant HTTP sur le port8080, 8081 ou 8082. Cependant, vous ne pourrez pas afficher votre application en cours d'exécution depuis l'IDE. Pour plus d’informations, consultez Prévisualisation d'une application en cours d'exécution. Si vous exécutez sur un autre protocole ou port, remplacez-le pendant toute cette étape.

Cette étape explique comment configurer une liste ACL réseau pour un sous-réseau dans un VPC Amazon que l'instance peut utiliser. Cette étape n'est pas obligatoire, mais elle est recommandée. La configuration d'une ACL réseau ajoute une couche de sécurité supplémentaire. Pour plus d'information sur les listes ACL réseau, consultez les informations suivantes :

  1. La console Amazon EC2 étant déjà ouverte depuis l'étape précédente, dans le volet de navigation du service, développez Instances si nécessaire, puis choisissez Instances.

  2. Dans la liste des instances, sélectionnez l'instance où l'ID d'instance correspond à l'ID d'instance que vous avez noté plus tôt.

  3. Dans l'onglet Description de l'instance, notez la valeur de l'ID de sous-réseau. L'ID est au format suivant : subnet-1fab8aEX.

  4. Ouvrez la console VPC Amazon. Pour ce faire, dans la barre AWS de navigation, choisissez Services, puis VPC.

    Pour cette étape, nous vous recommandons de vous connecter à la console Amazon VPC en utilisant les informations d'identification d'un administrateur de votre Compte AWS. Si vous ne pouvez pas le faire, contactez votre Compte AWS administrateur.

  5. Si le tableau de bord VPC s'affiche, choisissez Sous-réseaux. Dans le cas contraire, choisissez Sous-réseaux dans le panneau de navigation du service.

  6. Dans la liste des sous-réseaux, sélectionnez le sous-réseau où la valeur ID de sous-réseau correspond à celle que vous avez notée plus tôt.

  7. Sous l'onglet Résumé, cliquez sur le lien ACL réseau en regard de ACL réseau.

  8. Dans la liste des ACL réseau, sélectionnez l'ACL réseau. (Il n'existe qu'une seule ACL réseau.)

  9. Examinez l'onglet Règles de trafic entrant de la liste ACL réseau. S'il existe déjà une règle dans laquelle Type est défini sur HTTP* (8080), HTTP* (8081) ou HTTP* (8082), passez directement à Étape 4 : Partager l'URL de l'application en cours d'exécution. Autrement, choisissez Modifier.

  10. Choisissez Ajouter une autre règle.

  11. Pour Règle n°, entrez le numéro de la règle (par exemple, 200).

  12. Pour Type, choisissez Règle TCP personnalisée.

  13. Pour Plage de ports, saisissez 8080, 8081 ou 8082.

  14. Pour Source, saisissez la plage d'adresses IP pour autoriser les demandes entrantes. Par exemple, pour autoriser les demandes entrantes à partir de n'importe quelle adresse IP, saisissez 0.0.0.0/0.

  15. Avec Autoriser/Refuser défini sur ALLOW, choisissez Enregistrer.

Étape 4 : Partager l'URL de l'application en cours d'exécution

Une fois votre application exécutée, vous pouvez la partager avec d'autres personnes en fournissant l'URL de votre application. Pour cela, vous avez besoin de l'adresse IP publique que vous avez notée précédemment. Pour écrire l'URL complète de votre application, assurez-vous de démarrer l'adresse IP publique de votre application avec le protocole approprié. Ensuite, si le port de votre application n'est pas le port par défaut pour le protocole qu'elle utilise, ajoutez les informations relatives au numéro de port. Voici un exemple d'URL d'application : http://192.0.2.0:8080/index.html utilisant HTTP sur le port 8080.

Si l'onglet de navigateur web résultant affiche une erreur ou que l'onglet est vide, essayez de suivre les étapes de dépannage dans Impossible d'afficher votre application en cours d'exécution en dehors de l'IDE.

Note

L'adresse IP publique de votre application peut changer chaque fois que l'instance de votre application redémarre. Pour empêcher cette adresse IP de changer, une solution consiste à allouer une adresse IP Elastic, puis à attribuer cette adresse à l'instance en cours d'exécution. Pour obtenir des instructions, consultez les sections Allocation d'une adresse IP élastique et association d'une adresse IP élastique à une instance en cours d'exécution dans le guide de l'utilisateur Amazon EC2. L'attribution d'une adresse IP élastique peut Compte AWS entraîner des frais. Pour plus d’informations, consultez Tarification Amazon EC2.

Vous n'êtes pas obligé d'exécuter votre application à l'aide du protocole HTTP via le port 8080, 8081 ou 8082. Cependant, vous ne pourrez pas afficher votre application en cours d'exécution depuis l'IDE. Pour plus d’informations, consultez Prévisualisation d'une application en cours d'exécution.

Supposons, par exemple, que les requêtes proviennent d'un VPN qui bloque le trafic via le protocole ou le port demandé. Ces demandes d'accès à l'URL de votre application peuvent alors échouer. Ces utilisateurs doivent utiliser un réseau différent qui autorise le trafic sur le port et le protocole demandés. Pour plus d'informations, consultez votre administrateur réseau.

Nous déconseillons de partager l'URL dans l'onglet de prévisualisation de l'application de l'IDE avec d'autres utilisateurs. (Cette URL est au format suivant :https://12a34567b8cd9012345ef67abcd890e1.vfs.cloud9.us-east-2.amazonaws.com/. Dans ce format, 12a34567b8cd9012345ef67abcd890e1 il s'agit de l'ID AWS Cloud9 attribué à l'environnement. us-east-2est l'ID du Région AWS pour l'environnement.) Cette URL fonctionne uniquement lorsque l'IDE, de l'environnement est ouvert et que l'application s'exécute dans le même navigateur web.