DEV Community

Cover image for Como alojar tu sitio web en IPFS con tu dominio Handshake HNS - dweb
.cryptojei/
.cryptojei/

Posted on

Como alojar tu sitio web en IPFS con tu dominio Handshake HNS - dweb

#dweb #web3 #handshaked #webdev

Últimamente se puesto muy de moda el termino web3, que trae un abanico de nuevas soluciones a la web tradicional dentro del que esta IPFS (sistema de archivos interplanetario), con el que empezamos a pensar un alojamiento descentralizado sostenible en el tiempo, en esta pequeña guía te enseñare a desplegar un nodo local de IPFS y almacenar los sitios web que desees y poder publicarlos en internet con un dominio TLD totalmente descentralizado y de manera segura gracias a handshake.

Requisitos:
Dominio Handshake ← puedes comprar uno aqui
Servidor 1gb o 2gb ram

1. Instalar tu nodo IPFS

En esta guia nos centraremos en sistemas operativos linux, si quieres una guia para windows hasmelo saber

Iniciamos actualizando librerias e instalando algunas dependencias:

apt-get update
apt-get install tar wget
Enter fullscreen mode Exit fullscreen mode

Descargamos la ultima version de los binarios e instalamos:

wget https://dist.ipfs.io/go-ipfs/v0.12.0/go-ipfs_v0.12.0_linux-amd64.tar.gz
tar xfv go-ipfs_v0.12.0_linux-amd64.tar.gz
cp go-ipfs/ipfs /usr/local/bin/
Enter fullscreen mode Exit fullscreen mode

Por lo general, no es una buena idea ejecutar un servicio público como root. Así que cree una nueva cuenta de usuario para ejecutar IPFS y cambie a ella:

adduser ipfs
su ipfs
Enter fullscreen mode Exit fullscreen mode

Iniciamos IPFS:

ipfs init --profile=server
Enter fullscreen mode Exit fullscreen mode

Ya podrias iniciar ipfs demon pero configuraremos IPFS para que inicie con el servidor

volvemos a usuario root:

exit
o
sudo su
Enter fullscreen mode Exit fullscreen mode

Permite que el usuario ipfs ejecute servicios de ejecución prolongada habilitando la persistencia del usuario para ese usuario:

loginctl enable-linger ipfs
Enter fullscreen mode Exit fullscreen mode

Cree el archivo ipfs.service:

mkdir /etc/systemd/system/ipfs.service
Enter fullscreen mode Exit fullscreen mode

Con este contenido:

[Unit]
Description=IPFS daemon

[Service]
User=ipfs
Group=ipfs
ExecStart=/usr/local/bin/ipfs daemon --enable-gc
Restart=on-failure

[Install]
WantedBy=multi-user.target
Enter fullscreen mode Exit fullscreen mode

Habilite e inicie el servicio:

systemctl enable ipfs
systemctl start ipfs
Enter fullscreen mode Exit fullscreen mode

Ahora IPFS debería estar en funcionamiento y comenzara cuando se inicie el servidor.

Volvemos al usuario Ipfs e iniciamos el nodo:

su ipfs
ipfs swarm peers
Enter fullscreen mode Exit fullscreen mode

Seguido veremos algunos pares dentro de la red, perfecto todo a sido un exito

2. Agregar los datos de tu sitio web a IPFS
Ahora que tiene IPFS ejecutándose en su servidor, agregue su sitio web:

ipfs add -r <path/react-app/build>
Enter fullscreen mode Exit fullscreen mode

Esto agrega todo el contenido de la carpeta en a IPFS, recursivamente. Deberías ver un resultado similar a este

added QmcrBxpSJ8if6Uy7yZbtyXXsPuUmvT5KKfZKQi39kVJ5aW <path>/images/fritz.png
added QmauwH6KDTGaTeAdQJbW9wZEGczjzSu9EceeasPUXo2qz9 <path>/index.html
added Qmd9JiiVRTyyY1Tn2CWDLrkqqKFaMiwaAvAASTE88yyXAC <path>/images
added QmaFrmEDFJXnYJb9hCrKDGs8XVvSUALzhv297W3uP97v2Y <path>
Enter fullscreen mode Exit fullscreen mode

Guarda el último multi-hash (aquí: QmaFrmED…, el tuyo será diferente). Su sitio web ahora está agregado a IPFS. Puede verlo en la puerta de enlace ipfs.io ahora: https://ipfs.io/ipfs/QmaFrmED.... O en su local en localhost:8080. O en cualquier otra puerta de enlace.
Una recomendacion es repetir este proceso al actualizar el sitio ya que si actuliza sobre el mismo hash IPFS puede causar enlaces rotos

3. Configuarar tus DNS Handshake HNS

Inicialmente en este caso usaremos Namebase y nuestro servidor privado para crear nuestro regitros dns.

- NAMEBASE
Ingresamos al apartado de administracion de dominio de namebase:

