Guide: Hosting Multiple Applications on a VPS Without Registered Domains

In this guide, we'll explore a practical solution for hosting multiple applications on a Virtual Private Server (VPS) without the need for registered domain names. We'll focus on setting up two front-end applications, one for clients and another for administrators, along with a back-end application to handle the server-side functionalities.

So, first of all, we need to install the following packages:

sudo apt update
sudo apt install nginx
sudo apt install nodejs npm 
sudo apt install git

Secondly, navigate to the 'www' folder by executing the following command

cd /var/www

Once inside this folder, we will pull our projects from GitHub. In my case, I have three projects: "front-client," "front-admin," and "back-api".

git clone ....

Now, when I run 'ls,' I should see the three folders:

Go to the 'front-client' and build it. In my case, I use Node.js, so I will just run:

cd front-client
npm run build

Repeat the same process for 'front-admin.' After building, I will have two folders: 'dist' and 'build.'

Note: You might get the same names for both folders, so ensure to change their names or place them in different locations, not at the same level.

After building:
move to /var/www and run :

cp -r ./front-client/dist  ./
cp -r ./front-admin/build  ./

This will move our build to the 'www' folder.

Then, move to Nginx to set up our config:

cd /etc/nginx/sites-availables
touch front-client
cd /etc/nginx/sites-enabled
touch fromt-client 
ln -s /etc/nginx/sites-available/front-client /etc/nginx/sites-enabled/front-client

With these commands, we create two files and use ln to create links between them. This means if we change one, the other will be automatically updated. Repeat the same process for 'front-admin' and the API.

*for the admin file enter the following : *

server {
    listen 80;
    server_name 162.19.256.134(your vps ipv4);
    location / {
     root /var/www/build/;
     index inde.htm index.html;
     try_files $uri $uri/ /index.html;
    }
 }

the same for the client file just change the port :

server {
    listen 90;
    server_name 162.19.256.134(your vps ipv4);

    location / {
        root /var/www/dist/;
        index index.html;
        try_files $uri $uri/ /index.html;

        add_header 'Access-Control-Allow-Headers' '*' always;
        add_header 'Access-Control-Allow-Methods' '*' always;
    }
}

and we end up with our api file :

server {
    listen 60;
    server_name 162.19.256.134(your vps ipv4);

    location / {
        proxy_pass http://localhost:4242;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection keep-alive;
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;

         if ($http_origin = "http://162.19.256.134(your vps ipv4):70") {
            add_header 'Access-Control-Allow-Origin' 'http://162.19.253.131:70' always;
        }

        if ($http_origin = "http://162.19.256.134(your vps ipv4):80") {
            add_header 'Access-Control-Allow-Origin' 'http://162.19.253.131:80' always;
        }
        add_header 'Access-Control-Allow-Headers' '*' always;
        add_header 'Access-Control-Allow-Methods' '*' always;
    }
}

The final step involves starting Nginx. Execute the following commands:

sudo systemctl start nginx
nginx -t

This will start Nginx and verify its configuration.

Now, you can visit your sites at (your VPS-IPv4):70 and (your VPS-IPv4):80.

And here we can say that we have reached the end of our blog. I hope you find it useful and informative for more tips you can follow me here linkedin.