Score:0

Deploying react js app by setting up a reverse proxy

dk flag

I have a react js app running on localhost:3000 on my vps (godaddy).

I have set up a reverse proxy using Apache web server on /var/www/html/ecommerce/app by setting .htaccess like this:

DirectoryIndex disabled

RewriteEngine On 
RewriteRule ^(.*)$ http://127.0.0.1:3000/$1 [P,L] 
RewriteRule ^$ http://127.0.0.1:3000 [P,L] 

The idea is to access the app via http://my-vps-public-ip/ecommerce/app.

Right now the page fails to load. Any help would be appreciated.

To test if the app is indeed running on http://localhost:3000 I made an SSH tunnel:

ssh -L 3000:$GD_IP:3000 -N logan@$GD_IP

And, when I view it from my end http://localhost:3000, it worked! So something is wrong with my Apache configuration?. I did a similar reverse proxy with port 8000 and it worked.

This one worked in a different case:

DirectoryIndex disabled

RewriteEngine On 
RewriteRule ^(.*)$ http://127.0.0.1:8000/api/$1 [P,L] 
RewriteRule ^$ http://127.0.0.1:8000/api [P,L] 

By 'worked' I mean, say .htaccess file is under /var/www/html/ecommerce/api, then I can access it via http://my-vps-public-ip/ecommerce/api.

When I visited http://$GD_IP:3000 the site opens! But why? .htaccess file is under /var/www/html/ecommerce/app so I was thinking it will be accessible via http://$GD_IP/ecommerce/app?

Output of ss command:

logan@vps:~$ ss -ltn 'sport = :8000'
State     Recv-Q     Send-Q         Local Address:Port         Peer Address:Port    Process    
LISTEN    0          511                        *:8000                    *:* 

logan@vps:~$ ss -ltn 'sport = :3000'
State     Recv-Q     Send-Q         Local Address:Port         Peer Address:Port    Process    
LISTEN    0          511                  0.0.0.0:3000              0.0.0.0:*

Output of apachectl -S:

logan@vps:~$ apachectl -S
AH00558: apache2: Could not reliably determine the server's fully qualified domain name, using ip-184-168-120-55.ip.secureserver.net. Set the 'ServerName' directive globally to suppress this message
VirtualHost configuration:
*:80                   ip-184-168-120-55.ip.secureserver.net (/etc/apache2/sites-enabled/000-default.conf:1)
ServerRoot: "/etc/apache2"
Main DocumentRoot: "/var/www/html"
Main ErrorLog: "/var/log/apache2/error.log"
Mutex proxy: using_defaults
Mutex default: dir="/var/run/apache2/" mechanism=default 
Mutex watchdog-callback: using_defaults
Mutex rewrite-map: using_defaults
PidFile: "/var/run/apache2/apache2.pid"
Define: DUMP_VHOSTS
Define: DUMP_RUN_CFG
User: name="www-data" id=33 not_used
Group: name="www-data" id=33 not_used
cn flag
The Apache module `proxy` might be helpful, especially the directives `ProxyPass` and `ProxyPassReverse`. See for example [this answer to a similar question](https://askubuntu.com/questions/1342447/how-do-i-setup-a-subdomain-in-apache2-on-ubuntu-20-04/1342457#1342457).
mangohost

Post an answer

Most people don’t grasp that asking a lot of questions unlocks learning and improves interpersonal bonding. In Alison’s studies, for example, though people could accurately recall how many questions had been asked in their conversations, they didn’t intuit the link between questions and liking. Across four studies, in which participants were engaged in conversations themselves or read transcripts of others’ conversations, people tended not to realize that question asking would influence—or had influenced—the level of amity between the conversationalists.