Move subdirectory to subdomain and different server

[NickMNS]

From a "URL" perspective, my site is divided into two distinct sections. A main section, and a secondary section that has it's own subfolder. Server side the sections are not really distinct they are fed by my own CMS. The secondary site has a single "url" and individual pages result with query parameters, eg: example.com/second-section.app?page=1.

What I want to do, is convert the front-end of the secondary section to a React.js SPA, to do this I need to run a second React server that will live on its own subdomain. So the resulting url's should look like

app.example.com/second-section?page=1

or even

appname.example.com?page=1

To complicate things a little more, that secondary server will then make REST api calls back the original server to access the data from the CMS/DB.

The webserver is Apache.

I assume that moving the subfolder to a subdomain will as simple as a 301 redirect from one to the other. I think where things will get complicated is getting the React server to play nice with the existing one.

[phranque]

I assume that moving the subfolder to a subdomain will as simple as a 301 redirect from one to the other.

i would do 301 redirects to the subdomain and make the resulting urls as simple/short as possible.
e.g. https://appname.example.com/1

I think where things will get complicated is getting the React server to play nice with the existing one.

you could configure another rest.example.com subdomain with suitable authentication as your REST API server to keep things separate and secure.

[lucy24]

the resulting url's should look like

To emphasize what phranque said: Since you're redirecting anyway, this would seem the right time to come up with new prettier URLs, without any messy query string.

[NickMNS]

i would ... make the resulting urls as simple/short as possible.

Since you're redirecting anyway, this would seem the right time to come up with new prettier URLs, without any messy query string.

Unfortunately in this situation I think the use of query params is unavoidable, as they are being used to pass data to the server. The resulting URL's could be anywhere from 3 to 11 subdirectories deep. At some point in the future I will likely provide a shortened URL to user's that want to share or save the page, which would include some form personalizations. But that is a project for another time.

you could configure another rest.example.com subdomain with suitable authentication as your REST API server to keep things separate and secure.

I hadn't thought of that.

[lucy24]

I think the use of query params is unavoidable, as they are being used to pass data to the server

Prettified URLs are typically accompanied by an internal rewrite that changes the various bits of the URL back into parameters.

[NickMNS]

Prettified URLs are typically accompanied by an internal rewrite that changes the various bits of the URL back into parameters.

That would be pointless in my case. I can handle any URL at the server application level. For example:

//whether my URL is:
example.com/<param1>/<param2>/<param3>/<param4>/...

//or
example.com?param1=someVal&param2=someVal2&param3=someVal3....

//but in my case what I am doing is:
example.com?param1=someVal&param2=someVal2&param1=someOtherVal&param2=someOtherVal2...
//which I read in my code:
param1 = [someVal, someOtherVal]
param2 = [someVal2, someOtherVal2]

And yes a rewrite in Apache should return the same URL to the application, but that requires that I would then need to maintain code (the rewrites) in Apache which I would like to avoid. Ideally I would like not change any server code. The point of this exercise is only to change the front end, and if I have done my separations of concerns correctly from the start I should be able to achieve that goal.

This now brings up another question.

On another project running on NginX (which I personally prefer over Apache), I am running the React server and the Python server on the same machine, NginX routes request based on the url subfolder to different ports, React running on one and Python on another. Ideally I would like to do the same here but I would like to run the React server off a different box. Is there a way to get Apache to reroute the request to a different IP? Then I wouldn't need to change anything on the server.

[phranque]

Is there a way to get Apache to reroute the request to a different IP?

use mod_proxy or a RewriteRule directive with a [P] flag.

[NickMNS]

Is Mod_proxy the same as the ProxyPass directive?

[phranque]

Is Mod_proxy the same as the ProxyPass directive?

ProxyPass is a mod_proxy directive:
https://httpd.apache.org/docs/current/mod/mod_proxy.html#proxypass

the [P] flag also uses mod_proxy through a mod_rewrite directive (RewriteRule):
https://httpd.apache.org/docs/current/rewrite/flags.html#flag_p

[NickMNS]

I used ProxyPass in a <Location> in my virtual host and it works fines. It opens the page on the proxied server BUT!, all references to files in the folder "/static" are being directed to the main server, as opposed to the proxied server static folder. Is there a way to configure the proxy set up to automatically refer request from the proxy pages to static folder on the proxy server. Or do I need to rename the static folder and then setup another <Location /proxyStatic >?

Notes:
1- The main server also has a static folder that is in use.
2- Renaming the static folder on the proxy is not a simple task

[NickMNS]

So I finally got it working. It's a bit hacky but functional. The React server has all the static files neatly organized in subfolders, static/js and static/css, whereas my Python server has only a few files all lumped into the static folder. So I just proxied the subfolders (technically sub sub folders). So now it works, my react app runs on its own server, it makes api calls for data back to the python server, and all the old links pointing to the app take you to the correct new-app output.

But there remains one problem:
The proxy works more like a redirect, www. goes to app subdomain and displays the "app" in the browser address instead of keeping the www. I would like to keep the subdomain hidden from the user if possible. And I also have to fix my links back to the original site. Because now the relative links like /page on the subdomain point to app.example.com/page instead of www.example.com/page

[phranque]

But there remains one problem:
The proxy works more like a redirect, www. goes to app subdomain and displays the "app" in the browser address instead of keeping the www. I would like to keep the subdomain hidden from the user if possible.

please show your directives if you want any help on this.

[NickMNS]

Here is what I added to my .conf file:

<Virtualhost *:443>
 #typical virtualhost stuff
 <Directory /var/www/....>
  #typical directory stuff
 </Directory>
 <Location /my-react.app>
  proxyPass "https://app.example.com/my-react.app"
 </ Location>
 <Location /static/js>
  proxyPass "https://app.example.com/static/js"
 </ Location>
 <Location /static/css>
  proxyPass "https://app.example.com/static/css"
 </ Location>
</ Virtualhost>

[lucy24]

Double-check: These ProxyPass directives, each inside a <Location> envelope inside a <VirtualHost> envelope, are the only ProxyPass directives that exist on the server? Did you check for potential conflicts with Alias directives?

[NickMNS]

I found the problem and solution.

The problem was that my ProxyPass was pointing to the url of subdomain, and that request was handled by Nginx on the subdomain's server. Nginx in turn relayed the request to the port where a Node server was listening. I initially tried pointing the ProxyPass to subdomain:port but since the port was used by Node, when Nginx would try to receive on that port there was conflict. No port work but caused the ProxyPass to act like a redirect as described above.

The problem is that Nginx is really redundant in this case. Apache on the main server is handling the traffic from the web and passing it on, so there is no need for Nginx to do the same. To solve the problem I bypassed nginx by setting the ProxyPass to the subdomains ip:port, and that finally fixed it. The page is loaded with the www address in the address bar, and clicking on links with relative paths lead the correct locations.

I had one final issue caused by CloudFlare, it was causing CORS error for my font imports. When I put CF into dev-mode then the problem went away, I tried purge specific url's fromthe cache but that didn't change anything. Finally I went nuclear, and purged everything, and voila! It works. I suspect it was caching assets with the initial headers.

I hope this helps someone.