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.
-
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.gitcd astro-shitty-site/ -
Instala dependencias de tu sitio y compílalo
Terminal window npm installnpm run build -
Activa los siguientes módulos de apache
Terminal window sudo a2enmod rewritesudo a2enmod sslsudo a2enmod headerssudo a2enmod actions -
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.orgDocumentRoot /var/www/website/distErrorDocument 404 /404.html<Directory /var/www/website/dist>Options +MultiViewsAllowOverride AllRequire all granted</Directory>RewriteEngine OnRewriteCond %{REQUEST_FILENAME} !-dRewriteCond %{REQUEST_FILENAME} !-fRewriteRule ^([^\.]+)$ $1/index.html [NC,L]</VirtualHost># Esto es para tener tu sitio en HTTPS<VirtualHost *:443>ServerName tudominio.orgDocumentRoot /var/www/website/distErrorDocument 404 /404.htmlOptions +MultiViewsRewriteEngine OnRewriteCond %{REQUEST_FILENAME} !-dRewriteCond %{REQUEST_FILENAME} !-fRewriteRule ^([^\.]+)$ $1/index.html [NC,L]SSLEngine onSSLCertificateFile /etc/letsencrypt/live/tudominio.org/fullchain.pemSSLCertificateKeyFile /etc/letsencrypt/live/tudominio.org/privkey.pemSSLCertificateChainFile /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]/gCuando ya hayas hecho esto, guarda el archivo con
:wqa
. -
Pide el certificado SSL con certbot:
Terminal window sudo systemctl stop apache2sudo certbot certonly -d tudominio.orgsudo systemctl start apache2 -
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:
-
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',}),}); -
Guarda y verifica si el servidor de node.js funciona correctamente
Terminal window npm run buildnode dist/server/entry.mjsEl resultado debería ser tu sitio corriendo en
http://localhost:4321
. -
Si todo funciona, clona el repo como en el paso 1 de la primera Opción y compílalo.
-
Instala pm2 para mantener el servidor corriendo en segundo plano:
Terminal window npm install pm2 -g && pm2 install pm2-logrotate -
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] -
Activa los módulos necesarios para hacer proxy inverso en Apache:
Terminal window sudo a2enmod proxysudo a2enmod proxy_httpsudo a2enmod headers -
Crea un fichero
.conf
en/etc/apache2/sites-avaiable/
y usa esta configuración:Terminal window <VirtualHost *:80>ServerName tudominio.orgProxyPreserveHost OnProxyPass / http://127.0.0.1:4321/ProxyPassReverse / http://127.0.0.1:4321/ErrorLog /dev/nullCustomLog /dev/null</VirtualHost><VirtualHost *:443>ServerName tudominio.orgProxyPreserveHost OnProxyPass / http://127.0.0.1:4321/ProxyPassReverse / http://127.0.0.1:4321/SSLEngine onSSLCertificateFile /etc/letsencrypt/live/tudominio.org/fullchain.pemSSLCertificateKeyFile /etc/letsencrypt/live/tudominio.org/privkey.pemSSLCertificateChainFile /etc/letsencrypt/live/tudominio.org/chain.pemErrorLog /dev/nullCustomLog /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 -
Pide el certificado SSL con certbot:
Terminal window sudo systemctl stop apache2sudo certbot certonly -d tudominio.orgsudo systemctl start apache2 -
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