apache2 Proxy mit Cache
Ich nutze im ioBroker als Wetter Adapter Weather Undergound. Damit rasch das eigene Wetter abgefragt und in vis-2 mit Material-Design als HTML-Ausgabe dargestellt. Einfach, schlicht - tut es mir. Nur beziehe ich die Icons direkt von Weather Underground. Das muss doch auch anders gehen: Also hab ich mal eben einen apache2 Proxy davorgesetzt. Damit sind meine Zugriffe lokal und zusätzlich noch mit einem Cache. Es lohnt ja nicht jedes Bild immer und immer wieder zu laden - wenn man es doch in einem Cache ablegen könnte.
Bevor einer fragt: Ja, das ist sicherlich nicht sicher einfach so alles ohne irgendwelche Sicherheitsmaßnahmen umzusetzen. Das weiß ich auch. Zum einen läuft das bei mir nur intern und nicht öffentlich im Internet, zum anderen ging es mir um die Funktion. Ich wollte das einfach mal mit apache2 umgesetzt haben. Nicht mehr, nicht weniger 😉 Und betrachte dies als Beispiel: Bei mir war die Ausgangslage ioBroker. Wer weiß, was es bei Dir ist 😛
Das hier will ich haben:
Das aktuelle Wetter inklusive Vorhersage 😉
Und so ist es gelöst - einfach folgenden HTML-Code in einem "Vis 2 Material-Widgets HTML-Vorlage" einfügen:
<style>
.grid-container {
display: grid;
grid-template-columns: 64px auto;
gap: 5px;
padding: 5px;
font-size: 0.8em;
}
.grid-container div {
margin: auto 0;
}
.grid-container img {
width: 64px;
height: 64px;
}
</style>
<div class="grid-container">
<div>
<img src="{v:weatherunderground.0.forecast.0d.iconURL;alt:0_userdata.0.Wetter.Tagesvorhersage.VorhersageIcon;v?v:alt}">
</div>
<div>
<span style="font-weight:bold;">Jetzt</span><br>
{weatherunderground.0.forecast.current.temp} °C
</div>
<div>
<img src="{v:weatherunderground.0.forecast.0d.iconURL;alt:0_userdata.0.Wetter.Tagesvorhersage.VorhersageIcon;v?v:alt}">
</div>
<div>
<span style="font-weight:bold;">Heute: {weatherunderground.0.forecast.0d.date;date(DD.MM.YYYY)}</span>
<br>
{weatherunderground.0.forecast.0d.tempMin}
-
{weatherunderground.0.forecast.0d.tempMax} °C
({weatherunderground.0.forecast.0d.cloudCover} % Wolkendichte)
<br>
Regen: {weatherunderground.0.forecast.0d.precipitationChance} % ({weatherunderground.0.forecast.0d.precipitationAllDay} mm)
<br>
{weatherunderground.0.forecast.0d.state}
</div>
<div>
<img src="{weatherunderground.0.forecast.1d.iconURL}">
</div>
<div>
<span style="font-weight:bold;">{weatherunderground.0.forecast.1d.date;date(DD.MM.YYYY)}</span>
<br>
{weatherunderground.0.forecast.1d.tempMin}
-
{weatherunderground.0.forecast.1d.tempMax} °C
({weatherunderground.0.forecast.1d.cloudCover} % Wolkendichte)
<br>
Regen: {weatherunderground.0.forecast.1d.precipitationChance} % ({weatherunderground.0.forecast.1d.precipitationAllDay} mm)
<br>
{weatherunderground.0.forecast.1d.state}
</div>
<div>
<img src="{weatherunderground.0.forecast.2d.iconURL}">
</div>
<div>
<span style="font-weight:bold;">{weatherunderground.0.forecast.2d.date;date(DD.MM.YYYY)}</span>
<br>
{weatherunderground.0.forecast.2d.tempMin}
-
{weatherunderground.0.forecast.2d.tempMax} °C
({weatherunderground.0.forecast.2d.cloudCover} % Wolkendichte)
<br>
Regen: {weatherunderground.0.forecast.2d.precipitationChance} % ({weatherunderground.0.forecast.2d.precipitationAllDay} mm)
<br>
{weatherunderground.0.forecast.2d.state}
</div>
<div>
<img src="{weatherunderground.0.forecast.3d.iconURL}">
</div>
<div>
<span style="font-weight:bold;">{weatherunderground.0.forecast.3d.date;date(DD.MM.YYYY)}</span>
<br>
{weatherunderground.0.forecast.3d.tempMin}
-
{weatherunderground.0.forecast.3d.tempMax} °C
({weatherunderground.0.forecast.3d.cloudCover} % Wolkendichte)
<br>
Regen: {weatherunderground.0.forecast.3d.precipitationChance} % ({weatherunderground.0.forecast.3d.precipitationAllDay} mm)
<br>
{weatherunderground.0.forecast.3d.state}
</div>
<div>
<img src="{weatherunderground.0.forecast.4d.iconURL}">
</div>
<div>
<span style="font-weight:bold;">{weatherunderground.0.forecast.4d.date;date(DD.MM.YYYY)}</span>
<br>
{weatherunderground.0.forecast.4d.tempMin}
-
{weatherunderground.0.forecast.4d.tempMax} °C
({weatherunderground.0.forecast.4d.cloudCover} % Wolkendichte)
<br>
Regen: {weatherunderground.0.forecast.4d.precipitationChance} % ({weatherunderground.0.forecast.4d.precipitationAllDay} mm)
<br>
{weatherunderground.0.forecast.4d.state}
</div>
<div>
<img src="{weatherunderground.0.forecast.5d.iconURL}">
</div>
<div>
<span style="font-weight:bold;">{weatherunderground.0.forecast.5d.date;date(DD.MM.YYYY)}</span>
<br>
{weatherunderground.0.forecast.5d.tempMin}
-
{weatherunderground.0.forecast.5d.tempMax} °C
({weatherunderground.0.forecast.5d.cloudCover} % Wolkendichte)
<br>
Regen: {weatherunderground.0.forecast.5d.precipitationChance} % ({weatherunderground.0.forecast.5d.precipitationAllDay} mm)
<br>
{weatherunderground.0.forecast.5d.state}
</div>
</div>
Im Objekt {weatherunderground.0.forecast.0d.iconURL} stehen URLs wie diese hier: https://www.wunderground.com/static/i/c/v4/28.svg. Und ich hätte gerne, dass daraus das hier wird: https://10.96.100.66:8082/proxy.0/img/https://www.wunderground.com/static/i/c/v4/28.svg. Damit vis-2 keinen externen Apache direkt aufruft, nutze ich den Proxy-Adapter. In diesem ist folgender Pfad gesetzt: aus /proxy.0/img/... mache https://10.96.100.66:4444/img/... wie in folgendem Screenshot gezeigt:
ioBroker Proxy-Adapter Pfad-Einstellung
So wie ich vis-2 in meinem Webbrowser öffne und mir die Wettervorhersage anschaue, werden im Webbrowser die Bilder über die gleiche Adresse geladen, wie vis-2 selbst. Im Hintergrund setzt der Proxy-Adapter, wie oben gezeigt, die Anfragen auf den lokal installieren apache2 um - welcher die Proxy Anfragen an Port 4444 annimmt.
Dazu habe ich in der apache2 Konfig einen neuen vhost angelegt. Dieser lauscht auf Port 4444 und ist via https erreichbar. Als Cache nutze ich das apache2 Modul cache_disk. Damit das korrekt funktioniert, lasse ich die eventuell von der eigentlichen Anfrage gelieferten Header zum Caching durch meine eigenen überschreiben. Als nächstes wird die URL umgeschrieben. Aus https://<meine ioBroker>:4444/img/<https://das eigentliche Bild> soll einfach der Teil nach /img/ extrahiert und als eigentliche Bild-Quelle verwendet werden. Hier gibt es lediglich einen kleinen Haken: apache2 ersetzt // bei https:// durch einen /. Es wird aus der URL also http:/<wohin auch immer>. Deswegen wird die neue URL aus dem Protokoll, verbunden durch einen / und der eigentlichen Anfrage, zusammengesetzt. Sollte es zu einem Fehler kommen, lasse ich ein fallback.svg anzeigen. Und zuletzt lasse ich noch in die Standardlogdaten entsprechende Hinweise eintragen.
So sieht das ganze aus:
Listen 4444
<VirtualHost *:4444>
ServerName imgprx.gehirn-mag.net.internal
SSLEngine on
SSLCertificateFile /etc/apache2/ssl/fullchain.pem
SSLCertificateKeyFile /etc/apache2/ssl/key.pem
# --- Caching ---
Header unset Cache-Control
Header unset Pragma
Header set Cache-Control "public, max-age=86400"
CacheQuickHandler off
CacheLock on
CacheLockPath /tmp/mod_cache-lock
CacheIgnoreHeaders Set-Cookie Cache-Control Pragma Expires
CacheRoot /var/cache/apache2/mod_cache_disk
CacheEnable disk /
CacheDisable /fallback.svg
CacheDefaultExpire 604800
CacheMaxExpire 604800
# --- URL Rewrite für /img/<https://asfasfdsa> ---
# Apache macht aus https://bla... https:/bla... <-- Split in zwei Teile
SSLProxyEngine On
RewriteEngine On
RewriteRule ^/img/(https?:)(.+)$ - [E=TARGET:$1/$2,E=TPROTO:$1,E=TURL:$2]
RewriteCond %{ENV:TARGET} !=""
RewriteRule ^(.*)$ %{ENV:TARGET} [P,L]
# --- Fallback bei Fehlern ---
ProxyErrorOverride On
ErrorDocument 404 /fallback.svg
ErrorDocument 500 /fallback.svg
ErrorDocument 502 /fallback.svg
ErrorDocument 503 /fallback.svg
ErrorDocument 504 /fallback.svg
Alias /fallback.svg /var/www/vhosts/proxy/fallback.svg
# --- Log ---
CustomLog /var/log/apache2/other_vhosts_access.log "%h %l %u %t \"%r\" %>s %b \"cache:%{cache-status}e\" \"target:%{TARGET}e\""
ErrorLog /var/log/apache2/error.log
</VirtualHost>
Im HTML-Vorlage Widget vom ioBroker habe ich die URLs nun wie folgen geändert: <img src="/proxy.0/img/{weatherunderground.0.forecast.1d.iconURL}">. Also lediglich ein /proxy.0/img vorangestellt. Bekommen habe ich also, dass im Webbrowser die externen Bilder ebenfalls über vis-2 geladen werden. Allerdings geht im Hintergrund ein apache2 ran, welcher die gewünschten Bilder aus dem Internet im Sinne eines Proxys lädt und diese sogar noch in einem Cache ablegt.
Und, nochmals erwähnt: Das läuft bei mir nur intern. Letztendlich lädt dieser Proxy alles aus dem Netz, was hinter /img/ steht. Sollte man das also wirklich ungeschützt ins Internet packen wollen, dann wären noch diverse weitere Einstellungen zum Thema Sicherheit sehr sinnvoll. Für meine Zwecke, wo ich im ersten Schritt nur wissen wollte, ob und wie man so etwas in apache2 lösen kann, tut es das mehr wie Dicke. Ich weiß, dass es geht - denn ich habe eine lauffähige Konfig 😀
