Visualizzazione in anteprima delle applicazioni in esecuzione nell' AWS Cloud9 Integrated Development Environment (IDE) - AWS Cloud9
Esecuzione di un'applicazioneAnteprima di un'applicazione in esecuzioneRicaricare un'applicazione in esecuzioneModifica il tipo di anteprima dell'applicazioneApri un'anteprima dell'applicazione in una scheda del browser Web separata.Passare a un URL di anteprima diversoCondivisione di un'applicazione in esecuzione su Internet

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' AWS Cloud9 Integrated Development Environment (IDE)

È possibile utilizzare l' AWS Cloud9 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. Alcuni server di applicazioni potrebbero bloccare per impostazione predefinita le richieste provenienti da elementi iframe, come l'intestazione X-Frame-Options. 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 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 essere eseguita su nessuna delle porte o degli IP menzionati. 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. Ciò accade perché la scheda di anteprima dell'applicazione nell'ambiente funziona solo con le porte e gli IP precedenti. 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 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.) 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.

Ricaricare un'applicazione in esecuzione

Nella scheda di anteprima dell'applicazione, selezionare il pulsante Refresh (Aggiorna) (freccia circolare).

Nota

Questo comando non riavvia il server. Semplicemente aggiorna i contenuti di una scheda di anteprima dell'applicazione.

Modifica il tipo di anteprima dell'applicazione

Nella scheda di anteprima dell'applicazione, scegliete una delle seguenti opzioni dall'elenco dei tipi di anteprima:

  • Browser: l'anteprima viene visualizzata in un formato browser Web.

  • Raw Content (UTF-8) (Contenuto raw (UTF-8)): cerca di visualizzare l'anteprima dell'output in un formato Unicode Transformation Format 8-bit (UTF-8), se applicabile.

  • Markdown: cerca di visualizzare l'anteprima dell'output nel formato Markdown, se applicabile.

Apri un'anteprima dell'applicazione in una scheda del browser Web separata.

Nella scheda di anteprima dell'applicazione, selezionare Pop Out Into New Window (Mostra in una nuova finestra).

Nota

L' AWS Cloud9 IDE deve inoltre essere in esecuzione in almeno un'altra scheda dello stesso browser Web. In caso contrario, l'anteprima dell'applicazione non sarà visualizzata in una scheda separata del browser Web.

L' AWS Cloud9 IDE deve inoltre essere in esecuzione in almeno un'altra scheda dello stesso browser Web. In caso contrario, l'anteprima dell'applicazione non sarà visualizzata in una scheda separata del browser Web. Se la scheda di anteprima dell'applicazione visualizza un errore o è vuota, seguire le fasi di risoluzione dei problemi indicate in Avviso Anteprima applicazione o Anteprima file: "Third-party cookies disabled" ("cookie di terze parti disabilitati").

Passare a un URL di anteprima diverso

Nella scheda di anteprima dell'applicazione, digitare il percorso a un URL diverso nella barra degli indirizzi. La barra dell'indirizzo si trova fra il pulsante Refresh (Aggiorna) e l'elenco dei tipi di anteprima.

Condivisione di un'applicazione in esecuzione su Internet

Dopo l'anteprima delle tua applicazione in esecuzione, puoi renderla disponibili ad altri utenti su Internet.

Se un'istanza Amazon EC2 è connessa all'ambiente, seguire queste procedure. Altrimenti, consultare la documentazione del server.

Fase 1: ottenere l'ID e l'indirizzo IP dell'istanza

