Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Need Help: Integrating React App with AWS Lightsail WordPress Site

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.

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    @grekier Hello, thank you for your help! Yes, there were already various virtual hosts existing. I added the commands you suggested to the virtual host used by the WordPress site (I added them at the end).

    <VirtualHost 127.0.0.1:80 _default_:80>
  ServerName www.example.com
  ServerAlias *
  DocumentRoot /opt/bitnami/wordpress
  <Directory "/opt/bitnami/wordpress">
    Options -Indexes +FollowSymLinks -MultiViews
    AllowOverride None
    Require all granted
    # BEGIN WordPress fix for plugins and themes
    # Certain WordPress plugins and themes do not properly link to PHP files because of symbolic links
    # https://github.com/bitnami/bitnami-docker-wordpress-nginx/issues/43
    RewriteEngine On
    RewriteRule ^bitnami/wordpress(/.*) $1 [L]
    # END WordPress fix for plugins and themes
    # BEGIN WordPress
    # https://wordpress.org/support/article/htaccess/#basic-wp
    RewriteEngine On
    RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]
    RewriteBase /
    RewriteRule ^index.php$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /index.php [L]
    # END WordPress
    # BEGIN Disable WordPress XML-RPC endpoint
    # Disable the outdated WordPress XML-RPC endpoint to prevent security vulnerabilities.
    # https://github.com/bitnami/containers/pull/51077
    <Files xmlrpc.php>
    Order Allow,Deny
    Deny from all
    </Files>
    # END Disable WordPress XML-RPC endpoint
  </Directory>
  Include "/opt/bitnami/apache/conf/vhosts/htaccess/wordpress-htaccess.conf"
  ProxyPass /test http://localhost:3000
  ProxyPassReverse /test  http://localhost:3000
</VirtualHost>

    But it didn't work. I think I need to try the other alternative you suggested, which is to expose my application first on localhost:3000/test. I will update you, thank you for your help.


  2. 0

    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…

    Login or Signup to reply.
  3. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search