Vista previa de las aplicaciones en ejecución en AWS Cloud9 IDE - AWS Cloud9
Ejecutar una aplicaciónVista previa de una aplicación en ejecución

AWS Cloud9 ya no está disponible para nuevos clientes. Los clientes existentes de AWS Cloud9 pueden seguir utilizando el servicio con normalidad. Más información

Las traducciones son generadas a través de traducción automática. En caso de conflicto entre la traducción y la version original de inglés, prevalecerá la version en inglés.

Vista previa de las aplicaciones en ejecución en AWS Cloud9 IDE

Puede utilizar el entorno de desarrollo AWS Cloud9 integrado (IDE) para obtener una vista previa de una aplicación en ejecución desde elIDE.

Ejecutar una aplicación

Para poder obtener una vista previa de la aplicación desde elIDE, la aplicación debe estar ejecutándose en el entorno de AWS Cloud9 desarrollo. Debe usarse HTTP a través de los siguientes puertos:

  • 8080

  • 8081

  • 8082

Todos los puertos anteriores deben usar la dirección IP de 127.0.0.1localhost, o 0.0.0.0.

nota

No es necesario que ejecute la aplicación a HTTP través de un puerto 8080 o 8082 con la dirección IP de 127.0.0.1localhost, o0.0.0.0. 8081 Sin embargo, si no lo hace, no podrá obtener una vista previa de la aplicación en ejecución desdeIDE.

nota

La aplicación de vista previa se ejecuta dentro del elemento iframe IDE y se carga dentro de él. Algunos servidores de aplicaciones pueden bloquear de forma predeterminada las solicitudes que provienen de elementos del iframe, como el X-Frame-Options encabezado. Si la aplicación de vista previa no se muestra en la pestaña de vista previa, asegúrese de que el servidor de aplicaciones no prohíba mostrar el contenido en iframes.

Para escribir código para ejecutar la aplicación en un puerto y dirección IP específicos, consulte la documentación de la aplicación.

Para ejecutar su aplicación, consulte Run Your Code.

Para probar este comportamiento, añada el siguiente JavaScript código a un archivo cuyo nombre aparezca server.js en la raíz de su entorno. Este código ejecuta un servidor mediante un archivo denominado Node.js.

nota

En el siguiente ejemplo, text/html es el Content-Type del contenido devuelto. Para devolver el contenido en un formato diferente, especifique otro Content-Type. Por ejemplo, puede especificar text/css un formato de CSS archivo.

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'.

En la raíz del entorno, puede agregar el siguiente código de Python a un archivo con un nombre como server.py. En el siguiente ejemplo, un servidor se ejecuta con 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()

En la raíz de su entorno, añada el siguiente HTML código a un archivo que tenga un nombreindex.html.

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

Para ver el HTML resultado de este archivo en la pestaña de vista previa de la aplicación, ejecútelo server.js con server.py Node.js o con Python. A continuación, siga los pasos que se indican en la siguiente sección para obtener una vista previa. En la pestaña de vista previa de la aplicación, agréguela /index.html al final de yURL, a continuación, presioneEnter.

Vista previa de una aplicación en ejecución

Antes de obtener una vista previa de la aplicación, confirme lo siguiente:

  • La aplicación se ejecuta mediante el HTTP protocolo a través del puerto 80808081, o8082.

  • La dirección IP de la aplicación en el entorno es 127.0.0.1, localhost o 0.0.0.0.

  • El archivo de código de la aplicación está abierto y activo en AWS Cloud9 IDE.

Después de confirmar todos estos detalles, elija una de las siguientes opciones de la barra de menú:

  • Preview, Preview Running Application (Vista previa, Vista previa de una aplicación en ejecución)

  • Tools, Preview, Preview Running Application (Herramientas, Vista previa, Vista previa de una aplicación en ejecución)

Una de estas opciones abre una pestaña de vista previa de la aplicación en el entorno y, a continuación, se muestra en ella el resultado de la aplicación.

nota

Si la pestaña de vista previa de la aplicación muestra un error o está en blanco, siga los pasos de solución de problemas en La pestaña de vista previa de la aplicación muestra un mensaje de error o está en blanco. Si cuando intenta obtener una vista previa de una aplicación o un archivo, aparece el siguiente aviso: “La funcionalidad de vista previa está deshabilitada porque su navegador tiene cookies de terceros deshabilitadas”, siga los pasos para la solución de problemas que se indican en Aviso de vista previa de aplicaciones o vista previa de archivo: “Cookies de terceros desactivadas”.

nota

Si la aplicación aún no está en ejecución, aparece un error en la pestaña de vista previa de la aplicación. Para resolver este problema, ejecute o reinicie la aplicación y, a continuación, elija el comando de la barra de menús de nuevo.

Supongamos que, por ejemplo, su aplicación no puede ejecutarse en ninguno de los puertos IPs mencionados. O bien, la aplicación se debe ejecutar en más de uno de estos puertos al mismo tiempo. Por ejemplo, la aplicación se debe ejecutar en los puertos 8080 y 3000 al mismo tiempo. Si ese es el caso, es posible que la pestaña de vista previa de la aplicación muestre un error o que esté en blanco. Esto se debe a que la pestaña de vista previa de la aplicación del entorno solo funciona con los puertos anteriores yIPs. Además, la aplicación funciona con un solo puerto a la vez.

No recomendamos compartir la URL pestaña de vista previa de la aplicación con otras personas. (URLEstá en el siguiente formato:https://12a34567b8cd9012345ef67abcd890e1.vfs.cloud9.us-east-2.amazonaws.com/. En este formato, 12a34567b8cd9012345ef67abcd890e1 es el identificador que se AWS Cloud9 asigna al entorno. us-east-2es el identificador del Región de AWS entorno.) Esto solo URL funciona cuando IDE el entorno está abierto y la aplicación se ejecuta en el mismo navegador web.

Si intenta visitar la IP de 127.0.0.1localhost, o 0.0.0.0 utiliza la pestaña de vista previa de la aplicación en el navegador web IDE o en una pestaña independiente del navegador web fuera de ellaIDE, de forma AWS Cloud9 IDE predeterminada, intentará ir a su ordenador local, en lugar de ir a la instancia o a su propio servidor que está conectado al entorno.

Para obtener instrucciones sobre cómo proporcionar a otros usuarios una vista previa de la aplicación en ejecución fuera de ellaIDE, consulteCompartir una aplicación en ejecución a través de internet.