Suministrar 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 flexible 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

Servir archivos desde tu aplicación suele ser sencillo, pero hay un par de inconvenientes que debes tener en cuenta:

  • Las solicitudes de archivos estáticos pueden usar recursos que, de lo contrario, se utilizarían para solicitudes dinámicas.
  • En función de tu configuración, servir archivos desde tu aplicación puede provocar latencia en la respuesta, lo que también puede afectar al momento en que se crean nuevas instancias para gestionar la carga.

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

Go

En el siguiente ejemplo se muestra cómo servir archivos estáticos con tu aplicación. Puedes usar la aplicación de ejemplo de esta guía con cualquier versión compatible de Go especificando la versión del tiempo de ejecución y el sistema operativo en el archivo app.yaml.

Puedes usar el estándar http.FileServer o http.ServeFile para servir archivos directamente desde tu aplicación.


// Package static demonstrates a static file handler for App Engine flexible environment.
package main

import (
	"fmt"
	"net/http"

	"google.golang.org/appengine"
)

func main() {
	// Serve static files from "static" directory.
	http.Handle("/static/", http.FileServer(http.Dir(".")))

	http.HandleFunc("/", homepageHandler)
	appengine.Main()
}

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

func homepageHandler(w http.ResponseWriter, r *http.Request) {
	fmt.Fprint(w, homepage)
}

Java

En el siguiente ejemplo se muestra cómo servir archivos estáticos con tu aplicación. Puedes usar la aplicación de ejemplo de esta guía con cualquier versión compatible de Java. Para ello, especifica la versión del tiempo de ejecución y el sistema operativo en el archivo app.yaml.

El contenedor de servlet del entorno de ejecución de Java usará el archivo descriptor de despliegue, web.xml de tu aplicación para asignar URLs a servlets, incluidos los recursos estáticos. Si no especificas un web.xml, se usará un valor predeterminado que asigna todo al servlet predeterminado.

En este ejemplo, ./src/main/webapp/index.html hace referencia a una hoja de estilo que se sirve 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 encuentra en ./src/main/webapp/stylesheets/styles.css.

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

Puedes configurar explícitamente cómo se gestionan los archivos estáticos en el archivo web.xml. Por ejemplo, si quieres asignar solicitudes de 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 framework web, como Play, tendrás que consultar la documentación del framework sobre los recursos estáticos.

Node.js

En el siguiente ejemplo se muestra cómo servir archivos estáticos con tu aplicación. Puedes usar la aplicación de ejemplo de esta guía con cualquier versión compatible de Node.js. Para ello, especifica la versión del entorno de ejecución y el sistema operativo en el archivo app.yaml.

La mayoría de los frameworks web incluyen compatibilidad para servir archivos estáticos. En este ejemplo, la aplicación usa el middleware express.static para servir archivos del directorio ./public a la URL /static.

'use strict';

const express = require('express');
const app = express();

app.set('view engine', 'pug');

// Use the built-in express middleware for serving static files from './public'
app.use('/static', express.static('public'));

app.get('/', (req, res) => {
  res.render('index');
});

// Start the server
const PORT = parseInt(process.env.PORT) || 8080;
app.listen(PORT, () => {
  console.log(`App listening on port ${PORT}`);
  console.log('Press Ctrl+C to quit.');
});

La vista hace referencia a /static/main.css.

doctype html
html(lang="en")
  head
    title Static Files
    meta(charset='utf-8')
    link(rel="stylesheet", href="/static/main.css")
  body
    p This is a static file serving example.

La propia hoja de estilo se encuentra en ./public/css, que se sirve desde /static/main.css.

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

Otros frameworks de Node.js, como Hapi, Koa y Sails, suelen admitir el servicio de archivos estáticos directamente desde la aplicación. Consulta su documentación para obtener información sobre cómo configurar y usar contenido estático.

PHP

El entorno de ejecución de PHP ejecuta nginx para servir tu aplicación, que está configurada para servir archivos estáticos en el directorio de tu proyecto. Debes declarar el directorio raíz del documento especificando document_root en tu archivo app.yaml. Puedes usar la aplicación de ejemplo de esta guía con cualquier versión compatible de PHP. Para ello, especifica la versión del entorno de ejecución y el sistema operativo en el archivo app.yaml.