In questa fase, annotare l'ID dell'istanza e l'indirizzo IP pubblico per l'istanza Amazon EC2 connessa all'ambiente. Avrai bisogno dell'ID dell'istanza in un secondo momento per consentire le richieste in entrata delle applicazioni. Condividere quindi l'indirizzo IP pubblico con gli altri utenti in modo che possano accedere all'applicazione in esecuzione.

  1. Ottieni l'ID dell'istanza Amazon EC2. Per ottenere ciò, procedi in uno dei seguenti modi:

    • In una sessione terminale nell' AWS Cloud9 IDE per l'ambiente, esegui il comando seguente per ottenere l'ID dell'istanza Amazon EC2.

      curl http://169.254.169.254/latest/meta-data/instance-id

      L'ID dell'istanza è nel formato seguente: i-12a3b456c789d0123. Annota questo ID dell'istanza.

    • Nell'IDE per l'ambiente, nella barra dei menu, scegli l'icona dell'utente, quindi scegli Manage EC2 Instance (Gestisci istanza EC2).

      Scelta di gestire l'istanza dall'IDE AWS Cloud9

      Nella console Amazon EC2 visualizzata, annota l'ID dell'istanza visualizzato nella colonna Instance ID (ID istanza). L'ID dell'istanza è nel formato: i-12a3b456c789d0123.

  2. Ottieni l'indirizzo IP pubblico dell'istanza Amazon EC2. Per ottenere ciò, procedi in uno dei seguenti modi:

    • Nell'IDE per l'ambiente, nella barra dei menu, scegli Share (Condividi). Nella finestra di dialogo Share this environment (Condividi questo ambiente), annotare l'indirizzo IP pubblico nella casella Application (Applicazione). L'indirizzo IP pubblico è nel formato: 192.0.2.0.

    • In una sessione del terminale nell'IDE per l'ambiente, esegui il seguente comando per ottenere l'indirizzo IP pubblico dell'istanza Amazon EC2.

      curl http://169.254.169.254/latest/meta-data/public-ipv4

      L'indirizzo IP pubblico è nel formato: 192.0.2.0. Annota questo indirizzo IP pubblico.

    • Nell'IDE per l'ambiente, nella barra dei menu, scegli l'icona dell'utente, quindi scegli Manage EC2 Instance (Gestisci istanza EC2). Nella console Amazon EC2 visualizzata, nella scheda Description (Descrizione), annota l'indirizzo IP pubblico per il campo IPv4 Public IP (IP pubblico IPv4 ). L'indirizzo IP pubblico è nel formato: 192.0.2.0.

    Nota

    L'indirizzo IP pubblico dell'applicazione potrebbe cambiare ogni volta che viene riavviata l'istanza dell'applicazione. Per evitare che l'indirizzo IP sia modificato, allocare un indirizzo IP elastico. Quindi, assegnate quell'indirizzo all'istanza in esecuzione. Per istruzioni, consulta Allocazione di un indirizzo IP elastico e Associazione di un indirizzo IP elastico a un'istanza in esecuzione nella Guida per l'utente di Amazon EC2. L'allocazione di un indirizzo IP elastico potrebbe comportare Account AWS costi. Per ulteriori informazioni, consulta Prezzi di Amazon EC2.

Fase 2: configurare il gruppo di sicurezza per l'istanza

In questa fase, nella console Amazon EC2 configurare il gruppo di sicurezza Amazon EC2 per l'istanza connessa all'ambiente. Configurarlo per consentire le richieste HTTP in entrata tramite le porte 8080, 8081 o 8082.

Nota

Non è necessaria l'esecuzione mediante HTTP tramite la porta 8080, 8081 o 8082. Se non si effettua questa operazione, non sarà possibile visualizzare in anteprima l'applicazione in esecuzione nell'IDE. Per ulteriori informazioni, consulta Anteprima di un'applicazione in esecuzione. Altrimenti, se è in esecuzione su una porta o un protocollo diverso, effettuare la sostituzione in questa fase.

