Knowledge Base

Preserving for the future: Shell scripts, AoC, and more

owntracks with reverse proxy

bgstack15

Comments

I recently improved my owntracks deployment to put the frontends behind a reverse proxy! It took me some time to research, because I got distracted with websockets and CORS rabbit trails.

What ended up working was the following process.

Add these values to the config.js.

window.owntracks.config = {
    api: {
        baseUrl: "https://storage3.ipa.example.com/owntracks-map/",
    },
    router: {
        basePath: "/owntracks-map",
    },
};

Add to the Apache httpd reverse proxy virtual host(s) these configs. I bet some of this is redundant.

ProxyPreserveHost On
ProxyPass        /owntracks-map  http://server4.ipa.example.com:8085 upgrade=websocket
ProxyPassReverse /owntracks-map  http://server4.ipa.example.com:8085/ upgrade=websocket
ProxyPass        /owntracks-internal  http://server4.ipa.example.com:8083 upgrade=websocket
ProxyPassReverse /owntracks-internal  http://server4.ipa.example.com:8083/ upgrade=websocket
<Location "/owntracks-internal/ws">
   RequestHeader append X-Forwarded-Prefix "/owntracks"
   RequestHeader append X-Script-Name "/owntracks"
</Location>
<Location "/owntracks-internal">
   RequestHeader append X-Forwarded-Prefix "/owntracks"
   RequestHeader append X-Script-Name "/owntracks"
</Location>
<Location "/owntracks-internal/view/">
   RequestHeader append X-Forwarded-Prefix "/owntracks"
   RequestHeader append X-Script-Name "/owntracks"
</Location>
<Location "/owntracks-internal/static/">
   RequestHeader append X-Forwarded-Prefix "/owntracks"
   RequestHeader append X-Script-Name "/owntracks"
</Location>
<Location "/owntracks-map/ws">
   ProxyPass        http://server4.ipa.example.com:8085/ retry=3 connectiontimeout=5 timeout=8 upgrade=websocket
   ProxyPassReverse http://server4.ipa.example.com:8085/
   RequestHeader append X-Forwarded-Prefix "/owntracks-map/ws"
   RequestHeader append X-Script-Name "/owntracks-map/ws"
</Location> 
<Location "/owntracks-map/">
   ProxyPass        http://server4.ipa.example.com:8085/ retry=3 connectiontimeout=5 timeout=8 upgrade=websocket
   ProxyPassReverse http://server4.ipa.example.com:8085/
   RequestHeader append X-Forwarded-Prefix "/owntracks-map"
   RequestHeader append X-Script-Name "/owntracks-map"
</Location>

Please note that this /owntracks-internal is not the path used by the owntracks android clients. It is for the web view of the app with different authentication, and not the per-device auth used by owntracks.

And then the directory listing for these frontend paths is as follows.

<li><a href="/owntracks-map/">/owntracks-map/</a> Location tracking (<a href="/owntracks-internal/">bare app</a>)</li>

References

  1. Sticking the frontend behind a virtual path frontend/docs/config.md at main · owntracks/frontend
  2. Second part of reverse proxy frontend/docs/config.md at main · owntracks/frontend

Comments