Zugriff auf lokale Webseiten

Damit der Zugriff funktioniert, müssen sowohl EasyRider als auch das zugreifende Gerät mit Tailscale verbunden sein.

Auf EasyRider müssen außerdem Apache und die benötigten lokalen Dienste laufen.

Für den Zugriff müssen auf EasyRider folgende Voraussetzungen erfüllt sein:

• EasyRider ist eingeschaltet.
• Eine Internetverbindung besteht.
• Tailscale läuft und ist verbunden.
• XAMPP ist gestartet.
• Apache läuft.

EasyRider ist über MagicDNS unter folgendem Namen erreichbar:

`easyrider`

Auf dem Smartphone muss Tailscale installiert und mit demselben Tailscale-Netz wie EasyRider verbunden sein.

Vor dem Zugriff:

1. Internetverbindung über WLAN oder Mobilfunk herstellen.
2. Tailscale starten.
3. Prüfen, dass Tailscale Connected anzeigt.
4. Browser öffnen.
5. Gewünschte Webseite über die entsprechende Adresse aufrufen.

Eine Exit Node wird für diesen Zugriff nicht benötigt.

Die Einstellung Choose exit node kann auf None bleiben.

Die lokalen Webseiten werden über getrennte Apache-Ports bereitgestellt.

Apache muss auf den verwendeten Ports lauschen.

In:

`E:\xampp\apache\conf\httpd.conf`

sind folgende Einträge vorhanden:

Listen 80
Listen 8081
Listen 8082
Listen 8083

Port 80 wird weiterhin für die normalen lokalen VirtualHosts verwendet.

Die Ports 8081 bis 8083 dienen dem Zugriff über Tailscale.

In:

`E:\xampp\apache\conf\extra\httpd-vhosts.conf`

ist für RoWaWiki folgender zusätzlicher VirtualHost eingerichtet:

# ============================================================
# RoWaWiki – Zugriff über Tailscale
# ============================================================
 
<VirtualHost *:8081>
    DocumentRoot "E:/xampp/htdocs/rowawiki"
 
    <Directory "E:/xampp/htdocs/rowawiki">
        Options FollowSymLinks
        AllowOverride All
        Require ip 100.64.0.0/10
    </Directory>
 
    DirectoryIndex index.php index.html
 
    ErrorLog "logs/rowawiki-tailscale-error.log"
    CustomLog "logs/rowawiki-tailscale-access.log" combined
</VirtualHost>

Für TheCruiserWiki ist folgender zusätzlicher VirtualHost eingerichtet:

# ============================================================
# TheCruiserWiki – Zugriff über Tailscale
# ============================================================
 
<VirtualHost *:8082>
    DocumentRoot "E:/xampp/htdocs/thecruiserwiki"
 
    <Directory "E:/xampp/htdocs/thecruiserwiki">
        Options FollowSymLinks
        AllowOverride All
        Require ip 100.64.0.0/10
    </Directory>
 
    DirectoryIndex index.php index.html
 
    ErrorLog "logs/thecruiserwiki-tailscale-error.log"
    CustomLog "logs/thecruiserwiki-tailscale-access.log" combined
</VirtualHost>

Für TheCruiserBlog ist folgender zusätzlicher VirtualHost eingerichtet:

# ============================================================
# TheCruiserBlog – Zugriff über Tailscale
# ============================================================
 
<VirtualHost *:8083>
    DocumentRoot "E:/xampp/htdocs/thecruiserblog"
 
    <Directory "E:/xampp/htdocs/thecruiserblog">
        Options FollowSymLinks
        AllowOverride All
        Require ip 100.64.0.0/10
    </Directory>
 
    DirectoryIndex index.php index.html
 
    ErrorLog "logs/thecruiserblog-tailscale-error.log"
    CustomLog "logs/thecruiserblog-tailscale-access.log" combined
</VirtualHost>

Die normalen lokalen VirtualHosts auf Port 80 bleiben vom Tailscale-Zugriff getrennt.

Sie verwenden weiterhin:

Require local

Dadurch bleiben die bisherigen lokalen Adressen erhalten:

• `http://rowawiki.local`
• `http://thecruiserwiki.local`
• `http://thecruiserblog.local`

WordPress verwendet lokal weiterhin:

`http://thecruiserblog.local`

als WordPress- und Website-Adresse.

Damit WordPress beim Zugriff über Tailscale CSS, JavaScript, Bilder und andere Ressourcen über die richtige Adresse ausliefert, wurde in:

`E:\xampp\htdocs\thecruiserblog\wp-config.php`

vor:

/* That's all, stop editing! Happy publishing. */

folgender Block ergänzt:

/* Zugriff über Tailscale */
if ( isset($_SERVER['HTTP_HOST']) && $_SERVER['HTTP_HOST'] === 'easyrider:8083' ) {
    define( 'WP_HOME', 'http://easyrider:8083' );
    define( 'WP_SITEURL', 'http://easyrider:8083' );
}

Dadurch kann dieselbe WordPress-Installation über beide Adressen verwendet werden:

Die Tailscale-VirtualHosts verwenden:

Require ip 100.64.0.0/10

Damit akzeptiert Apache für diese VirtualHosts nur Verbindungen aus dem von Tailscale verwendeten IPv4-Adressbereich.

Es wurde keine Portfreigabe am Internet-Router eingerichtet.

Die Webseiten werden daher nicht über diese Ports direkt für das öffentliche Internet bereitgestellt.

Nach Änderungen an `httpd.conf` oder `httpd-vhosts.conf` muss Apache neu gestartet werden.

Im XAMPP Control Panel:

1. Apache Stop
2. kurz warten
3. Apache Start

Anschließend prüfen, ob Apache wieder ordnungsgemäß läuft.

Wenn eine Webseite von unterwegs nicht erreichbar ist, zunächst folgende Punkte prüfen:

1. Ist EasyRider eingeschaltet?
2. Hat EasyRider eine Internetverbindung?
3. Läuft Tailscale auf EasyRider?
4. Ist EasyRider in Tailscale erreichbar?
5. Läuft Apache in XAMPP?
6. Hat das Smartphone eine Internetverbindung?
7. Ist Tailscale auf dem Smartphone Connected?
8. Wird die richtige Adresse einschließlich Port verwendet?

Beispiel für RoWaWiki:

`http://easyrider:8081`

Ein Aufruf von:

`http://easyrider`

ohne Port führt nicht zu einem der speziell eingerichteten Tailscale-VirtualHosts.

EasyRider:

`Einschalten → Internet → Tailscale verbunden → Apache starten`

Smartphone:

`Internet → Tailscale Connected → Browser → Webseite aufrufen`