Despliegue de Astro en Producción

Hemos completado el ciclo de desarrollo. Tenemos una aplicación optimizada, con una arquitectura sólida… que solo funciona en tú equipo.

Ahora toca el momento de la verdad. Tenemos que construir la página web de verdad y desplegarla a un servidor para que todo el mundo pueda verla.

En este artículo abordaremos el despliegue de Astro priorizando el uso de un Servidor Privado Virtual (VPS), tanto para sitios estáticos como para aplicaciones renderizadas en el servidor (SSR). También repasaremos brevemente las opciones PaaS para prototipados rápidos.

Preparación del Artefacto (Build)

Independientemente del destino del despliegue, el primer paso es generar el código de producción. Astro compila nuestro código, optimiza imágenes y minifica los activos.

Este comando generará una carpeta dist/ en la raíz del proyecto. El contenido de esta carpeta variará según el modo configurado en astro.config.mjs:

Despliegue en VPS

Esta es la opción recomendada para tener control total y sin dependencias de terceros. Asumiremos un entorno Linux estándar (Ubuntu/Debian).

Sitio Estático (SSG)

Si tu proyecto es puramente estático (blog, documentación, landing page), el despliegue es muy sencillo. Solo necesitamos un servidor web eficiente como Nginx o Apache para servir la carpeta dist.

server {
    listen 80;
    server_name midominio.com;
    
    root /var/www/mi-proyecto;
    index index.html;

    location / {
        try_files $uri $uri/ /404.html;
    }

    # Caché agresiva para activos inmutables (Astro genera hashes en los nombres)
    location /_astro/ {
        expires 1y;
        add_header Cache-Control "public, immutable";
    }
}

Aplicación SSR (Node.js)

Si utilizamos output: 'server' o 'hybrid', necesitamos un entorno de ejecución. Para un VPS estándar, utilizaremos Node.js.

npx astro add node

import node from '@astrojs/node';

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

# Instalación global de PM2
npm install -g pm2

# Iniciar la aplicación
pm2 start dist/server/entry.mjs --name "mi-astro-app"

server {
    listen 80;
    server_name midominio.com;

    location / {
        proxy_pass http://localhost:4321; # Puerto donde corre Astro
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}

name: Deploy to VPS
on: [push]
jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with: { node-version: 18 }
      - run: npm ci && npm run build
      - name: Deploy to Server
        uses: easingthemes/ssh-deploy@main
        env:
            SSH_PRIVATE_KEY: ${{ secrets.SSH_KEY }}
            REMOTE_HOST: ${{ secrets.HOST }}
            REMOTE_USER: ${{ secrets.USER }}
            SOURCE: "dist/"
            TARGET: "/var/www/mi-proyecto"

FROM node:lts-alpine AS build
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build

FROM node:lts-alpine AS runtime
WORKDIR /app
COPY --from=build /app/dist ./dist
COPY --from=build /app/node_modules ./node_modules
COPY --from=build /app/package.json ./

ENV HOST=0.0.0.0
ENV PORT=4321
EXPOSE 4321
CMD ["node", "./dist/server/entry.mjs"]

Alternativas PaaS (Vercel / Netlify)

Si el proyecto no requiere una infraestructura dedicada o estamos en una fase de prototipado rápido, los servicios de Plataforma como Servicio (PaaS) son opciones válidas.

Estas plataformas abstraen la gestión del servidor y ofrecen CI/CD integrado (conectan con tu repositorio Git y despliegan al hacer push).