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

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

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

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

Ejecutar una aplicación

Para poder obtener una vista previa de la aplicación desde el IDE, la aplicación debe estar ejecutándose en el entorno de desarrollo de AWS Cloud9. Debe usar HTTP en 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 ejecutar la aplicación mediante HTTP a través del puerto 8080, 8081 o 8082 con la dirección IP de 127.0.0.1, localhost o 0.0.0.0. Sin embargo, si no lo hace así, no obtendrá una vista previa de la aplicación en ejecución desde el IDE.

nota

La aplicación de vista previa se ejecuta dentro del IDE y se carga dentro de un elemento iframe. Es posible que algunos servidores de aplicaciones bloqueen de forma predeterminada las solicitudes que provienen de elementos iframe, como el encabezado X-Frame-Options. 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, agregue el siguiente código de JavaScript a un archivo con un nombre como server.js en la raíz del 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 para un formato de archivo 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'.

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 del entorno agregue el siguiente código HTML a un archivo con un nombre como 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 la salida HTML de este archivo en la pestaña de vista previa de la aplicación, ejecute server.js con el archivo Node.js o server.py 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, añada /index.html al final de la URL y, a continuación, pulse Enter.

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 protocolo HTTP a través del puerto 8080, 8081 o 8082.

  • 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 es activo en el IDE de AWS Cloud9.

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, la aplicación no se puede ejecutar en ninguno de los puertos o IP 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 dentro del entorno solo funciona con los puertos y las direcciones IP anteriores. Además, la aplicación funciona con un solo puerto a la vez.

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

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

Para obtener instrucciones sobre cómo proporcionar a los demás una vista previa de la aplicación en ejecución fuera del IDE, consulte Compartir una aplicación en ejecución a través de internet.