Aviso: En los próximos meses, reorganizaremos el sitio de documentación de App Engine para facilitar la búsqueda de contenido y alinearlo mejor con el resto de los productos de Google Cloud. El mismo contenido estará disponible, pero la navegación ahora coincidirá con el resto de los productos de Cloud.

Node.js 16 ahora está disponible a nivel general.

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, como Cloud Storage, entregarlos directamente o usar una red de distribución de contenidos (CDN) de terceros.

Alojar tu sitio estático en Google Cloud puede costar menos que usar un proveedor de hosting tradicional, ya que Google Cloud 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 la herramienta de línea de comandos de gsutil 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 bucket de Cloud Storage

En este ejemplo simple se muestra cómo crear un bucket de Cloud Storage y subir elementos estáticos mediante Google Cloud CLI:

Crea un bucket. Es común, pero no obligatorio, nombrar al bucket según el ID del proyecto. Debe tener un nombre único a nivel global.
```
gsutil mb gs://<your-bucket-name>
```
Configura la LCA para otorgar acceso de lectura a los elementos del bucket.
```
gsutil defacl set public-read gs://<your-bucket-name>
```
Sube elementos al bucket. El comando rsync suele ser la forma más rápida y fácil de subir y actualizar elementos. También puedes usar cp.
```
gsutil -m rsync -r ./static gs://<your-bucket-name>/static
```

Ahora puedes acceder a los 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 Cómo alojar un sitio web estático.

Entrega archivos desde otros servicios de Google Cloud

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

Entrega archivos directamente desde la app

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

El contenido de los archivos estáticos o los directorios estáticos no se ven afectados por la configuración de escalamiento del archivo app.yaml. La infraestructura de App Engine maneja las solicitudes a archivos estáticos o directorios estáticos y no llegan al entorno de ejecución del lenguaje de la aplicación.

Configura los controladores de archivos estáticos

Si quieres configurar la app para que entregue el directorio ./public desde la URL /static, define un controlador en el archivo app.yaml.

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

El controlador /favicon.ico mapea una solicitud específica para /favicon.ico a un archivo llamado favicon.ico en el directorio raíz de la app.
El controlador /static mapea solicitudes para las URL que comienzan con /static. Cuando App Engine recibe una solicitud para una URL que comienza con /static, mapea el resto de la ruta de acceso a los archivos en el directorio ./public. Si se encuentra un archivo apropiado en el directorio, su contenido se muestra al cliente.
El controlador /.* coincide con todas las demás URL y las dirige a la app.

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

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 siguiente ejemplo, la app usa el middleware express.static para entregar archivos desde el directorio ./public a la URL /static. En específico, la app de ejemplo entrega una hoja de estilo que se encuentra en ./public/css, desde la URL /static/main.css.

appengine/static-files/app.js

Ver en GitHub

'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 se refiere a /static/main.css.

appengine/static-files/views/index.pug

Ver en GitHub

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 frameworks de Node.js, como Hapi, Koa y Sails, suelen admitir la publicación de archivos estáticos directamente desde la app. Consulta su documentación para obtener detalles sobre cómo configurar y usar contenido estático.

Entrega archivos 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, usa una CDN de terceros compatible con CDN Interconnect.