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.
Puede usar el entorno de desarrollo AWS Cloud9 integrado (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:
808080818082
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 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 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,8081o8082. -
La dirección IP de la aplicación en el entorno es
127.0.0.1,localhosto0.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, 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 y IPs. 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.
