Visualizando aplicativos em execução no Ambiente de Desenvolvimento AWS Cloud9 Integrado (IDE) - AWS Cloud9
Execute uma aplicaçãoVisualizar uma aplicação em execuçãoRecarregar uma visualização de aplicaçãoAlterar o tipo de visualização da aplicaçãoAbrir uma visualização de aplicação em uma guia do navegador da Web separadaAlternar para um URL de visualização diferenteCompartilhar uma aplicação em execução pela Internet

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 Ambiente de Desenvolvimento AWS Cloud9 Integrado (IDE)

Você pode usar o AWS Cloud9 IDE para visualizar uma aplicação em execução a partir do IDE.

Execute uma aplicação

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

  • 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, 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 é a ID que é AWS Cloud9 atribuída ao ambiente. us-east-2é a ID do 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 visitar o IP de 127.0.0.1localhost, ou 0.0.0.0 usando a guia de visualização do aplicativo no IDE ou em uma guia separada do navegador da Web fora do IDE, o 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 visualização da aplicação em execução fora do IDE, consulte Compartilhar uma aplicação em execução pela Internet.

Recarregar uma visualização de aplicação

Na guia de visualização do aplicativo, selecione o botão Refresh (Atualizar) (seta circular).

nota

Esse comando não reinicia o servidor. Ele apenas atualiza o conteúdo da guia de visualização da aplicação.

Alterar o tipo de visualização da aplicação

Na guia de visualização da aplicação, escolha um dos seguintes na lista de tipos de visualização:

  • Browser (Navegador): visualiza a saída no formato de um navegador da web.

  • Raw Content (UTF-8) (Conteúdo bruto (UTF-8)): tenta visualizar a saída no formato Unicode Transformation Format 8-bit (UTF-8), se aplicável.

  • Markdown: tenta visualizar a saída no formato Markdown, se aplicável.

Abrir uma visualização de aplicação em uma guia do navegador da Web separada

Na guia de visualização do aplicativo, selecione Pop Out Into New Window (Exibir em nova janela).

nota

O AWS Cloud9 IDE também deve estar sendo executado em pelo menos uma outra guia no mesmo navegador da web. Caso contrário, a visualização da aplicação não será exibida em uma guia separada do navegador da web.

O AWS Cloud9 IDE também deve estar sendo executado em pelo menos uma outra guia no mesmo navegador da web. Caso contrário, a visualização da aplicação não será exibida em uma guia separada do navegador da web. 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 Aviso de visualização de aplicação ou arquivo: "Cookies de terceiros desativados".

Alternar para um URL de visualização diferente

Na guia de visualização da aplicação, digite o caminho para um URL diferente na barra de endereços. A barra de endereços está localizada entre o botão Atualizar e a lista de tipos de visualização.

Compartilhar uma aplicação em execução pela Internet

Após visualizar o aplicativo em execução, você pode disponibilizá-lo para outras pessoas pela Internet.

Se uma instância do Amazon EC2 estiver conectada ao ambiente, siga estas etapas. Caso contrário, consulte a documentação do servidor.

Etapa 1: Obter o ID e o endereço IP da instância

Nesta etapa, anote o ID da instância e o endereço IP público para a instância do Amazon EC2 que estiver conectada ao ambiente. O ID da instância é necessário em uma etapa posterior para permitir solicitações de aplicativo de entrada. Depois, forneça o endereço IP público a outros usuários, para que possam acessar a aplicação em execução.

  1. Obter o ID da instância do Amazon EC2. Para isso, execute um dos seguintes procedimentos:

    • Em uma sessão de terminal no AWS Cloud9 IDE para o ambiente, execute o comando a seguir para obter o ID da instância do Amazon EC2.

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

      O ID da instância está no seguinte formato: i-12a3b456c789d0123. Anote esse ID da instância.

    • No IDE do ambiente, na barra de menus, selecione o ícone do seu usuário e, em seguida, escolha Manage EC2 Instance (Gerenciar a instância do EC2).

      Optando por gerenciar a instância a partir do AWS Cloud9 IDE

      No console do Amazon EC2 exibido, anote o ID da instância exibido na coluna Instance ID (ID da instância). O ID da instância está no formato: i-12a3b456c789d0123.

  2. Obtenha o endereço IP público da instância do &EC2;. Para isso, execute um dos seguintes procedimentos:

    • No IDE do ambiente, na barra de menus, selecione Share (Compartilhar). Na caixa de diálogo Share this environment (Compartilhar esse ambiente), anote o endereço IP público na caixa Application (Aplicativo). O endereço IP público está no seguinte formato: 192.0.2.0.

    • Em uma sessão de terminal no IDE para o ambiente, execute o seguinte comando para obter o endereço IP da instância do Amazon EC2.

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

      O endereço IP público está no seguinte formato: 192.0.2.0. Anote esse endereço IP público.

    • No IDE do ambiente, na barra de menus, selecione o ícone do seu usuário e, em seguida, escolha Manage EC2 Instance (Gerenciar a instância do EC2). No console do Amazon EC2 exibido, na guia Description (Descrição), anote o endereço IP público para o campo IPv4 Public IP (IP público IPv4). O endereço IP público está no seguinte formato: 192.0.2.0.

    nota

    O endereço IP público de sua aplicação poderá mudar sempre que a instância dela for reiniciada. Para evitar que o endereço IP seja alterado, aloque um endereço IP elástico. Depois, atribua esse endereço à instância em execução. Para obter instruções, consulte Como alocar um endereço IP elástico e associar um endereço IP elástico a uma instância em execução no Guia do usuário do Amazon EC2. A alocação de um endereço IP elástico pode fazer com que você incorra em Conta da AWS cobranças. Para obter mais informações, consulte Preço do Amazon EC2.

