Hello Home Page

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](https://aws.amazon.com/blogs/devops/how-to-migrate-from-aws-cloud9-to-aws-ide-toolkits-or-aws-cloudshell/) 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 IDE AWS Cloud9 Você pode usar o Ambiente de Desenvolvimento AWS Cloud9 Integrado (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`, ou`0.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 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](build-run-debug.md#build-run-debug-run). 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 um`Content-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`. ``` Hello Home Page

Hello, World!

``` 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](troubleshooting.md#troubleshooting-app-preview). 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"](troubleshooting.md#troubleshooting-preview). **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 `3000`ao 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 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.1``localhost`, 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](app-preview-share.md). # Recarregar uma visualização de aplicação Para recarregar uma demonstração da aplicação, escolha a seguinte opçã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 Para alterar o tipo de demonstração de aplicação, escolha a seguinte opçã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 Para abrir uma demonstração de aplicação em uma guia do navegador da web separada, escolha a seguinte opção: 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"](troubleshooting.md#troubleshooting-preview). # Alternar para um URL de visualização diferente Para alternar para um URL de demonstração diferente, escolha a seguinte opção: 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. **Topics** + [Etapa 1: Obter o ID e o endereço IP da instância](#app-preview-share-get-metadata) + [Etapa 2: Configurar o grupo de segurança para a instância](#app-preview-share-security-group) + [Etapa 3: Configurar a sub-rede para a instância](#app-preview-share-subnet) + [Etapa 4: Compartilhar o URL de sua aplicação em execução](#app-preview-share-url) ## 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\]](http://docs.aws.amazon.com/pt_br/cloud9/latest/user-guide/images/console-manage-instance.png) 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`. 1. 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 **Descrição**, anote o endereço IP público para o campo **IP IPv4 público**. 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 [Allocating an Elastic IP Address](https://docs.aws.amazon.com/AWSEC2/latest/UserGuide/elastic-ip-addresses-eip.html#using-instance-addressing-eips-allocating) e [Associating an Elastic IP Address with a Running Instance](https://docs.aws.amazon.com/AWSEC2/latest/UserGuide/elastic-ip-addresses-eip.html#using-instance-addressing-eips-associating) no *Manual 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](https://aws.amazon.com/ec2/pricing/). ## 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 obter mais informações, consulte [Visualizar uma aplicação em execução](app-preview.md#app-preview-preview-app). 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 grupos de segurança e rede ACLs, consulte o seguinte: [Etapa 3: Configurar a sub-rede para a instância](#app-preview-share-subnet) [Security](https://docs.aws.amazon.com/vpc/latest/userguide/VPC_Security.html) (Segurança) no *Manual do usuário do Amazon VPC* [Grupos de segurança da VPC](https://docs.aws.amazon.com/vpc/latest/userguide/vpc-security-groups.html) no *Guia do usuário da Amazon VPC* [Rede ACLs](https://docs.aws.amazon.com/vpc/latest/userguide/what-is-amazon-vpc.html) no Guia do *usuário da Amazon VPC* 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. 1. 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 Console de gerenciamento da AWS no [https://console---aws.amazon.com.rproxy.govskope.caat/se](https://console.aws.amazon.com/) você ainda não estiver conectado. 1. Abra o console do Amazon EC2. Para fazer isso, na barra de navegação, selecione **Services** (Serviços). Depois, selecione **EC2**. 1. Na barra de navegação, escolha Região da AWS onde seu ambiente está localizado. 1. 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). 1. Na lista de instâncias, selecione a opção com o **Instance ID** (ID da instância) correspondente ao anotado anteriormente. 1. 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). 1. 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](#app-preview-share-subnet). Caso contrário, selecione **Editar**. 1. Na caixa de diálogo **Edit inbound rules (Editar regras de entrada)**, selecione **Add Rule (Adicionar regra)**. 1. Para **Tipo**, selecione **Regra TCP personalizada**. 1. Em **Port Range** (Intervalo de portas), insira `8080`, `8081` ou `8082`. 1. 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. 1. 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 obter mais informações, consulte [Visualizar uma aplicação em execução](app-preview.md#app-preview-preview-app). 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 rede ACLs, consulte o seguinte: [Security](https://docs.aws.amazon.com/vpc/latest/userguide/VPC_Security.html) (Segurança) no *Manual do usuário do Amazon VPC* [Rede ACLs](https://docs.aws.amazon.com/vpc/latest/userguide/vpc-network-acls.html) no Guia 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). 1. Na lista de instâncias, selecione a opção com o **Instance ID** (ID da instância) correspondente ao anotado anteriormente. 1. 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`. 1. 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. 1. 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)**. 1. Na lista de sub-redes, selecione a sub-rede com o valor **Subnet ID** (ID da sub-rede) que corresponde ao anotado anteriormente. 1. Na guia **Summary** (Resumo), selecione o link da Network ACL ao lado de **Network ACL**. 1. Na lista de rede ACLs, selecione a rede ACL. (Existe apenas uma Network ACL.) 1. Procure pela Network ACL na guia **Inbound Rules (Regras de entrada)**. Se já existir uma regra em que **Type** (Tipo) está definido como **HTTP\$1 (8080)**, **HTTP\$1 (8081)** ou **HTTP\$1 (8082)**, avance para [Etapa 4: Compartilhar o URL de sua aplicação em execução](#app-preview-share-url). Caso contrário, selecione **Editar**. 1. Escolha **Add another rule**. 1. Em **Rule \$1** (Regra Nº), digite um número para a regra (por exemplo, `200`). 1. Para **Tipo**, selecione **Regra TCP personalizada**. 1. Em **Port Range (Intervalo de portas)**, digite `8080`, `8081` ou `8082`. 1. 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`. 1. 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](troubleshooting.md#troubleshooting-app-sharing). **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 [Allocating an Elastic IP Address](https://docs.aws.amazon.com/AWSEC2/latest/UserGuide/elastic-ip-addresses-eip.html#using-instance-addressing-eips-allocating) e [Associating an Elastic IP Address with a Running Instance](https://docs.aws.amazon.com/AWSEC2/latest/UserGuide/elastic-ip-addresses-eip.html#using-instance-addressing-eips-associating) no *Manual 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](https://aws.amazon.com/ec2/pricing/). 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 obter mais informações, consulte [Visualizar uma aplicação em execução](app-preview.md#app-preview-preview-app). 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.