Vorschau laufender Anwendungen in der IDE AWS Cloud9 - AWS Cloud9
Ausführen einer AnwendungVorschau einer laufenden Anwendung

AWS Cloud9 ist für Neukunden nicht mehr verfügbar. Bestandskunden von AWS Cloud9 können den Service weiterhin wie gewohnt nutzen. Weitere Informationen

Die vorliegende Übersetzung wurde maschinell erstellt. Im Falle eines Konflikts oder eines Widerspruchs zwischen dieser übersetzten Fassung und der englischen Fassung (einschließlich infolge von Verzögerungen bei der Übersetzung) ist die englische Fassung maßgeblich.

Vorschau laufender Anwendungen in der IDE AWS Cloud9

Sie können die AWS Cloud9 Integrierte Entwicklungsumgebung (IDE) verwenden, um eine laufende Anwendung in der IDE in der Vorschau anzuzeigen.

Ausführen einer Anwendung

Bevor Sie eine Vorschau Ihrer Anwendung in der IDE anzeigen können, muss Ihre Anwendung in der AWS Cloud9 Entwicklungsumgebung ausgeführt werden. Sie muss HTTP über die folgenden Ports verwenden:

  • 8080

  • 8081

  • 8082

Alle oben genannten Ports müssen die IP-Adresse von 127.0.0.1localhost, oder verwenden0.0.0.0.

Anmerkung

Sie müssen Ihre Anwendung nicht mit HTTP über Port 8080, 8081 oder 8082 mit der IP-Adresse 127.0.0.1, localhost oder 0.0.0.0 ausführen. Wenn Sie dies nicht tun, können Sie jedoch keine Vorschau Ihrer ausgeführten Anwendung in der IDE anzeigen.

Anmerkung

Die Vorschauanwendung wird innerhalb der IDE ausgeführt und in ein iframe-Element geladen. Einige Anwendungsserver blockieren möglicherweise standardmäßig Anfragen, die von Iframe-Elementen wie dem X-Frame-Options Header stammen. Wenn Ihre Vorschauanwendung nicht auf der Vorschau-Registerkarte angezeigt wird, stellen Sie sicher, dass Ihr Anwendungsserver die Anzeige des Inhalts in Iframes nicht verbietet.

Informationen zum Schreiben von Code für die Ausführung Ihrer Anwendung über einen bestimmten Port und eine bestimmte IP-Adresse finden Sie in der Dokumentation Ihrer Anwendung.

Informationen zum Ausführen Ihrer Anwendung finden Sie unter Ihren Code ausführen.

Um dieses Verhalten zu testen, fügen Sie den folgenden JavaScript Code zu einer Datei hinzu, die server.js im Stammverzeichnis Ihrer Umgebung benannt ist. Dieser Code führt einen Server mit einer Datei namens Node.js aus.

Anmerkung

Im folgenden Beispiel ist text/html der Content-Type des zurückgegebenen Inhalts. Geben Sie einen anderen Content-Type an, um den Inhalt in einem anderen Format zurückzugeben. Sie können beispielsweise text/css für ein CSS-Dateiformat angeben.

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'.

Im Stammverzeichnis Ihrer Umgebung können Sie einer Datei mit einem Namen wie beispielsweise server.py den folgenden Python-Code hinzufügen. Im folgenden Beispiel wird ein Server mit Python ausgeführt.

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()

Fügen Sie im Stammverzeichnis Ihrer Umgebung einer Datei mit dem Namen index.html den folgenden HTML-Code hinzu.

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

Um die HTML-Ausgabe dieser Datei auf der Registerkarte mit der Anwendungsvorschau zu sehen, führen Sie server.js mit Node.js oder server.py mit Python aus. Führen Sie anschließend die im nächsten Abschnitt beschriebenen Schritte aus, um eine Vorschau anzuzeigen. Fügen Sie auf der Registerkarte "Application preview" (Anwendungsvorschau) /index.html am Ende der URL hinzu und drücken Sie dann Enter.

Vorschau einer laufenden Anwendung