Etapa 2: Configurar o grupo de segurança para a instância

Nesta etapa, no console do Amazon EC2, configure o grupo de segurança do Amazon EC2 para a instância que estiver conectada ao ambiente. Configure-o para permitir o recebimento de solicitações HTTP pelas portas 8080, 8081 ou 8082.

nota

Você não precisa executá-la usando HTTP pela porta 8080, 8081 nem 8082. Se não fizer isso, não será possível visualizar a aplicação em execução no IDE. Para ter mais informações, consulte Visualizar uma aplicação em execução. Caso contrário, se estiver executando em outro protocolo ou porta, substitua-os durante essa etapa.

Para obter uma camada adicional de segurança, configure a lista de controle de acesso (ACL) à rede para uma sub-rede em uma VPC que possa ser usada pela instância. Para obter mais informações sobre security groups e Network ACLs, consulte o seguinte:

  1. No IDE do ambiente, na barra de menus, selecione o ícone do seu usuário e, em seguida, escolha Manage EC2 Instance (Gerenciar a instância do EC2). Em seguida, vá para a etapa 3 deste procedimento.

  2. Se a seleção de Manage EC2 Instance (Gerenciar instância do EC2) ou de outras etapas deste procedimento retornar erros, faça login no console do Amazon EC2 usando as credenciais de um administrador em sua Conta da AWS. Depois, siga estas instruções. Se isso não for possível, fale com o administrador de sua Conta da AWS .

    1. Faça login AWS Management Console em https://console.aws.amazon.com/ se você ainda não estiver conectado.

    2. Abra o console do Amazon EC2. Para fazer isso, na barra de navegação, selecione Services (Serviços). Depois, selecione EC2.

    3. Na barra de navegação, escolha Região da AWS onde seu ambiente está localizado.

    4. Se o EC2 Dashboard (Painel do EC2) for exibido, selecione Running Instances (Instâncias em execução). Caso contrário, no painel de navegação do serviço, expanda Instances (Instâncias) se ainda não estiver expandida e, depois, selecione Instances (Instâncias).

    5. Na lista de instâncias, selecione a opção com o Instance ID (ID da instância) correspondente ao anotado anteriormente.

  3. Na guia Description (Descrição) da instância, selecione o link do grupo de segurança ao lado de Security groups (Grupos de segurança).

  4. Com o grupo de segurança exibido, procure na guia Inbound (Entrada). Se já existir uma regra em que Type (Tipo) estiver definido como Custom TCP Rule (Regra personalizada de TCP), e Port Range (Intervalo de portas) estiver definido como 8080, 8081 ou 8082, selecione Cancel (Cancelar) e avance para Etapa 3: Configurar a sub-rede para a instância. Caso contrário, selecione Editar.

  5. Na caixa de diálogo Edit inbound rules (Editar regras de entrada), selecione Add Rule (Adicionar regra).

  6. Para Tipo, selecione Regra TCP personalizada.

  7. Em Port Range (Intervalo de portas), insira 8080, 8081 ou 8082.

  8. Para Source (Origem), selecione Anywhere (Qualquer lugar).

    nota

    Selecionar Anywhere (Qualquer lugar) em Source (Origem) permite solicitações de entrada de qualquer endereço IP. Para restringir isso a endereços IP específicos, selecione Custom (Personalizar) e, depois, insira o intervalo de endereços IP. Como alternativa, selecione My IP (Meu IP) para restringir as solicitações a somente de seu endereço IP.

  9. Escolha Salvar.

Etapa 3: Configurar a sub-rede para a instância

Use os consoles do Amazon EC2 e da Amazon VPC para configurar uma sub-rede para a instância do Amazon EC2 que esteja conectada ao ambiente. Depois, configure-a para permitir o recebimento de solicitações HTTP pelas portas 8080, 8081 ou 8082.

nota

Você não precisa executá-la usando HTTP pela porta 8080, 8081 nem 8082. No entanto, se você não fizer isso, não poderá visualizar a aplicação em execução no IDE. Para ter mais informações, consulte Visualizar uma aplicação em execução. Caso contrário, se estiver executando em outro protocolo ou porta, substitua-os durante essa etapa.

