<WRAP rww-page-header>
<WRAP rww-page-header-main>
<WRAP rww-page-title>
====== Zugriff auf lokale Webseiten ======
</WRAP>

<WRAP rww-page-icon>
<iconify mdi:web>
</WRAP>
</WRAP>

<WRAP rww-page-back>
[[it_entwicklung:netzwerk_zugriff:tailscale:start|← Tailscale]] · [[:start|Startseite]]
</WRAP>
</WRAP>

----

Über Tailscale können die auf **EasyRider** betriebenen lokalen Webseiten auch von außerhalb des eigenen Heimnetzes aufgerufen werden.

Der Zugriff erfolgt über das private Tailscale-Netz. Eine Portfreigabe am Internet-Router ist nicht erforderlich.

===== Voraussetzungen =====

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.

===== EasyRider =====

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`

===== Smartphone =====

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

Vor dem Zugriff:

  - Internetverbindung über WLAN oder Mobilfunk herstellen.
  - Tailscale starten.
  - Prüfen, dass Tailscale **Connected** anzeigt.
  - Browser öffnen.
  - 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.

===== Webseiten und Ports =====

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

^ Webseite ^ Port ^ Adresse über Tailscale ^
| **RoWaWiki** | 8081 | `http://easyrider:8081` |
| **TheCruiserWiki** | 8082 | `http://easyrider:8082` |
| **TheCruiserBlog** | 8083 | `http://easyrider:8083` |

===== Apache – zusätzliche Ports =====

Apache muss auf den verwendeten Ports lauschen.

In:

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

sind folgende Einträge vorhanden:

<code apache>
Listen 80
Listen 8081
Listen 8082
Listen 8083
</code>

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

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

===== Apache – RoWaWiki =====

In:

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

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

<code apache>
# ============================================================
# 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>
</code>

===== Apache – TheCruiserWiki =====

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

<code apache>
# ============================================================
# 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>
</code>

===== Apache – TheCruiserBlog =====

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

<code apache>
# ============================================================
# 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>
</code>

===== Lokale VirtualHosts =====

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

Sie verwenden weiterhin:

<code apache>
Require local
</code>

Dadurch bleiben die bisherigen lokalen Adressen erhalten:

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

===== WordPress – TheCruiserBlog =====

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:

<code php>
/* That's all, stop editing! Happy publishing. */
</code>

folgender Block ergänzt:

<code php>
/* 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' );
}
</code>

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

^ Verwendung ^ Adresse ^
| Lokal auf EasyRider | `http://thecruiserblog.local` |
| Über Tailscale | `http://easyrider:8083` |

===== Sicherheit =====

Die Tailscale-VirtualHosts verwenden:

<code apache>
Require ip 100.64.0.0/10
</code>

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 Apache =====

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

Im XAMPP Control Panel:

  - Apache **Stop**
  - kurz warten
  - Apache **Start**

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

===== Fehlerbehebung =====

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

  - Ist EasyRider eingeschaltet?
  - Hat EasyRider eine Internetverbindung?
  - Läuft Tailscale auf EasyRider?
  - Ist EasyRider in Tailscale erreichbar?
  - Läuft Apache in XAMPP?
  - Hat das Smartphone eine Internetverbindung?
  - Ist Tailscale auf dem Smartphone **Connected**?
  - 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.

===== Schnellübersicht =====

**EasyRider:**

`Einschalten → Internet → Tailscale verbunden → Apache starten`

**Smartphone:**

`Internet → Tailscale Connected → Browser → Webseite aufrufen`

^ Anwendung ^ Adresse ^
| **RoWaWiki** | `http://easyrider:8081` |
| **TheCruiserWiki** | `http://easyrider:8082` |
| **TheCruiserBlog** | `http://easyrider:8083` |

<WRAP rww-to-top>
[[#zugriff_auf_lokale_webseiten|↑]]
</WRAP>