

 AWS Cloud9 ist für Neukunden nicht mehr verfügbar. Bestehende Kunden von AWS Cloud9 können den Dienst weiterhin wie gewohnt nutzen. [Weitere Informationen](https://aws.amazon.com/blogs/devops/how-to-migrate-from-aws-cloud9-to-aws-ide-toolkits-or-aws-cloudshell/)

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
<a name="app-preview"></a>

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
<a name="app-preview-run-app"></a>

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.1``localhost`, oder verwenden`0.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](build-run-debug.md#build-run-debug-run).

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
<a name="app-preview-preview-app"></a>

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](troubleshooting.md#troubleshooting-app-preview) 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 unter[Hinweis zur Anwendungs- oder Dateivorschau: „Cookies von Drittanbietern deaktiviert“](troubleshooting.md#troubleshooting-preview).

**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-2`ist 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.1``localhost`, 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](app-preview-share.md).