Visualizzazione in anteprima delle applicazioni in esecuzione nell'IDE AWS Cloud9 - 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 nell'IDE AWS Cloud9

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

Esecuzione di un'applicazione

Prima di poter visualizzare l'anteprima dell'applicazione dall'IDE, è necessario che l'applicazione sia in esecuzione nell'ambiente di AWS Cloud9 sviluppo. Deve utilizzare 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 sulla porta 8080, 8081 o 8082 con l'indirizzo IP 127.0.0.1, localhost o 0.0.0.0. Tuttavia, se non si effettua questa operazione, non sarà possibile visualizzare in anteprima l'applicazione in esecuzione nell'IDE.

Nota

L'applicazione in anteprima viene eseguita all'interno dell'IDE e viene 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, è possibile specificare text/css per un formato di file 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'.

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

Nel root dell'ambiente, aggiungere il seguente codice HTML in un file denominato index.html.

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

Per visualizzare l'output HTML di questo file nella scheda di anteprima dell'applicazione, eseguire server.js con Node.js o il file server.py con Python. Seguire quindi la procedura descritta nella sezione successiva per visualizzate l'anteprima. Nella scheda di anteprima dell'applicazione, aggiungi /index.html alla fine dell'URL e premi Enter.

Anteprima di un'applicazione in esecuzione

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

  • L'applicazione viene eseguita utilizzando il protocollo HTTP sulla porta 8080, 8081 o 8082.

  • 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 nell' 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 di seguitoAvviso 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 essere eseguita 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.

Consigliamo di non condividere l'URL nella scheda di anteprima dell'applicazione con altri. (L'URL è nel formato seguente: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.) Questo URL funziona solo quando l'IDE dell'ambiente è 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 nell'IDE o in una scheda del browser Web separata all'esterno dell' AWS Cloud9 IDE, l'IDE per impostazione 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 utenti un'anteprima dell'applicazione in esecuzione al di fuori dell'IDE, consulta Condivisione di un'applicazione in esecuzione su Internet.