Per un ulteriore livello di sicurezza, configurare una lista di controllo degli accessi di rete (ACL) per una sottorete in un VPC che l'istanza può utilizzare. Per ulteriori informazioni sui gruppi di sicurezza e sulle liste di controllo degli accessi di rete, consulta quanto segue:

  1. Nell'IDE per l'ambiente, nella barra dei menu, scegli l'icona dell'utente, quindi scegli Manage EC2 Instance (Gestisci istanza EC2). Passare quindi alla fase 3 in questa procedura.

  2. Se scegliendo Manage EC2 Instance (Gestisci istanza EC2) o altre fasi in questa procedura vengono visualizzati degli errori, accedi alla console Amazon EC2 utilizzando le credenziali dell'amministratore nell' Account AWS. Seguire quindi le istruzioni riportate di seguito. Se non si è in grado di eseguire questa operazione, contattare l'amministratore dell' Account AWS .

    1. Accedi AWS Management Console all'indirizzo https://console.aws.amazon.com/ se non hai già effettuato l'accesso.

    2. Aprire la console Amazon EC2. Per eseguire questa operazione, scegliere Services (Servizi) nella barra di navigazione. Quindi selezionare EC2.

    3. Nella barra di navigazione, scegli Regione AWS dove si trova il tuo ambiente.

    4. Se EC2 Dashboard (Pannello di controllo EC2) è visualizzato, selezionare Running Instances (Istanze in esecuzione). Altrimenti, nel riquadro di navigazione del servizio, espandere Instances (Istanze), se non è già stato fatto, e selezionare Instances (Istanze).

    5. Nell'elenco delle istanze, selezionare l'istanza dove Instance ID (ID istanza) corrisponde all'ID dell'istanza annotato in precedenza.

  3. Nella scheda Description (Descrizione) dell'istanza, selezionare il collegamento del gruppo di sicurezza accanto a Security groups (Gruppi di sicurezza).

  4. Con il gruppo di sicurezza visualizzato, osservare la scheda Inbound (In entrata). Se esiste una regola per cui Type (Tipo) è impostato su Custom TCP Rule (Regola TCP personalizzata) e Port Range (Intervallo porte) è impostato su 8080, 8081 o 8082, scegliere Cancel (Annulla) e passare a Fase 3: aggiornare la sottorete per l'istanza. Altrimenti, selezionare Edit (Modifica).

  5. Nella finestra di dialogo Edit inbound rules (Modifica regole in entrata), selezionare Add Rule (Aggiungi regola).

  6. Per Type (Tipo) seleziona Custom TCP Rule (Regola TCP personalizzata).

  7. Alla voce Port Range (Intervallo porte), inserire 8080, 8081 o 8082.

  8. Per Source (Origine), selezionare Anywhere (Ovunque).

    Nota

    La scelta di Anywhere (Ovunque) per Source (Origine) consente le richieste in entrata da qualsiasi indirizzo IP. Per limitare questo numero a indirizzi IP specifici, scegliere Custom (Personalizza) e quindi inserire l'intervallo di indirizzi IP. In alternativa, scegliere My IP (Il mio IP) per limitare le richieste al solo indirizzo IP dell'utente.

  9. Selezionare Salva.

Fase 3: aggiornare la sottorete per l'istanza

Usare le console Amazon EC2 e Amazon VPC per configurare una sottorete per l'istanza Amazon EC2 connessa all'ambiente. Consentire quindi le richieste HTTP in entrata tramite le porte 8080, 8081 o 8082.

Nota

Non è necessario eseguire utilizzando HTTP tramite la porta 8080, 8081 o 8082. Tuttavia, se non si effettua questa operazione, non sarà possibile visualizzare in anteprima l'applicazione in esecuzione nell'IDE. Per ulteriori informazioni, consulta Anteprima di un'applicazione in esecuzione. Altrimenti, se è in esecuzione su una porta o un protocollo diverso, effettuare la sostituzione in questa fase.

