Saltearse al contenido

@astrojs/ node

Este adaptador permite a Astro desplegar tu sitio SSR a objetivos de Node.

Si estás usando Astro como un generador de sitios estáticos—su comportamiento es fuera de serie—no necesitas un adaptador.

Si deseas usar renderizado del lado del servidor (SSR), Astro requiere un adaptador que coincida con tu tiempo de ejecución de implementación.

Node.js es un tiempo de ejecución de JavaScript para código del lado del servidor. @astrojs/node puede ser usado en modo independiente o como middleware para otros servidores http, como Express.

Agrega el adaptador de Node para habilitar SSR en tu proyecto de Astro con el siguiente comando astro add. Esto instalará el adaptador y hará los cambios apropiados a tu archivo astro.config.mjs en un solo paso.

Terminal window
# Usando NPM
npx astro add node
# Usando Yarn
yarn astro add node
# Usando PNPM
pnpm astro add node

Si prefieres instalar el adaptador manualmente, completa los siguientes dos pasos:

  1. Instala el adaptador de Node a las dependencias de tu proyecto usando tu gestor de paquetes preferido. Si estás usando npm o no estás seguro, ejecuta esto en la terminal:

    Terminal window
    npm install @astrojs/node
  2. Agrega dos lineas nuevas a tu archivo de configuración astro.config.mjs del proyecto.

    astro.config.mjs
    import { defineConfig } from 'astro/config';
    import node from '@astrojs/node';
    export default defineConfig({
    output: 'server',
    adapter: node({
    mode: 'standalone',
    }),
    });

@astrojs/node puede ser configurado pasando opciones al adaptador. Las siguientes opciones están disponibles:

Controla si el adaptador construye en modo middleware o standalone.

  • El modo middleware permite que la salida generada se utilice como middleware para otro servidor de Node.js, como Express.js o Fastify.

    astro.config.mjs
    import { defineConfig } from 'astro/config';
    import node from '@astrojs/node';
    export default defineConfig({
    output: 'server',
    adapter: node({
    mode: 'middleware',
    }),
    });
  • El modo standalone permite construir un servidor se que inicia automáticamente cuando el módulo de entrada se ejecuta. Esto te permite desplegar tu construcción a un host sin ningún código adicional.

Primero, realiza una construcción. Dependiendo del mode seleccionado (ver arriba) sigue los pasos apropiados a continuación:

La entrada del servidor se construye a ./dist/server/entry.mjs de forma predeterminada. Este módulo exporta una función handler que puede ser usada con cualquier framework que soporte los objetos request y response de Node.

Por ejemplo, con Express:

import express from 'express';
import { handler as ssrHandler } from './dist/server/entry.mjs';
const app = express();
// Modifica esto en función de la opción `base` de tu archivo astro.config.mjs.
// Deben coincidir. El valor predeterminado es "/".
const base = '/'
app.use(base, express.static('dist/client/'));
app.use(ssrHandler);
app.listen(8080);

O, con Fastify (>4):

import Fastify from 'fastify';
import fastifyMiddie from '@fastify/middie';
import fastifyStatic from '@fastify/static';
import { fileURLToPath } from 'node:url';
import { handler as ssrHandler } from './dist/server/entry.mjs';
const app = Fastify({ logger: true });
await app
.register(fastifyStatic, {
root: fileURLToPath(new URL('./dist/client', import.meta.url)),
})
.register(fastifyMiddie);
app.use(ssrHandler);
app.listen({ port: 8080 });

Además, también puedes pasar un objeto para acceder a través de Astro.locals o en el middleware de Astro:

import express from 'express';
import { handler as ssrHandler } from './dist/server/entry.mjs';
const app = express();
app.use(express.static('dist/client/'));
app.use((req, res, next) => {
const locals = {
title: 'Nuevo título',
};
ssrHandler(req, res, next, locals);
});
app.listen(8080);

