Almacenar y servir archivos estáticos

Las aplicaciones suelen tener que servir archivos estáticos, como JavaScript, imágenes y CSS, además de gestionar solicitudes dinámicas. Las aplicaciones del entorno estándar pueden publicar archivos estáticos desde una Google Cloud opción como Cloud Storage, publicarlos directamente o usar una red de distribución de contenido (CDN) de terceros.

Servir archivos desde Cloud Storage

Cloud Storage puede alojar recursos estáticos para aplicaciones web dinámicas. Las ventajas de usar Cloud Storage en lugar de servir contenido directamente desde tu aplicación son las siguientes:

• Cloud Storage funciona básicamente como una red de distribución de contenido. No requiere ninguna configuración especial, ya que, de forma predeterminada, cualquier objeto de lectura pública se almacena en caché en la red global de Cloud Storage.
• La carga de tu aplicación se reducirá al derivar el servicio de recursos estáticos a Cloud Storage. En función del número de recursos estáticos que tengas y de la frecuencia de acceso, esto puede reducir considerablemente el coste de ejecutar tu aplicación.
• Los cargos por ancho de banda para acceder al contenido suelen ser menores con Cloud Storage.

Puede subir sus recursos a Cloud Storage mediante la CLI de Google Cloud o la API de Cloud Storage.

La biblioteca de cliente de Google Cloud proporciona un cliente idiomático para Cloud Storage, con el que se pueden almacenar y recuperar datos con Cloud Storage en una aplicación de App Engine.

Ejemplo de servicio desde un segmento de Cloud Storage

En este ejemplo se crea un segmento de Cloud Storage y se suben recursos estáticos mediante la CLI de gcloud:

1. Permite crear un depósito. Es habitual, pero no obligatorio, que el nombre del segmento sea el mismo que el ID del proyecto. El nombre del segmento debe ser único de forma global.

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

2. Define la política de gestión de identidades y accesos para conceder acceso público de lectura a los elementos del segmento.

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

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

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

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

Para obtener más información sobre cómo usar Cloud Storage para publicar recursos estáticos, incluido cómo hacerlo desde un nombre de dominio personalizado, consulta el artículo Cómo alojar un sitio web estático.

Publicar archivos de otros Google Cloud servicios

También puedes usar Cloud CDN u otros servicios de almacenamiento Google Cloud .

Publicar archivos directamente desde tu aplicación

Para servir archivos estáticos en el entorno estándar, define los controladores en el archivo app.yaml con los elementos static_dir o static_files.

El contenido de los archivos o directorios estáticos no se ve afectado por los ajustes de escalado del archivo app.yaml. La infraestructura de App Engine gestiona directamente las solicitudes de archivos estáticos o directorios estáticos, que no llegan al tiempo de ejecución del lenguaje de la aplicación.

Configurar los controladores de archivos estáticos

Para configurar tu aplicación de forma que sirva el directorio ./public desde la URL /static, debes definir un controlador en el archivo app.yaml.

A continuación, se muestra cómo servir los archivos estáticos del directorio ./public de una aplicación de ejemplo. La plantilla de la página index.html de esta aplicación 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 gestiona tres patrones de URL:

• El controlador /favicon.ico asigna una solicitud específica de /favicon.ico a un archivo llamado favicon.ico en el directorio raíz de la aplicación.

• El controlador /static asigna solicitudes de URLs que empiezan por /static. Cuando App Engine recibe una solicitud de una URL que empieza por /static, asigna el resto de la ruta a los archivos del directorio ./public. Si se encuentra un archivo adecuado en el directorio, el contenido de ese archivo se devuelve al cliente.

• El controlador /.* coincide con todas las demás URLs y las dirige a tu aplicación.

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

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

Servir contenido desde una red de distribución de contenido de terceros

Puedes usar cualquier CDN externa de terceros para servir tus archivos estáticos y almacenar en caché las solicitudes dinámicas, pero es posible que tu aplicación experimente un aumento de la latencia y del coste.

Para mejorar el rendimiento, debes usar una CDN de terceros que admita CDN Interconnect.