Questa fase descrive come configurare una lista di controllo degli accessi di rete per una sottorete in un Amazon VPC che l'istanza può utilizzare. Questa operazione non è obbligatoria, ma è consigliata. La configurazione di una ACL di rete aggiunge un ulteriore livello di sicurezza. Per ulteriori informazioni sulle liste di controllo degli accessi di rete, consulta quanto segue:

  1. Nella console Amazon EC2, nel riquadro di navigazione del servizio, espandere Instances (Istanze), se non è già stato fatto, e selezionare Instances (Istanze).

  2. Nell'elenco delle istanze, selezionare l'istanza dove Instance ID (ID istanza) corrisponde all'ID dell'istanza annotato in precedenza.

  3. Nella scheda Description (Descrizione) per l'istanza, annotare il valore di Subnet ID (ID sottorete). L'ID di sottorete è nel formato seguente: subnet-1fab8aEX.

  4. Apri la console Amazon VPC. Per fare ciò, nella barra AWS di navigazione, scegli Servizi, quindi scegli VPC.

    Per questa fase, consigliamo di accedere alla console Amazon VPC utilizzando le credenziali dell'amministratore nell' Account AWS. Se non riesci a farlo, contatta il tuo Account AWS amministratore.

  5. Se VPC Dashboard (Pannello di controllo VPC) è visualizzato, selezionare Subnets (Sottoreti). Altrimenti, selezionare Subnets (Sottoreti) nel riquadro di navigazione del servizio.

  6. Nell'elenco delle sottoreti, selezionare la sottorete dove il valore Subnet ID (ID sottorete) corrisponde a quello annotato in precedenza.

  7. Nella scheda Summary (Riepilogo), selezionare il collegamento della ACL di rete accanto a Network ACL (ACL di rete).

  8. Nell'elenco delle liste di controllo degli accessi di rete, seleziona la lista di controllo degli accessi di rete. (C'è solo una lista di controllo degli accessi di rete.)

  9. Osservare la scheda Inbound Rules (Regole in entrata) per la lista di controllo degli accessi di rete. Se esiste già una regola in cui Type (Tipo) è impostato su HTTP* (8080), HTTP* (8081) o HTTP* (8082), passa a Fase 4: condivisione dell'URL dell'applicazione in esecuzione. Altrimenti, selezionare Edit (Modifica).

  10. Selezionare Add another rule (Aggiungi un'altra regola).

  11. Per Rule # (N. di regola), inserire un numero per la regola (ad esempio 200).

  12. Per Type (Tipo) seleziona Custom TCP Rule (Regola TCP personalizzata).

  13. Per Port Range (Intervallo porte), digitare 8080, 8081 o 8082.

  14. Per Source (Origine), digitare l'intervallo degli indirizzi IP da cui consentire le richieste in entrata. Ad esempio, per consentire le richieste in entrata da qualsiasi indirizzo IP, inserire 0.0.0.0/0.

  15. Con Allow / Deny (Permetti/Nega) impostato su ALLOW (PERMETTI), selezionare Save (Salva).

Fase 4: condivisione dell'URL dell'applicazione in esecuzione

Dopo l'esecuzione dell'applicazione, è possibile condividerla con altri utenti fornendo l'URL dell'applicazione. Per questo, è necessario l'indirizzo IP pubblico annotato in precedenza. Per scrivere l'URL completo dell'applicazione, assicurarsi di avviare l'indirizzo IP pubblico dell'applicazione con il protocollo corretto. Quindi, se la porta dell'applicazione non è la porta predefinita per il protocollo utilizzato, aggiungere le informazioni sul numero di porta. Di seguito è riportato un esempio di URL dell'applicazione: http://192.0.2.0:8080/index.htmlmediante HTTP sulla porta 8080.

Se la scheda risultante del browser Web visualizza un errore o è vuota, seguire le fasi di risoluzione dei problemi indicate in Impossibile visualizzare l'applicazione in esecuzione al di fuori dell'IDE.

Nota

L'indirizzo IP pubblico dell'applicazione potrebbe cambiare ogni volta che viene riavviata l'istanza dell'applicazione. Per impedire che questo indirizzo IP si modifichi, allocare un indirizzo IP elastico e assegnare quell'indirizzo all'istanza in esecuzione. Per istruzioni, consulta Allocazione di un indirizzo IP elastico e Associazione di un indirizzo IP elastico a un'istanza in esecuzione nella Guida per l'utente di Amazon EC2. L'allocazione di un indirizzo IP elastico potrebbe comportare Account AWS costi. Per ulteriori informazioni, consulta Prezzi di Amazon EC2.

Non è necessario eseguire l'applicazione utilizzando HTTP tramite la porta 8080, 8081 o 8082. Tuttavia, se non si effettua questa operazione, non sarà possibile visualizzare in anteprima l'applicazione in esecuzione nell'IDE. Per ulteriori informazioni, consulta Anteprima di un'applicazione in esecuzione.

Supponiamo, ad esempio, che le richieste provengano da una VPN che blocca il traffico sul protocollo o sulla porta richiesti. Pertanto, queste richieste di accesso all'URL dell'applicazione potrebbero non riuscire. Le richieste devono essere effettuate da una rete diversa che consenta il traffico tramite il protocollo e la porta richiesti. Per ulteriori informazioni, consultare l'amministratore di rete.

Consigliamo di non condividere con altri utenti l'URL nella scheda di anteprima dell'applicazione nell'IDE. (Questo URL ha il 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 di Regione AWS per l'ambiente.) Questo URL funziona solo quando l'IDE dell'ambiente è aperto e l'applicazione è in esecuzione nello stesso browser Web.