Essa etapa descreve como configurar uma ACL da rede para uma sub-rede em uma Amazon VPC que pode ser usada pela instância. Isso não é necessário, mas é recomendado. A configuração de uma rede ACL adiciona uma camada adicional de segurança. Para obter mais informações sobre Network ACLs, consulte o seguinte:

  • Security (Segurança) no Manual do usuário do Amazon VPC

  • ACLs da rede no Manual do usuário da Amazon VPC

  1. Com o console do Amazon EC2, no painel de navegação do serviço, expanda Instances (Instâncias) se ainda não estiver expandida e, depois, selecione Instances (Instâncias).

  2. Na lista de instâncias, selecione a opção com o Instance ID (ID da instância) correspondente ao anotado anteriormente.

  3. Na guia Description (Descrição) da instância, anote o valor de Subnet ID (ID da sub-rede). O ID da sub-rede está no seguinte formato: subnet-1fab8aEX.

  4. Abra o console da Amazon VPC. Para fazer isso, na barra de AWS navegação, escolha Serviços e, em seguida, escolha VPC.

    Para esta etapa, recomendamos que você faça login no console da Amazon VPC usando as credenciais de um administrador em sua Conta da AWS. Se você não conseguir fazer isso, verifique com seu Conta da AWS administrador.

  5. Se o VPC Dashboard (Painel do VPC) for exibido, selecione Subnets (Sub-redes). Caso contrário, no painel de navegação do serviço, selecione Subnets (Sub-redes).

  6. Na lista de sub-redes, selecione a sub-rede com o valor Subnet ID (ID da sub-rede) que corresponde ao anotado anteriormente.

  7. Na guia Summary (Resumo), selecione o link da Network ACL ao lado de Network ACL.

  8. Na lista de Network ACLs, selecione a Network ACL. (Existe apenas uma Network ACL.)

  9. Procure pela Network ACL na guia Inbound Rules (Regras de entrada). Se já existir uma regra em que Type (Tipo) está definido como HTTP* (8080), HTTP* (8081) ou HTTP* (8082), avance para Etapa 4: Compartilhar o URL de sua aplicação em execução. Caso contrário, selecione Editar.

  10. Escolha Add another rule.

  11. Em Rule # (Regra Nº), digite um número para a regra (por exemplo, 200).

  12. Para Tipo, selecione Regra TCP personalizada.

  13. Em Port Range (Intervalo de portas), digite 8080, 8081 ou 8082.

  14. Em Source (Origem), digite o intervalo de endereços IP para o qual deseja permitir solicitações de entrada. Por exemplo, para permitir solicitações de entrada de qualquer endereço IP, digite 0.0.0.0/0.

  15. Com Allow / Deny (Permitir / Negar) definido como ALLOW (PERMITIR), selecione Save (Salvar).

Etapa 4: Compartilhar o URL de sua aplicação em execução

Depois que sua aplicação estiver em execução, você poderá compartilhá-la com outras pessoas fornecendo o URL dela. Para isso, você precisa do endereço IP público que você anotou anteriormente. Para escrever o URL completo de sua aplicação, inicie o endereço IP público da aplicação com o protocolo correto. Depois, se a porta da aplicação não for a porta padrão para o protocolo utilizado, adicione as informações do número da porta. Este é um exemplo de URL de aplicação: http://192.0.2.0:8080/index.html usando HTTP pela porta 8080.

Se a guia do navegador da web resultante exibir um erro ou estiver em branco, siga as etapas de solução de problemas em Não é possível exibir a aplicação em execução fora do IDE.

nota

O endereço IP público de sua aplicação poderá mudar sempre que a instância dela for reiniciada. Para evitar que seu endereço IP mude, aloque um endereço IP elástico e, depois, atribua esse endereço à instância em execução. Para obter instruções, consulte Como alocar um endereço IP elástico e associar um endereço IP elástico a uma instância em execução no Guia do usuário do Amazon EC2. A alocação de um endereço IP elástico pode fazer com que você incorra em Conta da AWS cobranças. Para obter mais informações, consulte Preço do Amazon EC2.

Você não precisa executar sua aplicação usando HTTP sobre a porta 8080, 8081 ou 8082. No entanto, se você não fizer isso, não poderá visualizar a aplicação em execução no IDE. Para ter mais informações, consulte Visualizar uma aplicação em execução.

Suponha que, por exemplo, solicitações originadas de uma VPN bloqueiem o tráfego pela porta ou protocolo solicitado. Essas solicitações para acessar o URL de sua aplicação podem falhar. A solicitação deve ser realizada de outra rede que permita o tráfego sobre a porta e o protocolo solicitados. Para obter mais informações, consulte o administrador da rede.

Não recomendamos compartilhar o URL na guia de visualização de sua aplicação no IDE com outras pessoas. (Esse 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.) Esse URL funciona somente quando o IDE do ambiente estiver aberto e a aplicação estiver em execução no mesmo navegador da web.