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:
git clone https://codeberg.com/niggablox/astro-shitty-site.git cd astro-shitty-site/
-
Instala dependencias de tu sitio y compílalo
npm install npm run build
-
Activa los siguientes módulos de apache
sudo a2enmod rewrite sudo a2enmod ssl sudo a2enmod headers sudo 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.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
. -
Pide el certificado SSL con certbot:
sudo systemctl stop apache2 sudo certbot certonly -d tudominio.org sudo 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
npm run build node dist/server/entry.mjs
El 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:
npm install pm2 -g && pm2 install pm2-logrotate
-
Configura pm2 para que inicie tu servidor:
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:
sudo a2enmod proxy sudo a2enmod proxy_http sudo a2enmod headers
-
Crea un fichero
.conf
en/etc/apache2/sites-avaiable/
y usa esta configuración:<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
-
Pide el certificado SSL con certbot:
sudo systemctl stop apache2 sudo certbot certonly -d tudominio.org sudo 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