Almacena y entrega 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 en el entorno estándar 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.

Alojar tu sitio estático en GCP puede costar menos que usar un proveedor de hosting tradicional, puesto que GCP 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 el SDK de Cloud o la API de Cloud Storage.

La biblioteca cliente de Google Cloud proporciona un cliente Node.js 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.

Cómo entregar archivos directamente desde tu aplicación

Si quieres entregar archivos estáticos para Node.js en el entorno estándar, debes definir los controladores en tu archivo app.yaml mediante los elementos static_dir o static_files.

Cómo configurar los controladores de archivos estáticos

Define un controlador en el archivo ./public para configurar tu app de modo que entregue el directorio /static desde la URL app.yaml.

A continuación, verás cómo entregar los archivos estáticos de un directorio ./public de una app de muestra. La plantilla de la página index.html de esta app le 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 está definido en el elemento static_dir del archivo app.yaml del proyecto:

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

  - url: /static
    static_dir: public

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

La sección handlers del ejemplo anterior incluye dos controladores para las URL. Cuando App Engine recibe una solicitud de una URL que comienza con /static, mapea el resto de la ruta de acceso a los archivos del directorio ./public. Si se encuentra un archivo apropiado en el directorio, el contenido se le muestra al cliente. Todas las demás URL coinciden con el patrón /.* y las maneja tu app.

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

Cómo entregar 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, utiliza una CDN de terceros compatible con CDN Interconnect.

Entrega archivos para el desarrollo local

La mayoría de los marcos de trabajo web incluyen asistencia para entregar archivos estáticos, que puedes utilizar a fin de entregar archivos de forma local durante el desarrollo.

En el ejemplo siguiente, la aplicación usa el middleware express.static para entregar archivos del directorio ./public a la URL /static. En concreto, la aplicación de ejemplo entrega una hoja de estilo ubicada en ./public/css desde la URL /static/main.css.

'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 = 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.

Por lo general, otros marcos de trabajo de Node.js, como Hapi, Koa y Sails, admiten la entrega de archivos estáticos desde la aplicación de forma directa. Consulta su documentación para obtener detalles sobre cómo configurar y usar contenido estático.