Vista previa de las aplicaciones en ejecución en el entorno de desarrollo AWS Cloud9 integrado (IDE) - AWS Cloud9
Ejecutar una aplicaciónVista previa de una aplicación en ejecuciónVolver a cargar la vista previa de una aplicaciónCambiar el tipo de vista previa de la aplicaciónAbrir la vista previa de una aplicación en una pestaña independiente del navegador webCambiar a una URL de vista previa distintaCompartir una aplicación en ejecución a través de internet

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 el entorno de desarrollo AWS Cloud9 integrado (IDE)

Puede usar el AWS Cloud9 IDE para obtener una vista previa de una aplicación en ejecución desde el IDE.

Ejecutar una aplicación

Para poder previsualizar la aplicación desde el IDE, la aplicación debe estar ejecutándose en el entorno de AWS Cloud9 desarrollo. 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, agrega el siguiente JavaScript código a un archivo cuyo nombre esté server.js en la raíz de tu 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 activo en el 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, 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 se AWS Cloud9 asigna al entorno. us-east-2es el identificador del Región de AWS 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 visitar la IP del IDE 127.0.0.1localhost, o 0.0.0.0 utiliza 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 AWS Cloud9 IDE intentará ir de forma predeterminada a su equipo 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 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.

Volver a cargar la vista previa de una aplicación

En la pestaña de vista previa de la aplicación, elija el botón Refresh (Actualizar) (flecha circular).

nota

Este comando no reinicia el servidor. Solo actualiza el contenido de la aplicación en la pestaña de vista previa.

Cambiar el tipo de vista previa de la aplicación

