Setup Nginx on Virtual Server & deploy React app, Server & Client

In this tutorial we will configure the nginx on a virtual server (aws EC2 in our case, but can be any virtual server from any other provider like digital ocean, google cloud console, etc.).

Static / Persistent / Elastic IP

If you’re on amazon aws then you need to setup elastic ip for this ec2 instance. Similarly for google cloud too.

We will configure nginx to run the build folder as the port 80 output for the default react app, and then also make it run the client and server nodejs apps / files on different ports like 3000 and 4000, making our app dynamic.

1. Install Nginx on aws EC2 virtual instance

In case you had nginx setup on your server previously and you want to reset it, then follow the steps mentioned on this post (you will lose all your previous configs, so make sure that you want to start fresh):

• How to reset nginx on server

To setup nginx on a fresh server, simply run this command on the terminal:

sudo apt-get install nginx

This will install nginx on the server. That’s it!

Now we will configure it.

2. Configure nginx to serve React app, server & client

Configuring nginx for any website takes 2 steps:

1. Creating the conf file for the specific domain / subdomain in /etc/nginx/sites-avaialble/ folder.
2. Adding a symlink for the created file.
3. Restarting nginx service.

After making any changes to nginx configuration files, always run this command to see if the file is free from any obvious error:

sudo nginx -t

Once you’re sure that the conf file is error free, then you need to restart the nginx service. Remember that nginx configuration changes do not take affect for any website until the service is restarted. Restart nginx service using this command:

sudo service nginx restart

Setup default nginx conf file

If you want your server to handle all incoming requests as this react app then add the rules directly to the default file. Otherwise, make default file return a default page only.

Goto:

sudo nano /etc/nginx/sites-available/default

Now add the following code to it:

server{
    listen 80;
    # if needed:
    listen 443 ssl;

    server_name default_server;

    access_log /var/log/nginx/default.access.log;

    location / {
        root /home/ubuntu/default/;
        index index.html;
    }
}

Now exit the editor by pressing ctrl + x and then typing y and pressing enter. This will save this file.

This will load the index.html file in /home/ubuntu/default/ folder on your server for any incoming request that is not handled by any specific server as in next step.

Now we will setup our own domain and configure nginx rules for it to handle react app, client and server.

Configure your custom domain for nginx to serve React app

Open a new conf file using your custom domain name. Please note, the name of file can be anything, but it’s a custom to use your domain name so that it’s easy to identify which domain a specific file handles.

Goto terminal and type:

sudo nano /etc/nginx/sites-available/your-domain.com.conf

Then add this code to the new conf file:

server{
    listen 80;
    server_name your-domain.com www.your-domain.com;

    access_log /var/log/nginx/default.access.log;

    location / {
        root /home/ubuntu/react-nodejs-1/client/build/;
        index index.html;
    }

    location ^~ /server/{
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $http_host;
        proxy_set_header X-NginX-Proxy true;
        proxy_pass    http://127.0.0.1:4000/;
    }

    location ^~ /client/{
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $http_host;
        proxy_set_header X-NginX-Proxy true;
        proxy_pass    http://127.0.0.1:3000/;
    }
}

Now exit the editor by pressing ctrl + x and then typing y and pressing enter. This will save this file.

Now we need to add symlink for this new conf file. This link will only create a soft link (sort of like shortcuts to understand, but diff obivously) for this conf file in /etc/nginx/sites-enabled/ folder.

You can do that by running this command (modify the file name properly):

sudo ln -s /etc/nginx/sites-available/your-domain.com.conf /etc/nginx/sites-enabled/

Now we will check if the nginx conf code is fine and then restart nginx server to implement the new file.

sudo nginx -t
sudo service nginx restart

Now the nginx server is ready.

Now we can run our nodejs based React app server & client.

However, we have a problem here. As soon as we close the terminal, the nodejs server stops. So to keep it running, we need to use a tool called pm2. Follow this tutorial to configure pm2 to run your nodejs or react app:

• Keep nodejs server alive using pm2

If you feel any difficulty in setting up your aws ec2 instance or any other virtual server or need help to run your react app client & server using nginx please let me know.