1

I'm struggeling for days now to route a subdomain with SSL to a local running vue app, specifically the directus admin ui.

I've done this before, like with the tool monit, and it worked like a charm:

<VirtualHost *:80>
  ServerName monit.mydomain.com
  Redirect permanent / https://monit.mydomain.com
</VirtualHost>
    
<VirtualHost *:443>
  ServerName monit.mydomain.com
  ProxyPass / http://localhost:2828/
  Include /etc/apache2/include.conf  <-- holds the key & certificate infos
</VirtualHost>

But with the directus admin ui, which is running on localhost:3000, this doesn't work, and apache gives me no error output at all, but shows some access logs, for example:

<IP> - - [14/Apr/2021:00:10:36 +0200] "GET /admin/js/chunk-vendors.8f8dd28c.js HTTP/1.1" 404 418 "https://admin.mydomain.com/app1/" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.114 Safari/537.36 Edg/89.0.774.75"

The Browser simply shows:

GET https://admin.mydomain.com/admin/js/app.0038e4e5.js net::ERR_ABORTED 404 (Not Found)

The VirtualHost config I use is:

<VirtualHost *:80>
  ServerName admin.mydomain.com
  Redirect Permanent / https://admin.mydomain.com
</VirtualHost>

<VirtualHost *:443>
  ServerName admin.mydomain.com
  Include /etc/apache2/include.conf
  RewriteEngine on
  RewriteRule ^/app1/(.*)$ http://localhost:3000/admin/$1 [proxy,last]
  ProxyPassReverse /app1http://127.0.0.1:3000/
</VirtualHost>

The reason for /app1 is that later I want to route admin uis for several apps, each running on a different port, like /app1 -> http://localhost:3000, /app2 -> http://localhost:3100

Hope someone could give me a hint to solve this, thanks in advance!

sagerobert
  • 119
  • 3
  • first match trailing slashes, if source ends in / destination must also end the same. – Daniel Ferradal Apr 14 '21 at 14:11
  • `ProxyPassReverse /app1http://127.0.0.1:3000/` - You are also missing a _space_ between your arguments. (Or is that just a typo in your question?!) – MrWhite Apr 14 '21 at 14:18
  • @MrWhite: It's just a typo, in reality there is a space between /app1/ and http://locahost :-) – sagerobert Apr 14 '21 at 17:36
  • It works great if I use no subdir: ProxyPass / http://localhost:3000/ ProxyPassReverse / http://localhost:3000/ But if I add the subdir ProxyPass /app1/ http://localhost:3000/ ProxyPassReverse /app1/ http://localhost:3000/ the browser redirects to `https://admin.mydomain.com/app1/admin/` and the errors like `https://admin.mydomain.com/admin/js/app.0038e4e5.js NOT FOUND` (notice the missing "app1") pops up. A `curl --insecure -H 'Host: admin.mydomain.com' -is https://127.0.0.1/app1/` on the server returns the html document... – sagerobert Apr 14 '21 at 17:46
  • you mean the backend is redirecting you to /admin/ instead of app1? That would make more sense. Perhaps what you need is more specific proxypassreverse or even mod_proxy_html if the paths in the html you receive from the backend are not relative. – Daniel Ferradal Apr 15 '21 at 15:23
  • Yes the backend is redirecting me, the browser just shows it. Thanks for the hint with the `mod_proxy_html`, I'll digg in and try! – sagerobert Apr 15 '21 at 19:16

1 Answers1

1

Why are you mixing RewriteRule with ProxyPassReverse? The following should do

ProxyPass /app1/ http://localhost:3000/admin/
ProxyPassReverse /app1/ http://localhost:3000/admin/

You could test on your reverse-proxy using the following

curl --insecure -H 'Host: admin.mydomain.com' -is https://127.0.0.1/app1/

Testing configurations using curl is more useful for troubleshooting in my experience, particularly when redirects are involved.

Cameron Kerr
  • 4,069
  • 19
  • 25
  • Why are you mixing RewriteRule with ProxyPassReverse? As far as I remember, I tried every combination with the monit VirtualHost until it worked :-) The ProxyPass-Directives above shows similar errors, but the curl statement gives an interesting output: HTTP/1.1 302 Found Date: Wed, 14 Apr 2021 07:53:00 GMT Server: Apache X-Powered-By: Directus Vary: Origin,Accept Access-Control-Allow-Credentials: true Access-Control-Expose-Headers: Content-Range Location: ./admin/ Content-Type: text/plain; charset=utf-8 Content-Length: 30 Found. Redirecting to ./admin/ – sagerobert Apr 14 '21 at 07:55
  • Also interesting is the browser error message `GET https://admin.mydomain.com/admin/js/app.0038e4e5.js net::ERR_ABORTED 404 (Not Found)` but when i manually navigate to `https://admin.mydomain.com/app1/admin/js/app.0038e4e5.js` the browser shows the correct file... – sagerobert Apr 14 '21 at 07:57