react and nodejs release issue when publish on separate servers

Question

I developed a react application and a node API that work together. My React application was built with vite.js and dropped on a hosting. The node server has been placed on a VPS server. Here is what was done:

1. correctly configured github actions for CI/CD (React and Node)
2. Settings of the htaccess file below
3. configuration of the hosting DNS to point to the VPS server (the hosting of the react site built (dist / index html) and the VPS on now the same ip)
4. apache configuration to set proxy redirects on domain address

When I access my site example.xyz I do not land on the index.html file in /dist/index.html present on the server but on the infinite loadpage.

I voluntarily deactivated the firewall so as not to add difficulty to the problems already encountered (ufw). my server does not have an SSL certificate, hence the http present in my configuration.

=> .htaccess

DirectoryIndex /dist/index.html
Redirect /assets/ /dist/assets/

RewriteEngine On

RewriteCond %{HTTP_HOST}@@%{HTTP_REFERER} !^([^@]*)@@https?://\1/.*

RewriteRule \.(gif|tif|pdf|wav|wmv|wma|avi|mov|mp4|m4v|mp3|zip|json|md|php?)$ - [F]

=>Apache config mywebsie.xyz.conf

<VirtualHost *:80>
ServerAdmin contact@mywebsie.xyz
ServerName mywebsie.xyz
ProxyPreserveHost On
ProxyPass / http://ip
ProxyPassReverse / http://ip
</VirtualHost>

Edit

My html (react build) is hosted on server xx.xx.xxx.198 and should be available at example.com. The html makes requests to my nodeJS API hosted on xxx.xx.xxx.215 at port 8005. I ran into this issue when pointing my DNS to that of the VPS. When I reset the DNS, I access my html fine with example.com. Now that the server xx.xx.xxx.198 (html) has its own IP and I can access the pages from the url (so problem partially solved) I can't check the TLS (SSL) for get HTTPS on the server xxx.xx.xxx.215 (API node) because the domain must point to it... It's a vicious circle... FYI, I want to keep the separation of front and back (so keep my API accessible via IP) because I plan to develop a ReactNative version which will have to make requests to this same server.

EndEdit

I would like to understand how to correctly configure a build of a react application placed on a hosting as well as an apache server so that the user can access the html/js pages generated by the build and that the requests are made to my API.

Take into consideration that I am a beginner and this is my first release. I voluntarily replaced my ip and my domain because the site, although inaccessible, may be vulnerable. However, if you are missing information, I will be very quick. Thank you very much to everyone who will help me.

Answer 1

1. Either deploy the contents of your dist directory to the host document root (eg /usr/local/apache/htdocs) or configure the Apache DocumentRoot to be your dist directory

   <VirtualHost *:80>
   ServerName mywebsite.xyz
   DocumentRoot "/www/mywebsite.xyz/dist"
   

   This will save you having to rewrite requests into your dist folder.

2. Your rewrite configuration looks overly complex. I recommend the one from the Create React App documentation which simply rewrites requests for non-existing resources to index.html

   Options -MultiViews
   RewriteEngine On
   RewriteCond %{REQUEST_FILENAME} !-f
   RewriteRule ^ index.html [QSA,L]
   

   FYI, if you have control over the Apache configuration, this should go there instead of a separate .htaccess file.

3. Configure your proxy to operate on a specific path. Otherwise, you're telling Apache to proxy every request to your API

   ProxyPass        "/api/" "http://ip/"
   ProxyPassReverse "/api/" "http://ip/"
   

   This does require that your front-end prefixes all API requests with the /api path. For example, this request...

   fetch("/api/users")
   

   will proxy the request to http://ip/users.