Guide: Hosting Multiple Applications on a VPS Without Registered Domains
Tags: vps, host, tutorial, ubuntu
Published: 2024-01-20 14:04:11

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](https://www.linkedin.com/in/tarek-chafroud-6725711bb/).