Demonstração das aplicações em execução no IDE AWS Cloud9 - AWS Cloud9
Execute uma aplicaçãoVisualizar uma aplicação em execução

O AWS Cloud9 não está mais disponível para novos clientes. Os clientes atuais do AWS Cloud9 podem continuar usando o serviço normalmente. Saiba mais

Demonstração das aplicações em execução no IDE AWS Cloud9

Use o ambiente de desenvolvimento integrado (IDE) AWS Cloud9 para visualizar uma aplicação em execução no IDE.

Execute uma aplicação

Para que você possa visualizar sua aplicação no IDE, ela deve estar em execução no ambiente de desenvolvimento AWS Cloud9. Ele deve usar HTTP nas seguintes portas:

  • 8080

  • 8081

  • 8082

Todas as portas acima devem usar o endereço IP de 127.0.0.1 localhost, ou0.0.0.0.

nota

Não é necessário executar a aplicação usando HTTP sobre a porta 8080, 8081 nem 8082 com o endereço IP 127.0.0.1, localhost nem 0.0.0.0. No entanto, se você não fizer isso, não poderá visualizar a aplicação em execução no IDE.

nota

A aplicação de visualização é executada no IDE e carregada em um elemento iframe. Alguns servidores de aplicações podem, por padrão, bloquear solicitações provenientes de elementos iframe, como o cabeçalho X-Frame-Options. Se a aplicação de visualização não for exibida na guia de visualização, garanta que o servidor de aplicações não proíba a exibição do conteúdo em iframes.

Para escrever o código a fim de executar sua aplicação em uma porta e endereço IP específicos, consulte a documentação da aplicação.

Para executar o aplicativo, consulte Executar o código.

Para testar esse comportamento, adicione o código JavaScript a seguir a um arquivo denominado server.js na raiz do ambiente. Esse código executa um servidor usando um arquivo chamado Node.js.

nota

No exemplo a seguir, text/html é o Content-Type do conteúdo retornado. Para retornar o conteúdo em um formato diferente, especifique umContent-Type. Por exemplo, é possível especificar text/css para um formato de arquivo 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'.

Na raiz do ambiente, é possível adicionar o código Python a seguir a um arquivo denominado server.py. No exemplo a seguir, um servidor é executado usando 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()

Depois, adicione o código HTML a seguir a um arquivo denominado index.html.

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

Para ver a saída HTML desse arquivo na guia de visualização da aplicação, execute server.js com Node.js ou o arquivo server.py com Python. Depois, siga as etapas da próxima seção para visualizá-lo. Na guia de visualização do aplicativo, adicione /index.html ao final do URL e, em seguida, pressione Enter.

Visualizar uma aplicação em execução

Antes de visualizar sua aplicação, considere o seguinte:

  • Sua aplicação é executada usando o protocolo HTTP sobre a porta 8080, 8081 ou 8082.

  • O endereço IP de sua aplicação no ambiente é 127.0.0.1, localhost ou 0.0.0.0.

  • Seu arquivo de código da aplicação está aberto e ativo no IDE AWS Cloud9.

Depois de confirmar todos esses detalhes, selecione uma das seguintes opções na barra de menus:

  • Visualizar, Visualizar a aplicação em execução

  • Tools, Preview, Preview Running Application (Ferramentas, Visualizar, Visualizar o aplicativo em execução)

Uma dessas opções abre uma guia de visualização da aplicação no ambiente e, depois, o resultado da aplicação é exibido na guia.

nota

Se a guia de visualização da aplicação exibir um erro ou estiver em branco, tente seguir as etapas de solução de problemas em A guia de visualização da aplicação exibe um erro ou está em branco. Se, ao tentar visualizar uma aplicação ou um arquivo, você receber o seguinte aviso “A funcionalidade de visualização está desabilitada porque seu navegador tem cookies de terceiros desabilitados”, siga as etapas de solução de problemas em Aviso de visualização de aplicação ou arquivo: "Cookies de terceiros desativados".

nota

Se a aplicação ainda não estiver em execução, será exibido um erro na guia de visualização da aplicação. Para resolver esse problema, execute ou reinicie a aplicação e, depois, selecione o comando da barra de menus novamente.

Suponha que, por exemplo, sua aplicação não possa ser executada em nenhuma das portas ou IPs mencionados. Ou sua aplicação deva ser executada em mais de uma dessas portas ao mesmo tempo. Por exemplo, sua aplicação deve ser executada nas portas 8080 e 3000ao mesmo tempo. Se for esse o caso, a guia de visualização da aplicação pode exibir um erro ou estar em branco. Isso ocorre porque a guia de visualização da aplicação no ambiente funciona somente com as portas e IPs anteriores. Além disso, a aplicação funciona com apenas uma única porta por vez.

Não recomendamos compartilhar o URL na guia de visualização do aplicativo com outras pessoas. (O URL está no seguinte formato: https://12a34567b8cd9012345ef67abcd890e1.vfs.cloud9.us-east-2.amazonaws.com/. Nesse formato, 12a34567b8cd9012345ef67abcd890e1 é o ID que o AWS Cloud9 atribui ao ambiente. us-east-2 é o ID da Região da AWS para o ambiente.) Esse URL funciona somente quando o IDE do ambiente estiver aberto e a aplicação estiver em execução no mesmo navegador da web.

Se você tentar acessar o IP 127.0.0.1, localhost ou 0.0.0.0 usando a guia de visualização da aplicação no IDE ou em uma guia separada do navegador da web fora do IDE, por padrão, o IDE do AWS Cloud9 tentará acessar seu computador local, em vez de tentar acessar a instância ou seu próprio servidor que estiver conectado ao ambiente.

Para obter instruções sobre como fornecer a outras pessoas uma visualização da aplicação em execução fora do IDE, consulte Compartilhar uma aplicação em execução pela Internet.