Visualizzazione in anteprima delle applicazioni in esecuzione in AWS Cloud9 IDE - AWS Cloud9
Esecuzione di un'applicazioneAnteprima di un'applicazione in esecuzione

AWS Cloud9 non è più disponibile per i nuovi clienti. I clienti esistenti di AWS Cloud9 possono continuare a utilizzare il servizio normalmente. Ulteriori informazioni

Le traduzioni sono generate tramite traduzione automatica. In caso di conflitto tra il contenuto di una traduzione e la versione originale in Inglese, quest'ultima prevarrà.

Visualizzazione in anteprima delle applicazioni in esecuzione in AWS Cloud9 IDE

È possibile utilizzare AWS Cloud9 Integrated Development Environment (IDE) per visualizzare in anteprima un'applicazione in esecuzione dall'interno diIDE.

Esecuzione di un'applicazione

Prima di poter visualizzare l'anteprima dell'applicazione dall'interno diIDE, è necessario che l'applicazione sia in esecuzione nell'ambiente di AWS Cloud9 sviluppo. Deve essere utilizzata HTTP sulle seguenti porte:

  • 8080

  • 8081

  • 8082

Tutte le porte precedenti devono utilizzare l'indirizzo IP di 127.0.0.1localhost, o0.0.0.0.

Nota

Non è necessario eseguire l'applicazione utilizzando HTTP over port 8080 o 8082 con l'indirizzo IP di 127.0.0.1localhost, o0.0.0.0. 8081 Tuttavia, se non lo fai, non puoi visualizzare l'anteprima dell'applicazione in esecuzione dall'interno diIDE.

Nota

L'applicazione di anteprima viene eseguita all'interno di IDE e caricata all'interno di un elemento iframe. Per impostazione predefinita, alcuni server di applicazioni potrebbero bloccare le richieste provenienti da elementi iframe, come l' X-Frame-Optionsintestazione. Se l'applicazione di anteprima non viene visualizzata nella scheda di anteprima, assicurarsi che il server delle applicazioni non proibisca la visualizzazione del contenuto negli iframe.

Per scrivere il codice per l'esecuzione dell'applicazione su una porta e un indirizzo IP specifici, consulta la documentazione dell'applicazione.

Per eseguire la tua applicazione, consulta Eseguire il codice.

Per testare questo comportamento, aggiungete il JavaScript codice seguente a un file denominato server.js nella radice del vostro ambiente. Questo codice esegue un server utilizzando un file denominato Node.js.

Nota

Nell'esempio seguente text/html è il Content-Type del contenuto restituito. Per restituire il contenuto in un formato diverso, specificarne un Content-Type diverso. Ad esempio, puoi specificare text/css un formato di CSS file.

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

Nel root dell'ambiente è possibile aggiungere il seguente codice Python in un file con un nome come server.py. Nell'esempio seguente, viene eseguito un server mediante 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()

Nella radice del tuo ambiente, aggiungi il HTML codice seguente a un file denominatoindex.html.

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

Per vedere l'HTMLoutput di questo file nella scheda di anteprima dell'applicazione, esegui server.js con Node.js o server.py file con Python. Seguire quindi la procedura descritta nella sezione successiva per visualizzate l'anteprima. Nella scheda di anteprima dell'applicazione, aggiungete /index.html alla fine diURL, quindi Enter premete.

Anteprima di un'applicazione in esecuzione

Prima di visualizzare in anteprima le applicazioni, confermare quanto segue:

  • L'applicazione viene eseguita utilizzando il HTTP protocollo tramite porta 80808081, o8082.

  • L'indirizzo IP dell'applicazione nell'ambiente è 127.0.0.1, localhost o 0.0.0.0.

  • Il file di codice dell'applicazione è aperto e attivo in AWS Cloud9 IDE.

Dopo aver confermato tutti questi dettagli, scegliete una delle seguenti opzioni dalla barra dei menu:

  • Preview, Preview Running Application (Anteprima, anteprima applicazione in esecuzione)

  • Tools, Preview, Preview Running Application (Strumenti, anteprima, anteprima applicazione in esecuzione)

Una di queste opzioni apre una scheda di anteprima dell'applicazione nell'ambiente e nella scheda viene visualizzato l'output dell'applicazione.

Nota

Se la scheda di anteprima dell'applicazione visualizza un errore o è vuota, seguire le fasi di risoluzione dei problemi indicate in La scheda di anteprima dell'applicazione visualizza un errore o è vuota. Se quando tenti di visualizzare in anteprima un'applicazione o un file, ricevi il seguente avviso «La funzionalità di anteprima è disabilitata perché il tuo browser ha disabilitato i cookie di terze parti», segui la procedura di risoluzione dei problemi riportata inAvviso Anteprima applicazione o Anteprima file: "Third-party cookies disabled" ("cookie di terze parti disabilitati").

Nota

Se l'applicazione non è già in esecuzione, viene visualizzato un errore nella scheda di anteprima dell'applicazione. Per risolvere il problema, eseguire o riavviare l'applicazione e selezionare di nuovo il comando della barra dei menu.

Supponiamo, ad esempio, che l'applicazione non possa funzionare su nessuna delle porte IPs menzionate. Oppure, l'applicazione deve essere eseguita su più di una di queste porte contemporaneamente. Ad esempio, l'applicazione deve essere eseguita sulle porte 8080 e 3000 contemporaneamente. In tal caso, la scheda di anteprima dell'applicazione potrebbe visualizzare un errore o essere vuota. Questo perché la scheda di anteprima dell'applicazione all'interno dell'ambiente funziona solo con le porte precedenti e. IPs Inoltre, l'applicazione funziona con una sola porta alla volta.

Non è consigliabile condividerla con altri URL nella scheda di anteprima dell'applicazione. (URLÈ nel seguente formato:https://12a34567b8cd9012345ef67abcd890e1.vfs.cloud9.us-east-2.amazonaws.com/. In questo formato, 12a34567b8cd9012345ef67abcd890e1 è l'ID AWS Cloud9 assegnato all'ambiente. us-east-2è l'ID Regione AWS per l'ambiente.) URLFunziona solo quando l'ambiente IDE for the è aperto e l'applicazione è in esecuzione nello stesso browser Web.

Se si tenta di visitare l'IP di 127.0.0.1 o 0.0.0.0 utilizzando la scheda di anteprima dell'applicazione nella IDE o in una scheda distinta del browser Web esterna aIDE, l' AWS Cloud9 IDEimpostazione predefinita tenta di accedere al computer locale anziché all'istanza o al server personale connesso all'ambiente. localhost

Per istruzioni su come fornire ad altri un'anteprima dell'applicazione in esecuzione al di fuori diIDE, consultaCondivisione di un'applicazione in esecuzione su Internet.