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 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.
Temas
- Ejecutar una aplicación
- Vista previa de una aplicación en ejecución
- Volver a cargar la vista previa de una aplicación
- Cambiar el tipo de vista previa de la aplicación
- Abrir la vista previa de una aplicación en una pestaña independiente del navegador web
- Cambiar a una URL de vista previa distinta
- Compartir una aplicación en ejecución a través de internet
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.1
localhost
, 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
o8082
. -
La dirección IP de la aplicación en el entorno es
127.0.0.1
,localhost
o0.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-2
es 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.1
localhost
, 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.
Temas
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.
-
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).
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
.
-
-
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:
-
Seguridad en la Guía del usuario de Amazon VPC
-
Grupos de seguridad de su Your VPC en la Guía del usuario de Amazon VPC
-
ACL de red en la Guía del usuario de Amazon VPC
-
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.
-
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 .
-
Inicie sesión AWS Management Console en https://console.aws.amazon.com/
si aún no lo ha hecho. -
Abra la consola de Amazon EC2. Para ello, en la barra de navegación, elija Services (Servicios). A continuación, elija EC2.
-
En la barra de navegación, elija Región de AWS la ubicación de su entorno.
-
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).
-
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.
-
-
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).
-
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).
-
En el cuadro de diálogo Edit inbound rules (Modificar reglas de entrada), elija Add tag (Agregar etiqueta).
-
En Tipo, elija Regla TCP personalizada.
-
En Port Range (Rango de puertos), escriba
8080
,8081
o8082
. -
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.
-
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
-
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).
-
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.
-
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
. -
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.
-
Si se muestra VPC Dashboard (Panel de VPC), elija Subnets (Subredes). También puede seleccionar Subnets (Subredes) en el panel de navegación.
-
En la lista de subredes, seleccione la subred cuyo valor de Subnet ID (ID de subred) coincida con el que anotó anteriormente.
-
En la pestaña Summary (Resumen), elija el enlace ACL de red que está junto a Network ACL (ACL de red).
-
En la lista de ACL de red, seleccione la ACL de red. (Solo hay una ACL de red).
-
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).
-
Elija Add another rule.
-
En Rule # (N.º de regla), ingrese un número para la regla (por ejemplo,
200
). -
En Tipo, elija Regla TCP personalizada.
-
En Port Range (Rango de puerto), escriba
8080
,8081
o8082
. -
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
. -
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-2
es 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.