Cómo entregar archivos estáticos

A menudo, las aplicaciones necesitan entregar archivos estáticos, como JavaScript, imágenes y CSS, además de controlar solicitudes dinámicas. Las aplicaciones del entorno flexible pueden entregar archivos estáticos desde una opción de Google Cloud Platform (como Cloud Storage), entregarlos directamente o usar una red de distribución de contenidos (CDN) de terceros.

Entrega archivos desde Cloud Storage

Cloud Storage puede alojar elementos estáticos para aplicaciones web dinámicas. Estos son algunos de los beneficios de entregarlos desde Cloud Storage en lugar de hacerlo desde tu aplicación:

  • Cloud Storage funciona básicamente como una red de distribución de contenidos. No requiere configuraciones especiales gracias a que, según la configuración predeterminada, cualquier objeto público de lectura se almacena en caché en la red global de Cloud Storage.
  • La carga de tu aplicación se aligerará porque Cloud Storage se encargará de la entrega de elementos estáticos. Según la cantidad de elementos estáticos que tengas y la frecuencia de acceso, esto puede reducir en gran medida el costo por ejecutar tu app.
  • Los cargos de ancho de banda por acceder a contenido, a menudo, pueden ser menores con Cloud Storage.

Puedes subir tus elementos a Cloud Storage mediante el SDK de Cloud o la API de Cloud Storage.

La biblioteca cliente de Google Cloud proporciona un cliente Java idiomático a Cloud Storage para almacenar y recuperar datos con Cloud Storage en una aplicación de App Engine.

Ejemplo de entrega desde un depósito de Cloud Storage

En este ejemplo simple se muestra cómo crear un depósito de Cloud Storage y subir los elementos estáticos mediante el SDK de Cloud:

  1. Crea un depósito. Aunque es frecuente, no es obligatorio nombrar el depósito con el ID de tu proyecto. El nombre del depósito debe ser único a nivel global.

    gsutil mb gs://<your-bucket-name>
    
  2. Configura la LCA para otorgar acceso de lectura a los elementos del depósito.

    gsutil defacl set public-read gs://<your-bucket-name>
    
  3. Sube elementos al depósito. El comando rsync suele ser la forma más rápida y simple de subir y actualizar elementos. También puedes utilizar cp.

    gsutil -m rsync -r ./static gs://<your-bucket-name>/static
    

Ya puedes acceder a tus elementos estáticos a través de https://storage.googleapis.com/<your-bucket-name>/static/....

Para obtener más detalles sobre cómo entregar elementos estáticos, incluso cómo entregarlos desde un nombre de dominio personalizado con Cloud Storage, consulta Aloja un sitio web estático.

Entrega archivos desde otros servicios de GCP

También tienes la opción de usar Cloud CDN o algún otro servicio de almacenamiento de GCP.

Entrega archivos directamente desde tu aplicación

Generalmente, la entrega de archivos desde tu aplicación resulta simple. Sin embargo, existen algunas desventajas, por lo que debes tener en cuenta lo siguiente:

  • Para las solicitudes de archivos estáticos, se usan recursos que deberían usarse con solicitudes dinámicas.
  • En función de tu configuración, puede que la entrega de archivos desde tu aplicación ocasione una latencia de respuesta y genere problemas cuando se creen instancias nuevas de control de cargas.

Sugerencia: En entornos de producción, se recomienda entregar el contenido estático por separado de tu aplicación, ya sea en GCP o con una CDN de terceros de forma externa.

Ejemplo de cómo entregar archivos estáticos con tu aplicación

El contenedor de servlet del entorno de ejecución de Java usará el archivo web.xml del web.xml para asignar las URL a los servlets, incluidos los elementos estáticos. Si no especificas una web.xml, se usa una predeterminada que asigna todo al servlet predeterminado.

En este ejemplo, ./src/main/webapp/index.html se refiere a una hoja de estilo entregada desde /stylesheets/styles.css.

<!doctype html>
<html>
<head>
<title>Static Files</title>
<link rel="stylesheet" type="text/css" href="/stylesheets/styles.css">
</head>
<body>
  <p>This is a static file serving example.</p>
</body>
</html>

El archivo styles.css se ubica en./src/main/webapp/stylesheets/styles.css.

body {
  font-family: Verdana, Helvetica, sans-serif;
  background-color: #CCCCFF;
}

Puedes configurar de manera explícita cómo se manejan los archivos estáticos en el archivo web.xml. Por ejemplo, si deseas asignar solicitudes a todos los archivos que tengan la extensión .jpg:

<servlet-mapping>
    <servlet-name>default</servlet-name>
    <url-pattern>*.jpg</url-pattern>
</servlet-mapping>

Si usas un marco de trabajo web como Play, deberás consultar la documentación del marco de trabajo en los elementos estáticos.

¿Te ha resultado útil esta página? Enviar comentarios:

Enviar comentarios sobre...

Entorno flexible de App Engine para documentos de Java