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 apps en el entorno estándar pueden entregar archivos estáticos desde una opción de Google Cloud Platform, como Cloud Storage, entregarlos de forma directa 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, ya 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 app:

  • Cloud Storage funciona, en esencia, como una red de distribución de contenido. No requiere configuraciones especiales gracias a que, de forma predeterminada, cualquier objeto público de lectura se almacena en caché en la red global de Cloud Storage.
  • La carga de tu app se reducirá mediante la descarga de la entrega de elementos estáticos a Cloud Storage. Según la cantidad de elementos estáticos que tengas y la frecuencia de acceso, esto puede reducir una cantidad importante del costo por ejecutar tu app.
  • A menudo, los cargos de ancho de banda por acceder a contenido 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 app 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.

Entrega archivos directo desde tu app

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.

Configura los controladores de archivos estáticos

Define un controlador en el archivo ./public para configurar que tu app 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, asigna el resto de la ruta 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 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.

Entrega desde una red de distribución de contenido 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 app usa el middleware express.static para entregar archivos del directorio ./public a la URL /static. En específico, la app 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 app de forma directa. Consulta su documentación para obtener detalles sobre cómo configurar y usar contenido estático.

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

Enviar comentarios sobre...

Documentación del entorno estándar de App Engine para Node.js