Despliega tu proyecto de Astro en Netlify

Netlify ofrece servicios de alojamiento y servicios serverless para aplicaciones web y sitios estáticos. ¡Cualquier proyecto de Astro puede ser alojado en Netlify!

Esta guía contiene instrucciones para hacer despliegues en Netlify a través de la interfaz web o la CLI de Netlify.

Tu proyecto de Astro puede ser desplegado en Netlify de tres maneras distintas: como un sitio estático, un sitio con renderizado en el servidor (SSR), o un (experimental) sitio renderizado en edge computing.

Tu proyecto de Astro es un sitio estático por defecto. No necesitas ninguna configuración adicional para desplegar un sitio estático de Astro en Netlify.

Para habilitar SSR en tu proyecto de Astro y hacer un despliegue en Netlify:

Añade el adaptador de Netlify (EN) a tu proyecto de Astro con el siguiente comando astro add que se muestra debajo. Este instalará el adaptador y hará los cambios apropiados a tu archivo astro.config.mjs en un solo paso.

npx astro add netlify

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

  1. Añade el adaptador de @astrojs/netlify 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:

    npm install @astrojs/netlify
  2. Añade dos nuevas lineas a tu archivo de configuración del proyecto astro.config.mjs.

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

    En cambio, si deseas renderizar tu proyecto usando las Edge Functions experimentales de Netlify, cambia la importación de netlify/functions en la configuración de Astro para usar netlify/edge-functions.

    astro.config.mjs
    import { defineConfig } from 'astro/config';
    import netlify from '@astrojs/netlify/functions';
    import netlify from '@astrojs/netlify/edge-functions';
    
    export default defineConfig({
      output: 'server',
      adapter: netlify(),
    });

Puedes hacer despliegues en Netlify a través de la interfaz web o usando la CLI de Netlify (interfaz de línea de comandos). El proceso es el mismo para ambos sitios estáticos y sitios con SSR.

Despliegue con la Interfaz Web

Section titled Despliegue con la Interfaz Web

Si tu proyecto está alojado en GitHub, GitLab, BitBucket, o Azure DevOps, puedes usar la interfaz web de Netlify para desplegar tu proyecto de Astro.

  1. Haz click en Add a new site en tu Netlify dashboard

  2. Selecciona Import an existing project

    Cuando importes tu proyecto de Astro desde tu proveedor de Git, Netlify debería detectarlo automáticamente y preconfigurar los ajustes correctos para ti.

  3. Asegúrate de que los siguientes ajustes sean ingresados, luego presiona el botón Deploy:

    • Build Command: astro build o npm run build
    • Publish directory: dist

Una vez desplegado, serás redirigido a la página de vista general. Ahí, puedes editar los detalles de tu sitio.

Cualquier cambio futuro al repositorio de tu proyecto provocará despliegues de vista previa y producción basados en tu configuración de despliegue.

Opcionalmente, puedes crear el archivo netlify.toml en la raíz del repositorio de tu proyecto para configurar tu comando de build y el directorio a publicar, así como otros ajustes del sitio, incluyendo variables de entorno y redirecciones. Netlify leerá este archivo y configurará de manera automática tu despliegue.

Para configurar los ajustes por defecto, crea un archivo netlify.toml con la siguiente configuración:

[build]
  command = "npm run build"
  publish = "dist"

¿Usas pnpm en Netlify? Utiliza los siguientes ajustes en su lugar:

[build.environment]
  NPM_FLAGS = "--version" # previene la instalación de npm en Netlify
[build]
  command = 'npx pnpm i --store=node_modules/.pnpm-store && npm run build'
  publish = 'dist'

📚 Más información en “Deploying an existing Astro Git repository” en el blog de Netlify.

También puedes crear un nuevo sitio en Netlify y vincularlo a tu repositorio de Git instalando y usando la CLI de Netlify.

  1. Instala la CLI de Netlify de manera global

    npm install --global netlify-cli
  2. Ejecuta la CLI y sigue las instrucciones para iniciar sesión y autorizar a Netlify

  3. Ejecuta netlify init y sigue las instrucciones

  4. Confirma tu comando de build (astro build)

    La CLI detectará automáticamente la configuración de build (astro build) y el directorio a desplegar (dist), y ofrecerá generar automáticamente un archivo netlify.toml con esos ajustes.

  5. Genera tu sitio y despliega enviando tus cambios a Git

    La CLI añadirá una deploy key al repositorio, lo que significa que tu sitio será generado automáticamente en Netlify cada vez que envíes tus cambios con git push.

📚 Más detalles de Netlify en Deploy an Astro site using the Netlify CLI

Establece una Versión de Node.js

Section titled Establece una Versión de Node.js

Si estás usando una build image antigua (Xenial) en Netlify, asegúrate que tu versión de Node.js esté configurada. Astro requiere v14.15.0, v16.0.0, o mayor.

Puedes especificar tu versión de Node.js en Netlify usando:

  • un archivo .nvmrc en tu directorio raíz.
  • una variable de entorno NODE_VERSION en los ajustes de tu sitio utilizando el dashboard de Netlify.

No se necesita configuración adicional para usar Netlify Functions con Astro. ¡Añade un directorio netlify/functions a la raíz de tu proyecto y sigue la documentación de Netlify Functions para comenzar!

More Deployment Guides

Filtrar por tipo de despliegue