Skip to content

Latest commit

 

History

History
224 lines (160 loc) · 8.18 KB

File metadata and controls

224 lines (160 loc) · 8.18 KB
type title description githubIntegrationURL category i18nReady
integration
@astrojs/node
Aprende como usar el adaptador SSR @astrojs/node para desplegar tu proyecto de Astro.
adapter
true

import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'

Astro Node

Este adaptador permite a Astro desplegar tu sitio renderizado en modo hybrid o server a objetivos de Node.

Si estás usando Astro como un constructor de sitios estáticos, 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.

Por qué Node.js

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.

Instalación

Astro incluye un comando astro add para automatizar la configuración de las integraciones oficiales. Si lo prefieres, puedes instalar las integraciones manualmente en su lugar.

Agrega el adaptador de Node para habilitar SSR en tu proyecto Astro con el comando astro add. Esto instalará @astrojs/node y hará los cambios apropiados en tu archivo astro.config.* en un solo paso.

```sh npx astro add node ``` ```sh pnpm astro add node ``` ```sh yarn astro add node ```

Instalación manual

El adaptador de Node a las dependencias de tu proyecto usando tu gestor de paquetes preferido. Primero, agrega el adaptador de Node a las dependencias de tu proyecto usando tu gestor de paquetes preferido.

```sh npm install @astrojs/node ``` ```sh pnpm add @astrojs/node ``` ```sh yarn add @astrojs/node ```

Luego, agrega el adaptador y tu modo de renderizado bajo de manda deseado a tu archivo astro.config.*:

import { defineConfig } from 'astro/config';
import node from '@astrojs/node';

export default defineConfig({
  output: 'server',
  adapter: node({
    mode: 'standalone',
  }),
});

Configuración

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

Modo

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.

    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.

Uso

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

Middleware

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/.

Standalone

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:

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.

Host y puerto personalizados

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:

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

HTTPS

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:

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

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:

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

Assets

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