Desplegando un Sitio hecho con Astro usando Apache (como cavernícolas)

Astro es un framework excelente para desarrollar sitios estáticos (Blogs de mierda), ya sea por su soporte a archivos de markdown, server islands, server side rendering, que todo se compile a HTML puro, etc.

Pero, hay un problema muy gordo que hasta la fecha no ha sido arreglado en la documentación de Astro, en la guía de despliegue solo salen los servicios de hosting sidosos que usan los soydevs, ¿qué hay de los que tenemos un VPS y queremos desplegar, acaso no se puede? Bueno, la verdad es que sí es posible, y realmente es muy sencillo. El día de hoy, les voy a compartir 2 maneras para desplegar su sitio de Astro. Acá te dejo el link de cada opción

Opción 1: Sin SSR

En el caso de que solo queramos crear un blog simple, que no use server side rendering y cosas que solo los soydevs aprovecharemos, puedes usar esto, lo bueno de esta configuración es que no tendrás que cambiar NADA del código fuente de tu sitio, es muy útil para los vagos como yo.

  1. Clona el repositorio del código fuente de tu sitio en tu VPS y ve al directorio donde se generó el sitio:

    Terminal window
    git clone https://codeberg.com/niggablox/astro-shitty-site.git
    cd astro-shitty-site/

  2. Instala dependencias de tu sitio y compílalo

    Terminal window
    npm install
    npm run build

  3. Activa los siguientes módulos de apache

    Terminal window
    sudo a2enmod rewrite
    sudo a2enmod ssl
    sudo a2enmod headers
    sudo a2enmod actions

  4. Crea un fichero .conf en /etc/apache2/sites-avaiable/ y usa esta configuración:

    # Esto muestra el sitio en HTTPS, ejemplo: http://tudominio.org, no redirecciona
    <VirtualHost *:80>
      ServerName tudominio.org
      DocumentRoot /var/www/website/dist
    

      ErrorDocument 404 /404.html
    

      <Directory /var/www/website/dist>
          Options +MultiViews
          AllowOverride All
          Require all granted
      </Directory>
    

      RewriteEngine On
      RewriteCond %{REQUEST_FILENAME} !-d
      RewriteCond %{REQUEST_FILENAME} !-f
      RewriteRule ^([^\.]+)$ $1/index.html [NC,L]
    </VirtualHost>
    

    # Esto es para tener tu sitio en HTTPS
    <VirtualHost *:443>
      ServerName tudominio.org
      DocumentRoot /var/www/website/dist
    

      ErrorDocument 404 /404.html
    

      Options +MultiViews
      RewriteEngine On
      RewriteCond %{REQUEST_FILENAME} !-d
      RewriteCond %{REQUEST_FILENAME} !-f
      RewriteRule ^([^\.]+)$ $1/index.html [NC,L]
    

      SSLEngine on
      SSLCertificateFile /etc/letsencrypt/live/tudominio.org/fullchain.pem
      SSLCertificateKeyFile /etc/letsencrypt/live/tudominio.org/privkey.pem
      SSLCertificateChainFile /etc/letsencrypt/live/tudominio.org/chain.pem
    </VirtualHost>

    NOTA: Recuerda cambiar tudominio.org por el dominio que vas a usar para alojar el sitio, puedes cambiarlo rápidamente usando VIM:

    :%s/tudominio.org/[acá debe ir tu dominio]/g

    Cuando ya hayas hecho esto, guarda el archivo con :wqa.

  5. Pide el certificado SSL con certbot:

    Terminal window
    sudo systemctl stop apache2
    sudo certbot certonly -d tudominio.org
    sudo systemctl start apache2

  6. FINALMENTE, al entrar a http://tudominio.com deberías ver tu sitio hecho con Astro

Opción 2: Con SSR

Para poder tener server side rendering, server islands y toda la mierda que usamos los soydevs. Correremos un servidor con node.js y usaremos Apache como Proxy Inverso. Para ello, debes de hacer unos cuantos cambios en tu código fuente de tu sitio:

  1. Cambia tu archivo astro.config.mjs para que utilice el adaptador de node.js, algo así:

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

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

  2. Guarda y verifica si el servidor de node.js funciona correctamente

    Terminal window
    npm run build
    node dist/server/entry.mjs

    El resultado debería ser tu sitio corriendo en http://localhost:4321.

  3. Si todo funciona, clona el repo como en el paso 1 de la primera Opción y compílalo.

  4. Instala pm2 para mantener el servidor corriendo en segundo plano:

    Terminal window
    npm install pm2 -g && pm2 install pm2-logrotate

  5. Configura pm2 para que inicie tu servidor:

    Terminal window
    pm2 start dist/server/entry.mjs --name [el-sapo-perro-nombre-que-le-de-la-hpta-gana-OwO]

  6. Activa los módulos necesarios para hacer proxy inverso en Apache:

    Terminal window
    sudo a2enmod proxy
    sudo a2enmod proxy_http
    sudo a2enmod headers

  7. Crea un fichero .conf en /etc/apache2/sites-avaiable/ y usa esta configuración:

    Terminal window
    <VirtualHost *:80>
      ServerName tudominio.org
      ProxyPreserveHost On
    

      ProxyPass / http://127.0.0.1:4321/
      ProxyPassReverse / http://127.0.0.1:4321/
    

      ErrorLog /dev/null
      CustomLog /dev/null
    </VirtualHost>
    

    <VirtualHost *:443>
      ServerName tudominio.org
      ProxyPreserveHost On
    

      ProxyPass / http://127.0.0.1:4321/
      ProxyPassReverse / http://127.0.0.1:4321/
    

      SSLEngine on
      SSLCertificateFile /etc/letsencrypt/live/tudominio.org/fullchain.pem
      SSLCertificateKeyFile /etc/letsencrypt/live/tudominio.org/privkey.pem
      SSLCertificateChainFile /etc/letsencrypt/live/tudominio.org/chain.pem
    

      ErrorLog /dev/null
      CustomLog /dev/null
    </VirtualHost>

    NOTA: Recuerda cambiar el dominio tudominio.org por el dominio o subdominio que vayas a usar. Con VIM, es muy facil cambiar esto:

    :%s/tudominio.org/[acá debe ir tu dominio]/g

  8. Pide el certificado SSL con certbot:

    Terminal window
    sudo systemctl stop apache2
    sudo certbot certonly -d tudominio.org
    sudo systemctl start apache2

  9. FINALMENTE, deberías ver tu sitio corriendo en https://tudominio.org

Bueno, espero que se esta guía haya sido útil para alguno de ustedes, creo que se hizo algo larga XD. Si tienen problemas, pueden escribirme directamente a mi XMPP.

Comentarios

¿Quieres comentar algo? Una pena, soy muy vago para programar algo así, lo que puedes hacer es escribir algo en Mi GuestBook