Unclouding the web: Interactive Static Sites via P2P

If you have 10gb of data stored on your home MiniPC and wanted to present it on a website, how would you go about it?

Would you

• Upload the data to a GCP, S3 or R2 bucket
• package the 10gb of data into your website source code
• Build a docker image containing the data and serve the website via nginx

Well all of these are suitable options but I really like the idea of serving the data from my MiniPC. If I've got a perfectly good home server, why would I want to upload everything to S3 and then worry about authentication, egress fees and access the data from a static website. If this sounds appealing you may be interested in Uncloud.

I set out trying to achieve the following goal

Access my data from anywhere with very minimal setup

To do this I needed to do the following

• Provision access using Peer To Peer Networking
• Have a messaging server that handles the WebRTC handshake
• Securely manage access to folders within my home server

Heres what the architecture looks like

Provision access using Peer To Peer Networking

Access is provisioned using p2p networking, the exact same way that multiplayer games work. Essentially it boils down to; Firewalls don't know which direction packages are flowing. I recommend this excellent article explaining how STUN works

Have a messaging server that handles the WebRTC handshake

This is the part that Uncloud implements. When you make the following api request, you send to Uncloud a list of ICE candidates (using Google's STUN server), Uncloud then ask's your storage node to do the same.

POST /api/public/node/{id}/exchangeCandidates

The api request will return your storage node's ICE candidates, after which your client (web browser) and your node can initiate a secure handshake using WebRTC.

Securely manage access to folders within my home server

This is implemented using Public Links, we can strictly control which folders can be read and which folders can be written to. Under the hood these links using JWTs with claims that are provisioned by a node and given to a client.

The Result

https://mperkins808.github.io/uncloud-p2p/ is a completely static site, that has access to my storage node.

It uses a work in progress npm package uncloud-p2p

uncloud-p2p

The package is pretty elegant for listing files, uploading files, and reading files.

Creating a client

import { UncloudP2P, ListFiles } from "uncloud-p2p";

const nodeId = "b51381e0-9e4b-4859-9ce6-3b05cdd15863";
const p2p = new UncloudP2P({ nodeId: nodeId });

Listing files

This lists all the files that my public link has access to.

const files = await ListFiles(p2p);
console.log(files); // [{…}, {…}, {…}, {…}, {…}, {…}, {…}]
console.log(files[0]);
// {
//     "MD5": "770a7597b2a5e770b84421fc7f0d4100",
//     "MimeType": "text/csv; charset=utf-8",
//     "Name": "stocks/AAPL.csv",
//     "SizeBytes": 151298
// },

Reading a file

const blob = await p2p.downloadToMemory("stocks/AAPL.csv");
const text = await blob.text();

Upload a file

await p2p.uploadFile("stock-results/view-count.txt", updatedViews.toString());