Prévisualisation des applications en cours d'exécution dans l'IDE AWS Cloud9 - AWS Cloud9
Exécution d'une applicationPrévisualisation d'une application en cours d'exécution

AWS Cloud9 n'est plus disponible pour les nouveaux clients. Les clients existants de AWS Cloud9 peuvent continuer à utiliser le service normalement. En savoir plus

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'IDE AWS Cloud9

Vous pouvez utiliser l'environnement de développement AWS Cloud9 intégré (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 par défaut bloquer les demandes provenant d'éléments iframe, tels que l' X-Frame-Optionsen-tête. 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 IPs 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. Cela est dû au fait que l'onglet d'aperçu de l'application dans l'environnement ne fonctionne qu'avec les ports précédents et IPs. 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.