[ai] Hosting and accessing local websites while on Tailscale with nginx

If you’re hosting multiple websites on your Raspberry Pi and want to access them from your iPhone (or any other device outside your local network) using Tailscale, you can set up Nginx with reverse proxying and distinguish the websites by subdomains or URL paths. Here’s how to do it:

1. Access via Subdomains (Recommended)

Configure Nginx for Subdomains

You can configure server blocks in Nginx to serve different websites on different subdomains. For example:

site1.raspberrypi.tailnet-name.ts.net
site2.raspberrypi.tailnet-name.ts.net

Modify your Nginx configuration:

Create Separate Server Blocks

/etc/nginx/sites-available/site1.conf:

server {
    listen 80;
    server_name site1.raspberrypi.tailnet-name.ts.net;

    root /var/www/sites/site1/;
    index index.html;

    location / {
        try_files $uri $uri/ =404;
    }
}

/etc/nginx/sites-available/site2.conf:

server {
    listen 80;
    server_name site2.raspberrypi.tailnet-name.ts.net;

    root /var/www/sites/site2/;
    index index.html;

    location / {
        try_files $uri $uri/ =404;
    }
}

Enable the Configurations:

sudo ln -s /etc/nginx/sites-available/site1.conf /etc/nginx/sites-enabled/
sudo ln -s /etc/nginx/sites-available/site2.conf /etc/nginx/sites-enabled/
sudo systemctl restart nginx

Set Up DNS with Tailscale: In your Tailscale admin console, use Local DNS Settings to configure the subdomains to point to your Raspberry Pi’s Tailscale IP:
- site1.raspberrypi.tailnet-name.ts.net
- site2.raspberrypi.tailnet-name.ts.net
Access Your Websites:
- http://site1.raspberrypi.tailnet-name.ts.net
- http://site2.raspberrypi.tailnet-name.ts.net

2. Access via URL Paths

If you prefer not to use subdomains, you can serve the websites from different URL paths, such as:

raspberrypi.tailnet-name.ts.net/site1
raspberrypi.tailnet-name.ts.net/site2

Configure Nginx for URL Paths

Edit your Nginx configuration to use path-based routing:

Single Server Block

/etc/nginx/sites-available/multi-site.conf:

server {
    listen 80;
    server_name raspberrypi.tailnet-name.ts.net;

    location /site1/ {
        root /var/www/sites/site1/;
        index index.html;
        try_files $uri $uri/ =404;
    }

    location /site2/ {
        root /var/www/sites/site2/;
        index index.html;
        try_files $uri $uri/ =404;
    }
}

Enable the Configuration:

sudo ln -s /etc/nginx/sites-available/multi-site.conf /etc/nginx/sites-enabled/
sudo systemctl restart nginx

Access Your Websites:
- http://raspberrypi.tailnet-name.ts.net/site1
- http://raspberrypi.tailnet-name.ts.net/site2

3. Secure Your Sites with HTTPS

For secure access, enable HTTPS in Tailscale. When enabled, Tailscale automatically issues HTTPS certificates for your domains:

https://site1.raspberrypi.tailnet-name.ts.net
https://raspberrypi.tailnet-name.ts.net/site1

You can enable HTTPS for your Raspberry Pi in the DNS Settings section of the Tailscale admin console.

Summary

Subdomain Approach: Best for cleaner and more professional URLs (e.g., site1.raspberrypi.tailnet-name.ts.net).
Path-Based Approach: Easier to set up but may feel less intuitive (raspberrypi.tailnet-name.ts.net/site1).
Tailscale’s MagicDNS and HTTPS features make it seamless to access your websites securely from any device, anywhere.

1. Access via Subdomains (Recommended)#

Configure Nginx for Subdomains#

2. Access via URL Paths#

Configure Nginx for URL Paths#

3. Secure Your Sites with HTTPS#

Summary#