Almacenar y 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 apps en el entorno estándar pueden entregar archivos estáticos desde una opción de Google Cloud, como Cloud Storage, entregarlos directamente o usar una red de distribución de contenidos (CDN) de terceros.

Alojar tu sitio estático en Google Cloud puede costar menos que usar un proveedor de hosting tradicional, ya que Google Cloud proporciona un nivel gratuito.

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 Google Cloud CLI o la API de Cloud Storage.

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

Ejemplo de entrega desde un bucket de Cloud Storage

En este ejemplo, se crea un bucket de Cloud Storage y se suben elementos estáticos mediante gcloud CLI:

  1. Crea un bucket. Es común, pero no obligatorio, nombrar al bucket según el ID del proyecto. Debe tener un nombre único a nivel global.

    gcloud storage buckets create gs://<var>your-bucket-name</var>

  2. Configura la política de IAM para otorgar acceso público de lectura a los elementos del bucket.

    gcloud storage buckets add-iam-policy-binding gs://<var>your-bucket-name</var> --member=allUsers --role=roles/storage.objectViewer

  3. Sube elementos al bucket. El comando rsync suele ser la forma más rápida y fácil de subir y actualizar elementos. También puedes usar cp.

    gcloud storage rsync ./static gs://<var>your-bucket-name</var>/static --recursive

Ahora puedes acceder a los elementos estáticos a través de https://storage.googleapis.com/<var>your-bucket-name</var>/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 Cómo alojar un sitio web estático.

Entrega archivos desde otros servicios de Google Cloud

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

Entrega archivos directamente desde la app

Para entregar archivos estáticos en el entorno estándar, debes definir los controladores en tu archivo app.yaml mediante static_dir o static_files.

El contenido de los archivos estáticos o los directorios estáticos no se ven afectados por la configuración de escalamiento del archivo app.yaml. La infraestructura de App Engine maneja las solicitudes a archivos estáticos o directorios estáticos y no llegan al entorno de ejecución del lenguaje de la aplicación.

Configura los controladores de archivos estáticos

Si quieres configurar la app para que entregue el directorio ./public desde la URL /static, define un controlador en el archivo app.yaml.

A continuación, se muestra cómo entregar los archivos estáticos del directorio ./public de una app de muestra. En la plantilla de la página index.html de esta app, se indica al navegador que cargue el archivo main.css, por ejemplo:

<link type="text/css" rel="stylesheet" href="/static/css/main.css">

El directorio ./public se define en el elemento static_dir del archivo app.yaml del proyecto:

handlers:
  - url: /favicon\.ico
    static_files: favicon.ico
    upload: favicon\.ico

  - url: /static
    static_dir: public

  - url: /.*
    secure: always
    redirect_http_response_code: 301
    script: auto

La sección handlers del ejemplo anterior controla tres patrones de URL:

  • El controlador /favicon.ico mapea una solicitud específica para /favicon.ico a un archivo llamado favicon.ico en el directorio raíz de la app.

  • El controlador /static mapea solicitudes para las URL que comienzan con /static. Cuando App Engine recibe una solicitud para una URL que comienza con /static, mapea el resto de la ruta de acceso a los archivos en el directorio ./public. Si se encuentra un archivo apropiado en el directorio, su contenido se muestra al cliente.

  • El controlador /.* coincide con todas las demás URL y las dirige a la app.

Los patrones de ruta de URL se prueban en el orden en el que aparecen en app.yaml; por lo tanto, el patrón de los archivos estáticos debe definirse antes del patrón /.*. Para obtener más información, consulta la referencia app.yaml.

Ten en cuenta que para usar controladores estáticos, debes especificar el elemento entrypoint en app.yaml o especificar un controlador con script establecido en auto.

Entrega archivos desde una red de distribución de contenidos de terceros

Puedes utilizar cualquier CDN externa de terceros para entregar tus archivos estáticos y almacenar las solicitudes dinámicas en caché, aunque tu app podría experimentar un aumento de latencia y costo.

Para un mejor rendimiento, usa una CDN de terceros compatible con CDN Interconnect.