Image description
Crearemos un regitros A asia la ip de nuestro servidor ya que

contamos con un nodo IPFS local:
Image description

En caso de que quiera usar un getaway externo usa un registro CName apuntando al getaway deceado:
Image description

Si usas esta opcion tendras problemas para tener una coneccion segura SSL

Ya que nuestro dominio pricipal esta apuntando a nuestro getaway podemos crear nustro dlink en un rcord TXT:

dnslink=/ipfs/QmaFrmEDFJXnYJb9hCrKDGs8XVvSUALzhv297W3uP97v2Y
Enter fullscreen mode Exit fullscreen mode

Tienes que usar el hash de la carpeta IPFS que te pedimos guardar en uno de los pasos anteriores

Image description

Listo ya tienes listos tus registros dns, esto tambien creara un ipns con el nombre de tu dominio en el caso de domonios icann esperamos pronto resuelva dominios HNS de igual manera

4. Configurar nuestro servidor

En este caso usaramos el servidor NGINX esto para usarlo como proxy asia el getaway y nuestro dominio dentro de la red IPFS
Recuerda que los puertos 80 y 443 de tu servidor deben estra abiertos para permitir el trafico web

apt-get update && apt-get install nginx
Enter fullscreen mode Exit fullscreen mode

Editamos o creamos el archivo conf de nuestro servidor:

nano /etc/nginx/sites-available/default
Enter fullscreen mode Exit fullscreen mode

Con el siguiente contenido:

server {
    server_name tudominio;
    server_tokens off;

    listen 80;
    listen [::]:80;
    listen 443 ssl;
    listen [::]:443 ssl;

    location / {
        proxy_pass http://127.0.0.1:8080;
        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;
    }
}
Enter fullscreen mode Exit fullscreen mode

Esto enviará todas las solicitudes a tudominio a su puerta de enlace IPFS que se ejecuta en localhost:8080.

Agregamos seguridad:

server {
  location /ipns/ {
    return 404;
  }

  location /ipfs/ {
    return 404;
  }
}
Enter fullscreen mode Exit fullscreen mode

Agrega esto en la ultima linea, evitaria que usuarios externos hagan otras solicitudes a IPFS afectando el acho de banda de tu servidor

Verificamos que todo este correcto y reiniciamos el servidor:

nginx -t
systemctl reload nginx
Enter fullscreen mode Exit fullscreen mode

Nota importante:
Agregar los nameserver de hdns.io a tu servidor para una correcta resolucion de los dominios handshake

103.196.38.38
103.196.38.39
Enter fullscreen mode Exit fullscreen mode

5. Configurar coneccion segura DANE

Instala cerbot para generar los certificados:

add-apt-repository ppa:certbot/certbot
apt-get update
apt-get install python-certbot-nginx
Enter fullscreen mode Exit fullscreen mode

Generemos los certificados DANE:

sudo certbot --nginx -d tudominiotld --server https://acme.htools.work/directory --reuse-key
Enter fullscreen mode Exit fullscreen mode

En este caso no usaremos el api de letsencrypt, usaremos un api proporcionada por Rithvik Vibhu para generar certificados auntofirmados DANE

Creamos Record TLSA:

En este caso para la validacion completa del certificado DANE tienes que crear otro registro en tu dns con el contenido de tu llave publica aqui te explico como generarlo.

Primero iremos a la ruta donde se generaron nuestros certificados DANE:

cd /etc/letsencrypt/live/tudominio
Enter fullscreen mode Exit fullscreen mode

Ahora ejecutamos el siguiente comando:

echo -n "3 1 1 " && openssl x509 -in fullchain.pem -pubkey -noout | openssl pkey -pubin -outform der | openssl dgst -sha256 -binary | xxd  -p -u -c 32
Enter fullscreen mode Exit fullscreen mode

esto nos arrojara el contenido de nuestro registro

3 1 1 03ED84FCD533CD930D46B1D219263BF3EC027F4E927143EE805A43C7422041A9
Enter fullscreen mode Exit fullscreen mode

Creamos un registro TLSA en ruestro dns:

Image description

_443._tcp.tudominio     3600    IN      TLSA    3 1 1 03ED84FCD533CD930D46B1D219263BF3EC027F4E927143EE805A43C7422041A9
Enter fullscreen mode Exit fullscreen mode

Hemos terminado y con un resultado exitoso

Image description

Lo hemos logrado, les quiero recordar que los DNS en handshake se actualizan cada 6 horas asi que tienen que coordinar su tiempo de trabajo para no quedarte esperando ese tiempo

Top comments (0)

Read next

jamescroissant profile image

What React beginners should know about React 19 first.

Yu Hamada -

balastrong profile image

What I DON'T like about shadcn/ui

Leonardo Montini -

zag profile image

Podlite v1.0 released: A lightweight block-oriented markup language for organizing knowledge

Alexandr Zahatski -

ivordev profile image

Designing React Hooks for Flexibility

Ivor -