DEV Community

Chafroud Tarek
Chafroud Tarek

Posted on

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
Enter fullscreen mode Exit fullscreen mode

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

cd /var/www
Enter fullscreen mode Exit fullscreen mode

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 ....

Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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  ./
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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;
    }
 }
Enter fullscreen mode Exit fullscreen mode

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;
    }
}
Enter fullscreen mode Exit fullscreen mode

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;
    }
}
Enter fullscreen mode Exit fullscreen mode

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

sudo systemctl start nginx
nginx -t
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (1)

Collapse
 
ziedbousnina profile image
Zied bousnina

Very helpfull thank you