runtime: php
env: flex

runtime_config:
  document_root: web
  operating_system: ubuntu22
  runtime_version: 8.3

build_env_variables:
  NGINX_SERVES_STATIC_FILES: true

Python

En el siguiente ejemplo se muestra cómo servir archivos estáticos con tu aplicación. Puedes usar la aplicación de ejemplo de esta guía con cualquier versión compatible de Python especificando la versión del entorno de ejecución y el sistema operativo en el archivo app.yaml.

La mayoría de los frameworks web incluyen compatibilidad para servir archivos estáticos. En este ejemplo, la aplicación usa la función integrada de Flask para servir archivos del directorio ./static desde la URL /static.

La aplicación incluye una vista que renderiza la plantilla. Flask sirve automáticamente todo lo que hay en el directorio ./static sin necesidad de configuración adicional.

import logging

from flask import Flask, render_template


app = Flask(__name__)


@app.route("/")
def hello():
    """Renders and serves a static HTML template page.

    Returns:
        A string containing the rendered HTML page.
    """
    return render_template("index.html")


@app.errorhandler(500)
def server_error(e):
    """Serves a formatted message on-error.

    Returns:
        The error message and a code 500 status.
    """
    logging.exception("An error occurred during a request.")
    return (
        f"An internal error occurred: <pre>{e}</pre><br>See logs for full stacktrace.",
        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 renderizada por 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 encuentra en ./static/main.css.

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

Otros frameworks de Python, como Django, Pyramid y Bottle, suelen admitir el servicio de archivos estáticos directamente desde la aplicación. Consulta su documentación para obtener información sobre cómo configurar y usar contenido estático.

Ruby

La mayoría de los frameworks web incluyen compatibilidad para servir archivos estáticos. En el siguiente ejemplo se muestra cómo servir archivos estáticos con tu aplicación. Puedes usar la aplicación de ejemplo de esta guía con cualquier versión compatible de Ruby. Para ello, especifica la versión del tiempo de ejecución y el sistema operativo en el archivo app.yaml.

Sinatra

El framework web Sinatra sirve archivos del directorio ./public de forma predeterminada. Esta aplicación incluye una vista que hace referencia a /application.css.

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

La hoja de estilo se encuentra en ./public/application.css, que se sirve desde /application.css.

Ruby on Rails

El framework web Ruby on Rails sirve archivos del directorio ./public de forma predeterminada. Los archivos estáticos de JavaScript y CSS también se pueden generar con el pipeline de recursos de Rails.

Estas aplicaciones de ejemplo contienen una vista de diseño que incluye todas las hojas de estilo de la aplicación.

doctype html
html
  head
    title Serving Static Files
    link rel="stylesheet" href="/application.css"
    script src="/application.js"
  body
    p This is a static file serving example.

La propia hoja de estilo es un archivo .css que se encuentra en ./public/application.css.

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

De forma predeterminada, las aplicaciones Rails no generan ni sirven recursos estáticos cuando se ejecutan en producción.

El tiempo de ejecución de Ruby ejecuta rake assets:precompile durante la implementación para generar recursos estáticos y define la variable de entorno RAILS_SERVE_STATIC_FILES para habilitar el servicio de archivos estáticos en producción.

.NET

En el siguiente ejemplo se muestra cómo servir archivos estáticos con tu aplicación. Puedes usar la aplicación de ejemplo de esta guía con cualquier versión compatible de .NET. Para ello, especifica la versión del tiempo de ejecución y el sistema operativo en el archivo app.yaml.

<html>
<head>
    <meta charset="utf-8" />
    <title>Hello Static World</title>
</head>
<body>
    <p>This is a static html document.</p>
    <p><img src="trees.jpg" /></p>
</body>
</html>

Para habilitar el servicio de archivos estáticos, añade lo siguiente:

app.UseDefaultFiles();
app.UseStaticFiles();

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.