Bevor Sie eine Vorschau Ihrer Anwendung anzeigen, stellen Sie Folgendes sicher:

  • Ihre Anwendung wird mit dem HTTP-Protokoll über Port 8080, 8081 oder 8082 ausgeführt.

  • Die IP-Adresse Ihrer Anwendung in der Umgebung lautet 127.0.0.1, localhost oder 0.0.0.0.

  • Ihre Anwendungscodedatei ist in der AWS Cloud9 IDE geöffnet und aktiv.

Nachdem Sie alle diese Angaben bestätigt haben, wählen Sie in der Menüleiste eine der folgenden Optionen aus:

  • Preview, Preview Running Application (Vorschau, Vorschau für laufende Anwendung anzeigen)

  • Tools, Preview Running Application (Tools, Vorschau für laufende Anwendung anzeigen)

Beide Optionen öffnen in der Umgebung eine Registerkarte mit einer Anwendungsvorschau und zeigen dann die Ausgabe der Anwendung auf der Registerkarte an.

Anmerkung

Wenn die Anwendungsvorschau einen Fehler anzeigt oder leer ist, führen Sie die unter Registerkarte mit der Anwendungsvorschau zeigt einen Fehler oder ist leer beschriebenen Schritte zur Problembehandlung aus. Wenn Sie versuchen, eine Anwendung oder Datei in der Vorschau anzuzeigen, der folgende Hinweis angezeigt wird: „Die Vorschaufunktion ist deaktiviert, weil in Ihrem Browser Drittanbieter-Cookies deaktiviert sind“, folgen Sie den Schritten zur Fehlerbehebung unterHinweis zur Anwendungs- oder Dateivorschau: „Cookies von Drittanbietern deaktiviert“.

Anmerkung

Wenn die Anwendung nicht bereits ausgeführt wird, wird ein Fehler auf der Registerkarte mit der Anwendungsvorschau angezeigt. Führen Sie die Anwendung aus oder starten Sie sie neu und wählen Sie dann erneut den Befehl in der Menüleiste, um diesen Fehler zu beheben.

Nehmen wir zum Beispiel an, dass Ihre Anwendung auf keinem der IPs genannten Ports ausgeführt werden kann. Oder Ihre Anwendung muss über mehr als einen dieser Ports gleichzeitig ausgeführt werden. Beispielsweise muss Ihre Anwendung gleichzeitig über die Ports 8080 und 3000 ausgeführt werden. In diesem Fall zeigt die Registerkarte mit der Anwendungsvorschau möglicherweise einen Fehler an oder sie ist leer. Das liegt daran, dass die Registerkarte „Anwendungsvorschau“ in der Umgebung nur mit den vorherigen Ports und funktioniert IPs. Darüber hinaus funktioniert die Anwendung nur mit jeweils einem einzigen Port gleichzeitig.

Wir empfehlen nicht, die URL in der Anwendungsvorschau-Registerkarte an andere weiterzugeben. (Die URL hat das folgende Format:https://12a34567b8cd9012345ef67abcd890e1.vfs.cloud9.us-east-2.amazonaws.com/. In diesem Format 12a34567b8cd9012345ef67abcd890e1 ist dies die ID, die der Umgebung AWS Cloud9 zugewiesen wird. us-east-2ist die ID AWS-Region für die Umgebung.) Dieser URL funktioniert nur, wenn die IDE; für die Umgebung geöffnet ist und die Anwendung im gleichen Webbrowser ausgeführt wird.

Wenn Sie versuchen, die IP von 127.0.0.1localhost, oder 0.0.0.0 mithilfe der Registerkarte Anwendungsvorschau in der IDE oder in einer separaten Webbrowser-Registerkarte außerhalb der IDE aufzurufen, versucht die AWS Cloud9 IDE standardmäßig, zu Ihrem lokalen Computer zu gelangen, anstatt zu der Instanz oder Ihrem eigenen Server, der mit der Umgebung verbunden ist.

Eine Anleitung dazu, wie Sie anderen eine Vorschau Ihrer ausgeführten Anwendung außerhalb der IDE anzeigen können, finden Sie unter Freigabe einer laufenden Anwendung über das Internet.