Need Help: Integrating React App with AWS Lightsail WordPress Site

Question

I thank anyone who can give me a hand! Basically, I have a WordPress site created with AWS Lightsail. So, I have an Apache server that exposes the WordPress site on my public address. On a specific path, I would like to expose an application, for example, on the path TEST PUBLIC_ADDRESS/TEST, I would like to access the application.

The application is a React project available on localhost:3000 via a Next server. The application works correctly on localhost:3000, and as mentioned, I would like to first expose this application on PUBLIC_ADDRESS/TEST. How can I do it? I tried creating a virtual host first, then opening ports, etc. but to no avail. Thank you in advance.

I tried creating a virtual host first, then opening ports, etc. but to no avail.

Answer 1

I do not know the setup for the WordPress Lightsail so you might need to create a VirtualHost but it might already exist so check it out.

Usual places are /etc/apache2/conf where you could find an httpd.conf file. From there it can point to another multitude of files. As it is a Debian based image, I guess you would have an apache2.conf and a sites-enabled folder with your different VirtualHosts

Now, when you have identified where you want to add the configuration to proxy to Next. You can just add:

ProxyPass /test http:/localhost:3000
ProxyPassReverse /test  http:/localhost:3000

inside the VirtualHost of your choice. This will map /test to localhost:3000

The VirtualHost might be a new one you create with the IP or an existing one with a name if that is what you wish.

There are a couple of things to be aware of:

1. The path in the proxy will take precedence if you have a folder called test in your document root
2. You might need to tweak your NextJS app as there will probably be some fancy issue since the path in the browser will not match the route in the App. I recommend running the app with the same path as the proxy path. In this case, map

ProxyPass /test http:/localhost:3000/test
ProxyPassReverse /test  http:/localhost:3000/test

I believe there are other ways to achieve this but be aware that mixing path is a mess...

N.B: Also a side note on LightSail. If you try to configure a VirtualHost with the public IP and it doesn't work, try with the private one. I think there is something funny on how routing/DNS is done in LightSail...

Answer 2

To accomplish this goal, you can simply follow one of the solutions provided below.

1. Configure and update your Apache Virtual Host :

Edit your Apache configuration file (usually located at /etc/apache2/sites-available/000-default.conf or similar) and add a ProxyPass directive to proxy requests to the React application.

<VirtualHost *:80>
    ServerName yourdomain.com
    DocumentRoot /var/www/html

    ProxyPass /TEST http://localhost:3000
    ProxyPassReverse /TEST http://localhost:3000

    <Directory /var/www/html>
        Options Indexes FollowSymLinks MultiViews
        AllowOverride All
        Require all granted
    </Directory>
</VirtualHost>

2. Configure React Application and

Ensure your React application is configured to run on the correct host and port. In your React application's package.json, set the homepage property to /TEST.

"homepage": "/TEST",

if your React application is using React Router, make sure the <BrowserRouter> component is configured to use the basename prop set to /TEST.

3. Restart the Apache:

sudo service apache2 restart

Now, when you access http://yourdomain.com/TEST, Apache will proxy the requests to your React application running on localhost:3000. Ensure your React application is running in the background.