0

I would like to run apache2 and a node.js app on my webserver simultaneously. I'd like my website on www.example.com/myApp to run my app (proxied from port 8080), and everything else on www.example.com/* to be run by apache (normally on port 80). I've read a couple of questions about this on StackOverflow but I couldn't get it to work properly.

I am using 

yarn start --port 8080 --host 0.0.0.0 --disable-host-check

to start my app.

In order to do this I was changing values in my apache.conf file on my Ubuntu 18.04 VM. I am running my app with yarn.

I enabled

sudo a2enmod proxy && sudo a2enmod proxy_http

and I have these lines in my config file:

LoadModule proxy_module modules/mod_proxy.so
LoadModule proxy_http_module modules/mod_proxy_http.so
ServerName example.com
ProxyPreserveHost On
ProxyRequests Off

If I add

ProxyPass / http://localhost:8080/
ProxyPassReverse / http://localhost:8080/

to my apache.conf file, the app runs successfully on www.example.com. However, I can only access directories from the folder in which the app is installed/running. I cannot access apache's directories.

If instead I add

ProxyPass /myApp/ http://localhost:8080/
ProxyPassReverse /myApp/ http://localhost:8080/

then the app runs on www.example.com/myApp, which IS what I wanted, but it does not run correctly anymore, and I don't know why. Every other url on the website points to my apache dir (/var/www/html) which is also what I wanted.

The app always works properly on localhost:8080.

I have no experience with these things and it feels like I'm really close with the second solution, but I must be missing something since the app stops working correctly.

GChuf
  • 1,135
  • 1
  • 17
  • 28
  • What do you mean by ``it does not run correctly anymore`` – Soulimane Mammar Mar 06 '19 at 12:08
  • The app on localhost always runs correctly - it's an app that plays audio files. However, when I open www.exampple.com/myApp, all I can see is an error message which says "Your browser does not support the features we need," which obviously isn't the problem. – GChuf Mar 06 '19 at 12:11
  • is the page loaded as it should (I'm taking about the htm and css) – Soulimane Mammar Mar 06 '19 at 12:51
  • No, the page isn't loaded correctly. There are some pictures displayed and their sizes are incorrect. Hyperlinks work though. I just discovered that if I delete the last slash symbol like this: `ProxyPass / http://0.0.0.0:8080` `ProxyPassReverse / http://0.0.0.0:8080` I get the same error. There must be some problem with calling the wrong app directory I think. – GChuf Mar 06 '19 at 12:55
  • Page loaded that's good news ! that means that reverse proxy is working. Pictures not displayed correctly this probably css files are not loaded. Can you check if they are? – Soulimane Mammar Mar 06 '19 at 13:06
  • CSS is not loaded. In fact, every resource failed to load, because the website is looking at the wrong directory! It's looking in www.example.com/css, but the files are elsewhere on the server. I will try making symbolic links to all folders and see what happens. – GChuf Mar 06 '19 at 13:14
  • I guess that will solve the problem, but it's not clean as a solution – Soulimane Mammar Mar 06 '19 at 13:35
  • Are you using absolute path to css and the other resources? – Soulimane Mammar Mar 06 '19 at 13:39
  • Creating symbolic links did not help. Links to css files are not absolute I think, but I don't know much about the app since I didn't build it. Every problem seems to stem from the fact that the website is looking for files at the wrong locations on my server. – GChuf Mar 06 '19 at 13:50
  • I think the app needs access to multiple folders and that's what causing it not to work when I direct it to custom url. Can I just leave the app to work on www.example.com and create custom URLs for apache folders instead? – GChuf Mar 06 '19 at 14:20
  • I think the problem is that the application is using absolute paths – Soulimane Mammar Mar 06 '19 at 15:17

1 Answers1

0

I managed to solve the problem with this configuration:

ProxyPass /index.html http://0.0.0.0:8080/
ProxyPassReverse /index.html http://0.0.0.0:8080/

ProxyPass /config http://0.0.0.0:8080/config/
ProxyPassReverse /config http://0.0.0.0:8080/config/
ProxyPass /css http://0.0.0.0:8080/config/
ProxyPassReverse /css http://0.0.0.0:8080/config/
...

so, by creating a proxy pass to an index.html file and adding proxies for all subfolders in the app's folder. I helped myself with questions like this and this.

GChuf
  • 1,135
  • 1
  • 17
  • 28