Ten en cuenta que el modo middleware no sirve de archivos. Necesitarás configurar tu framework HTTP para que lo haga por ti. De forma predeterminada, los activos del cliente se escriben en ./dist/client/.

En el modo standalone, un servidor se inicia cuando el punto de entrada del servidor se ejecuta. De forma predeterminada se construye a ./dist/server/entry.mjs. Puedes ejecutarlo con:

Terminal window
node ./dist/server/entry.mjs

Para el modo standalone, el servidor se encarga de servir archivos además de las rutas de página y API.

Puedes anular el host y el puerto en los que se ejecuta el servidor independiente pasándolos como variables de entorno en tiempo de ejecución:

Terminal window
HOST=0.0.0.0 PORT=4321 node ./dist/server/entry.mjs

Por defecto el servidor standalone usa HTTP. Esto funciona bien si tienes un servidor proxy delante de él que hace HTTPS. Si necesitas que el servidor standalone ejecute HTTPS por sí mismo, necesitas proveer tu llave SSL y certificado.

Puedes pasar la ruta a tu llave y certificado a través de las variables de entorno SERVER_CERT_PATH y SERVER_KEY_PATH. Así es como podrías pasarlas en bash:

Terminal window
SERVER_KEY_PATH=./private/key.pem SERVER_CERT_PATH=./private/cert.pem node ./dist/server/entry.mjs

Variables de entorno en tiempo de ejecución

Sección titulada Variables de entorno en tiempo de ejecución

Si existe un archivo .env que contiene variables de entorno está presente cuando se ejecuta el proceso de construcción, estos valores se codificarán en la salida, al igual que al generar un sitio web estático.

Durante la compilación, las variables de tiempo de ejecución deben estar ausentes del archivo .env, y debes proporcionar a Astro todas las variables de entorno que esperas en tiempo de ejecución: VARIABLE_1=placeholder astro build. Esto le indica a Astro que el valor real estará disponible cuando se ejecute la aplicación construida. El valor de marcador de posición será ignorado por el proceso de construcción, y Astro usará el valor proporcionado en tiempo de ejecución.

En este caso de múltiples variables de tiempo de ejecución, almacénalas en un archivo separado (por ejemplo, .env.runtime) de .env. Inicia la construcción con el siguiente comando:

Terminal window
export $(cat .env.runtime) && astro build

En modo autónomo, los activos de tu carpeta dist/client/ se sirven a través del servidor autónomo. Es posible que despliegues estos activos en una CDN, en cuyo caso el servidor nunca los servirá realmente. Pero en algunos casos, como los sitios de intranet, está bien servir activos estáticos directamente desde el servidor de aplicaciones.

Los assets en la carpeta dist/client/_astro/ son los que Astro ha construido. Todos estos assets se nombran con un hash y, por lo tanto, se les pueden asignar cabeceras de caché largas. Internamente el adaptador añade esta cabecera para estos assets:

Cache-Control: public, max-age=31536000, immutable

SyntaxError: Export nombrado ‘compile’ no encontrado

Sección titulada SyntaxError: Export nombrado ‘compile’ no encontrado

Puedes ver esto cuando ejecutas el script de entrada si fue construido con npm o Yarn. Este es un problema conocido que será arreglado en una versión futura. Como solución alternativa, agrega "path-to-regexp" al array noExternal:

astro.config.mjs
import { defineConfig } from 'astro/config';
import node from '@astrojs/node';
export default defineConfig({
output: "server",
adapter: node(),
vite: {
ssr: {
noExternal: ['path-to-regexp'],
},
},
});

Para obtener más ayuda, revisa el canal #support en Discord. ¡Nuestros amigables miembros del Escuadrón de Soporte están aquí para ayudarte!

También puedes revisar nuestra Documentación de Integraciones de Astro para más información sobre integraciones.

Este paquete es mantenido por el equipo central de Astro. ¡Eres bienvenido a enviar un issue o PR!

Consulta el CHANGELOG.md para ver el historial de cambios de esta integración.

More integrations

Frameworks UI

Adaptadores SSR

Otros