Visualizando aplicativos em execução no AWS Cloud9 IDE - AWS Cloud9
Execute uma aplicaçãoVisualizar uma aplicação em execuçã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

As traduções são geradas por tradução automática. Em caso de conflito entre o conteúdo da tradução e da versão original em inglês, a versão em inglês prevalecerá.

Visualizando aplicativos em execução no AWS Cloud9 IDE

Você pode usar o AWS Cloud9 Integrated Development Environment (IDE) para visualizar um aplicativo em execução a partir doIDE.

Execute uma aplicação

Antes que você possa visualizar seu aplicativo de dentro doIDE, seu aplicativo deve estar em execução no ambiente de AWS Cloud9 desenvolvimento. Ele deve ser usado 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

Você não precisa executar seu aplicativo usando HTTP over port8080,8081, ou 8082 com o endereço IP de127.0.0.1,localhost, ou0.0.0.0. No entanto, se você não fizer isso, não poderá visualizar seu aplicativo em execução de dentro doIDE.

nota

O aplicativo de visualização é executado dentro do IDE e carregado dentro de um elemento iframe. Alguns servidores de aplicativos podem, por padrão, bloquear solicitações provenientes de elementos iframe, como o X-Frame-Options cabeçalho. 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 JavaScript código a seguir a um arquivo nomeado server.js na raiz do seu 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, você pode especificar text/css um formato de CSS arquivo.

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

Na raiz do seu ambiente, adicione o HTML código a seguir a um arquivo chamadoindex.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 HTML saída desse arquivo na guia de visualização do aplicativo, execute server.js com Node.js ou server.py arquivo 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 eURL, em seguida, pressioneEnter.

Visualizar uma aplicação em execução

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

  • Seu aplicativo é executado usando o HTTP protocolo sobre a porta8080,8081, ou8082.

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

  • O arquivo de código do aplicativo está aberto e ativo no AWS Cloud9 IDE.

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, seu aplicativo não possa ser executado em nenhuma das portas IPs mencionadas. 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 do aplicativo no ambiente funciona somente com as portas anteriores e. IPs Além disso, a aplicação funciona com apenas uma única porta por vez.

Não recomendamos compartilhar a guia URL 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 é a ID que é AWS Cloud9 atribuída ao ambiente. us-east-2é a ID do Região da AWS para o ambiente.) Isso URL funciona somente quando o IDE for the environment está aberto e o aplicativo está sendo executado no mesmo navegador da web.

Se você tentar visitar o IP de127.0.0.1,localhost, ou 0.0.0.0 usando a guia de visualização do aplicativo na IDE ou em uma guia separada do navegador da Web fora doIDE, AWS Cloud9 IDE por padrão, tentará acessar seu computador local, em vez da instância ou do seu próprio servidor conectado ao ambiente.

Para obter instruções sobre como fornecer a outras pessoas uma prévia do seu aplicativo em execução fora doIDE, consulteCompartilhar uma aplicação em execução pela Internet.