Entrega archivos estáticos

Además de controlar solicitudes dinámicas, las aplicaciones a menudo necesitan entregar archivos estáticos, como archivos JavaScript, imágenes y CSS. El entorno flexible te permite decidir cómo entregar el contenido estático de tu aplicación. Puedes entregar el contenido estático directamente desde tu aplicación, alojarlo en una opción de GCP como Cloud Storage, o usar una red de entrega de contenido (CDN) de terceros.

Entrega archivos desde App Engine

En general, entregar 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 de otra forma se usarían con solicitudes dinámicas.
  • En función de tu configuración, entregar archivos desde tu aplicación puede ocasionar latencia de respuesta y también causar problemas cuando se creen instancias nuevas de control de cargas.

Sugerencia: En los entornos de producción, es mejor no entregar el contenido estático desde tu aplicación, y sí hacerlo mediante GCP o de manera externa, con un CDN de terceros.

Ejemplo de entrega de archivos estáticos con la app

La mayoría de los marcos de trabajo web incluyen asistencia para entregar archivos estáticos. En este ejemplo, la aplicación usa la capacidad incorporada de Flask para entregar archivos en el directorio ./static desde la URL /static.

La aplicación incluye una vista que procesa la plantilla. Flask entrega automáticamente todo en el directorio ./static sin configuración adicional.

import logging

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def hello():
    return render_template('index.html')

@app.errorhandler(500)
def server_error(e):
    logging.exception('An error occurred during a request.')
    return """
    An internal error occurred: <pre>{}</pre>
    See logs for full stacktrace.
    """.format(e), 500

if __name__ == '__main__':
    # This is used when running locally. Gunicorn is used to run the
    # application on Google App Engine. See entrypoint in app.yaml.
    app.run(host='127.0.0.1', port=8080, debug=True)

La plantilla que procesa la vista incluye una hoja de estilo ubicada en /static/main.css.

<!doctype html>
<html>
<head>
  <title>Static Files</title>
  <!--
  Flask automatically makes files in the 'static' directory available via
  '/static'.
  -->
  <link rel="stylesheet" type="text/css" href="/static/main.css">
</head>
<body>
  <p>This is a static file serving example.</p>
</body>
</html>

La hoja de estilo se ubica en ./static/main.css.

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

Otros marcos de trabajo de Python, como Django, Pyramid y Bottle admiten la entrega de archivos estáticos directamente desde la aplicación. Consulta la documentación de cada marco para obtener detalles sobre cómo configurar y usar contenido estático.

Entrega archivos desde GCP

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

Entrega archivos desde Cloud Storage

Puedes usar Cloud Storage para alojar elementos estáticos en aplicaciones web dinámicas. Entre los beneficios de usar Cloud Storage en lugar de entregarlos directamente desde tu aplicación, se incluyen los siguientes:

  • Cloud Storage funciona, básicamente, como una red de entrega de contenido. Esto no requiere de ninguna configuración especial, ya que, de forma predeterminada, cualquier objeto de lectura pública se almacena en la caché de la red global de Cloud Storage.
  • La carga de tu aplicación se reducirá si transfieres la entrega de elementos estáticos hacia Cloud Storage. Esto puede reducir bastante el costo de ejecución de tu aplicación, según la cantidad de elementos estáticos que tengas y la frecuencia de accesos.
  • Con Cloud Storage, los cargos por ancho de banda para el contenido de acceso pueden ser menores.

Puedes subir tus elementos a Cloud Storage a través de SDK de Cloud o la API de Cloud Storage.

Ejemplo de entrega de archivos desde un depósito de Cloud Storage

Este ejemplo simple crea un depósito de Cloud Storage y sube elementos estáticos a través de SDK de Cloud:

  1. Crea un depósito. Es común, pero no obligatorio, asignarle a tu depósito el mismo del ID del proyecto. El depósito debe tener un nombre ú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. La manera más fácil de subir y actualizar los elementos es con el comando rsync. También puedes usar cp.

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

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

Para obtener más información sobre cómo entregar elementos estáticos con Cloud Storage y cómo hacerlo desde un nombre del dominio personalizado, consulta Aloja un sitio web estático.

Para obtener más información sobre cómo subir, descargar y manipular archivos de forma dinámica en tu aplicación a través de la API de Cloud Storage, consulta Usa Cloud Storage.

Entrega archivos desde una red de entrega de contenido de terceros

Puedes usar cualquier CDN externo de un tercero para entregar tus archivos estáticos y almacenar en caché las solicitudes dinámicas; sin embargo, tu aplicación puede experimentar un aumento de latencia y de costo.

Para un mejor rendimiento, debes usar un CDN de terceros o compatible con CDN Interconnect.

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

Enviar comentarios sobre...

Documentación del entorno de App Engine Flexible para Python