En la pestaña de vista previa de la aplicación, elija una de las siguientes opciones en la lista de tipos de vista previa:

  • Browser (Navegador): ofrece la vista previa del resultado en un formato de navegador web.

  • Raw Content (UTF-8) (Contenido raw ([UTF-8]): intenta obtener una vista previa del resultado en Formato de Transformación Unicode de 8 bits (UTF-8), si procede.

  • Markdown (Marcado): intenta obtener una vista previa del resultado con el formato de marcado, si procede.

Abrir la vista previa de una aplicación en una pestaña independiente del navegador web

En la pestaña de vista previa de la aplicación, elija Pop Out Into New Window (Mostrar en nueva ventana).

nota

El AWS Cloud9 IDE también debe ejecutarse en al menos otra pestaña del mismo navegador web. De lo contrario, la vista previa de la aplicación no se mostrará en una pestaña independiente del navegador.

El AWS Cloud9 IDE también debe ejecutarse en al menos otra pestaña del mismo navegador web. De lo contrario, la vista previa de la aplicación no se mostrará en una pestaña independiente del navegador. 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 Aviso de vista previa de aplicaciones o vista previa de archivo: “Cookies de terceros desactivadas”.

Cambiar a una URL de vista previa distinta

En la pestaña de vista previa de la aplicación, ingrese la ruta de una URL diferente en la barra de direcciones. La barra de dirección se encuentra entre el botón Refresh (Actualizar) y la lista de tipos de vista previa.

Compartir una aplicación en ejecución a través de internet

Tras obtener una vista previa de la aplicación en ejecución, puede ponerla a disposición de otros usuarios a través de Internet.

Si tiene una instancia de Amazon EC2 conectada al entorno, siga los pasos que se indican a continuación. De lo contrario, consulte la documentación del servidor.

Paso 1: obtener la dirección IP y el ID de la instancia

En este paso, anote el ID de instancia y la dirección IP pública de la instancia de Amazon EC2 que esté conectada al entorno. Necesitará el ID de la instancia en un paso posterior para permitir solicitudes de aplicaciones entrantes. A continuación, comparta la dirección IP pública con otros usuarios para que obtengan acceso a la aplicación en ejecución.

  1. Obtenga el ID de la instancia de Amazon EC2. Para ello, siga uno de estos pasos:

    • En una sesión de terminal en el AWS Cloud9 IDE del entorno, ejecute el siguiente comando para obtener el ID de la instancia de Amazon EC2.

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

      El ID de instancia tiene el siguiente formato: i-12a3b456c789d0123. Anote el ID de esta instancia.

    • En el IDE del entorno, en la barra de menús, elija el icono de usuario y, a continuación, elija Manage EC2 Instance (Administrar instancia de EC2).

      Si decide administrar la instancia desde el IDE AWS Cloud9

      En la consola de Amazon EC2 que se muestra, anote el ID de la instancia que aparece en la columna Instance ID (ID de instancia). El ID de la instancia tiene este formato: i-12a3b456c789d0123.

  2. Obtenga la dirección IP pública de la instancia de Amazon EC2. Para ello, siga uno de estos pasos:

    • En el IDE del entorno, en la barra de menús, elija Share (Compartir). En el cuadro de diálogo Share this environment (Compartir este entorno), anote la dirección IP pública del cuadro Application (Aplicación). La dirección IP pública tiene este formato: 192.0.2.0.

    • En una sesión de terminal en el IDE del entorno, ejecute el siguiente comando para obtener la dirección IP pública de la instancia de Amazon EC2.

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

      La dirección IP pública tiene este formato: 192.0.2.0. Anote esta dirección IP pública.

    • En el IDE del entorno, en la barra de menús, elija el icono de usuario y, a continuación, elija Manage EC2 Instance (Administrar instancia de EC2). En la consola de Amazon EC2 que se muestra, en la pestaña Description (Descripción), anote la dirección IP pública para el campo IPv4 Public IP (IP pública IPv4). La dirección IP pública tiene este formato: 192.0.2.0.

    nota

    Es posible que la dirección IP pública de la aplicación cambie en cualquier momento en que se reinicie la instancia de la aplicación. Para evitar que la dirección IP se modifique, asigne una dirección IP elástica. A continuación, asigne esa dirección a la instancia en ejecución. Para obtener instrucciones, consulte Asignación de una dirección IP elástica y asociación de una dirección IP elástica a una instancia en ejecución en la Guía del usuario de Amazon EC2. La asignación de una dirección IP elástica puede conllevar gastos. Cuenta de AWS Para obtener más información, consulte Precios de Amazon EC2.

Paso 2: configurar el grupo de seguridad para la instancia

En este paso, en la consola de Amazon EC2, configure el grupo de seguridad de Amazon EC2 para la instancia conectada al entorno. Configúrelo para permitir solicitudes HTTP entrantes a través del puerto 8080, 8081 u 8082.

nota

No es necesario que ejecute HTTP a través del puerto 8080, 8081 o 8082. Si no lo hace, no obtendrá una vista previa de la aplicación en ejecución desde el IDE. Para obtener más información, consulte Vista previa de una aplicación en ejecución. De lo contrario, si ejecuta en un protocolo o puerto diferente, sustitúyalo en este paso.

Para tener una capa adicional de seguridad, configure una lista de control de acceso (ACL) de red para una subred en una VPC que la instancia pueda utilizar. Para obtener más información acerca de los grupos de seguridad y las ACL de red, consulte lo siguiente:

  1. En el IDE del entorno, en la barra de menús, elija el icono de usuario y, a continuación, elija Manage EC2 Instance (Administrar instancia de EC2). A continuación, vaya al paso 3 en este procedimiento.

  2. Si la elección de Manage EC2 Instance (Administrar instancia EC2) o de otros pasos de este procedimiento muestra errores, inicie sesión en la consola de Amazon EC2 utilizando las credenciales de un administrador en la Cuenta de AWS. A continuación, complete las siguientes instrucciones. Si no puede hacerlo, consulte con el administrador de la Cuenta de AWS .

    1. Inicie sesión AWS Management Console en https://console.aws.amazon.com/ si aún no lo ha hecho.

    2. Abra la consola de Amazon EC2. Para ello, en la barra de navegación, elija Services (Servicios). A continuación, elija EC2.

    3. En la barra de navegación, elija Región de AWS la ubicación de su entorno.

    4. Si se muestra EC2 Dashboard (Panel de EC2), elija Running Instances (Ejecutar instancias). De lo contrario, en el panel de navegación del servicio, expanda Instances (Instancias) si aún no está ampliado y elija Instances (Instancias).

    5. En la lista de instancias, seleccione la instancia con un Instance ID (ID de instancia) que coincida con el ID de instancia que anotó anteriormente.

  3. En la pestaña Description (Descripción) de la instancia, elija el enlace del grupo de seguridad que está junto a Security groups (Grupos de seguridad).

  4. Con el grupo de seguridad a la vista, busque en la pestaña Inbound (Entrada). Si hay una regla con Type (Tipo) establecido en Custom TCP Rule (Regla de TCP personalizada) y Port Range (Rango de puertos) en 8080, 8081 u 8082, elija Cancel (Cancelar) y diríjase a Paso 3: configurar la subred para la instancia. De lo contrario, elija Edit (Editar).

  5. En el cuadro de diálogo Edit inbound rules (Modificar reglas de entrada), elija Add tag (Agregar etiqueta).

  6. En Tipo, elija Regla TCP personalizada.

  7. En Port Range (Rango de puertos), escriba 8080, 8081 o 8082.

  8. En Fuente, elija Cualquiera.

    nota

    Al elegir Anywhere (Cualquiera) en Source (Fuente), permite las solicitudes entrantes desde cualquier dirección IP. Para restringir esto a direcciones IP específicas, elija Custom (Personalizar) y, a continuación, ingrese el intervalo de direcciones IP. O bien, elija My IP (Mi IP) para restringir las solicitudes para que solo provengan de la dirección IP.

  9. Seleccione Guardar.

Paso 3: configurar la subred para la instancia

Utilice las consolas de Amazon EC2 y Amazon VPC para configurar una subred para la instancia de Amazon EC2 conectada al entorno. A continuación, permita solicitudes HTTP entrantes a través del puerto 8080, 8081 u 8082.

nota

No es necesario ejecutar mediante HTTP a través del puerto 8080, 8081 o 8082. Sin embargo, si no lo hace, no obtendrá una vista previa de la aplicación en ejecución desde el IDE. Para obtener más información, consulte Vista previa de una aplicación en ejecución. De lo contrario, si ejecuta en un protocolo o puerto diferente, sustitúyalo en este paso.

En este paso se describe cómo configurar una ACL de red para una subred en una consola de Amazon VPC que la instancia pueda utilizar. Este paso no es obligatorio pero sí recomendable. La configuración de una ACL de red agrega una capa adicional de seguridad. Para obtener más información acerca de las ACL de red, consulte lo siguiente:

  • Seguridad en la Guía del usuario de Amazon VPC

  • ACL de red en la Guía del usuario de Amazon VPC

  1. Con la consola de Amazon EC2, en el panel de navegación del servicio, expanda Instances (Instancias) si aún no lo está y elija Instances (Instancias).

  2. En la lista de instancias, seleccione la instancia con un Instance ID (ID de instancia) que coincida con el ID de instancia que anotó anteriormente.

  3. En la pestaña Description (Descripción) de la instancia, anote el valor de Subnet ID (ID de subred). El ID de subred tiene el siguiente formato: subnet-1fab8aEX.

  4. Abra la Consola de Amazon VPC. Para ello, en la barra de AWS navegación, selecciona Servicios y, a continuación, VPC.

    En este paso, le recomendamos que inicie sesión en la consola de Amazon VPC con las credenciales de un administrador en la Cuenta de AWS. Si no puede hacerlo, póngase en contacto con su Cuenta de AWS administrador.

  5. Si se muestra VPC Dashboard (Panel de VPC), elija Subnets (Subredes). También puede seleccionar Subnets (Subredes) en el panel de navegación.

  6. En la lista de subredes, seleccione la subred cuyo valor de Subnet ID (ID de subred) coincida con el que anotó anteriormente.

  7. En la pestaña Summary (Resumen), elija el enlace ACL de red que está junto a Network ACL (ACL de red).

  8. En la lista de ACL de red, seleccione la ACL de red. (Solo hay una ACL de red).

  9. Busque en la pestaña Inbound Rules (Reglas de entrada) la ACL de red. Si ya existe una regla donde Type (Tipo) está establecido en HTTP* (8080), HTTP* (8081) o HTTP* (8082), continúe en Paso 4: Compartir la URL de la aplicación en ejecución. De lo contrario, elija Edit (Editar).

  10. Elija Add another rule.

  11. En Rule # (N.º de regla), ingrese un número para la regla (por ejemplo, 200).

  12. En Tipo, elija Regla TCP personalizada.

  13. En Port Range (Rango de puerto), escriba 8080, 8081 o 8082.

  14. En Source (Fuente), escriba el rango de las direcciones IP de las que se permitirán solicitudes entrantes. Por ejemplo, para permitir las solicitudes entrantes de cualquier dirección IP, ingrese 0.0.0.0/0.

  15. Con Allow / Deny (Permitir/Denegar) establecido en ALLOW, elija Save (Guardar).

Paso 4: Compartir la URL de la aplicación en ejecución

Una vez ejecutada la aplicación, puede compartirla con otros proporcionando la URL de la aplicación. Para ello, necesita la dirección IP pública que anotó anteriormente. Para escribir la URL completa de la aplicación, asegúrese de iniciar la dirección IP pública de la aplicación con el protocolo correcto. A continuación, si el puerto de la aplicación no es el puerto predeterminado para el protocolo que utiliza, agregue la información del número de puerto. A continuación, se muestra un ejemplo de una URL de aplicación: http://192.0.2.0:8080/index.html mediante HTTP a través del puerto 8080.

Si la pestaña del navegador web resultante muestra un error o está en blanco, siga los pasos de solución de problemas en No se puede mostrar la aplicación en ejecución fuera del IDE.

nota

Es posible que la dirección IP pública de la aplicación cambie en cualquier momento en que se reinicie la instancia de la aplicación. Para evitar que cambie la dirección IP, asigne una dirección IP elástica y asígnela después a la instancia en ejecución. Para obtener instrucciones, consulte Asignación de una dirección IP elástica y asociación de una dirección IP elástica a una instancia en ejecución en la Guía del usuario de Amazon EC2. La asignación de una dirección IP elástica puede conllevar gastos. Cuenta de AWS Para obtener más información, consulte Precios de Amazon EC2.

No es necesario que ejecute la aplicación mediante HTTP a través del puerto 8080, 8081 o 8082. Sin embargo, si no lo hace, no obtendrá una vista previa de la aplicación en ejecución desde el IDE. Para obtener más información, consulte Vista previa de una aplicación en ejecución.

Supongamos que, por ejemplo, las solicitudes se originan en una VPN que bloquea el tráfico a través del protocolo o puerto solicitado. En ese caso, es posible que esas solicitudes de acceso a la URL de la aplicación produzcan un error. La solicitud se debe realizar desde una red diferente que permita el tráfico a través del protocolo y el puerto solicitados. Para obtener más información, contacte con el administrador de red.

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