# Hosting applications on same port - Nginx

Nginx is powerful in terms of distinguishing two applications on basis of uniquely provided combinations of "`hostname`", "`IP`" and "`port`".

Example:

| App | Domain | IP | port |
| --- | --- | --- | --- |
| vhost.local | \- | 10.1.1.102 | 8090 |
| vhost.laptop | vhost.laptop | 10.1.1.102 | 8090 |

Here despite of running two applications on same IP and same port, because of Hostname difference, Nginx will treat these two combinations for two separate application where,

* `vhost.laptop` will be accessible with `http://vhost.laptop:8090`
    
* `vhost.local` will be accessible with `http://10.1.1.102:8090`
    

This document provides a step-by-step guide on how to host two separate folders, **vhost.local** and **vhost.laptop**, using Nginx. The goal is to make the `vhost.local` website accessible via a specific IP address and port (10.1.1.102:8090), and the `vhost.laptop` website accessible through a designated domain name (vhost.laptop) on the same port (8090). By following the steps outlined in this documentation, users will achieve the following:

**Prerequisites**

* A system running on ubuntu operating system (Linux, window)
    
* Nginx installed on the system
    
* Basic understanding of Nginx configuration files and web hosting concepts
    

## Step 1: Create Configuration Files

**Configuration for vhost.local (vhost.local.conf):**

The configuration file `vhost.local.conf` defines how Nginx should handle requests for the `vhost.local` website. It tells Nginx to listen on port 8090 and respond to requests directed at the server's IP address. Let's break down the content:

* `server` Block: This block defines the configuration for the virtual host.
    
    * `listen 8090;`: Specifies that Nginx should listen on port 8090.
        
    * `server_name 10.1.1.102;`: Identifies the server by its IP address.
        
    * `location / { ... }`: Configures how Nginx handles requests to the root directory.
        
        * `root /path/to/vhost.local;`: Specifies the root directory where website files are located.
            
        * `index index.html;`: Specifies that Nginx should look for an `index.html` file to serve by default.
            

**Configuration for vhost.laptop (vhost.laptop.conf):**

The configuration file `vhost.laptop.conf` defines how Nginx should handle requests for the `vhost.laptop` website, accessed via the domain name. Similar to the `vhost.local` configuration, let's explore the content:

* `server` Block: This block defines the configuration for the virtual host.
    
    * `listen 8090;`: Specifies that Nginx should listen on port 8090.
        
    * `server_name vhost.laptop;`: Associates the server with the domain name `vhost.laptop`.
        
    * `location / { ... }`: Configures how Nginx handles requests to the root directory.
        
        * `root /path/to/vhost.laptop;`: Specifies the root directory for the website files.
            
        * `index index.html;`: Specifies the default file to serve
            

Create configuration files for both virtual hosts in the **/etc/nginx/conf.d/** directory.

> **vhost.local**

```bash
sudo nano /etc/nginx/conf.d/vhost.local.conf
```

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1691668740390/1d5dc70f-a535-4919-b26c-055d112b2f19.png align="center")

> **vhost.laptop**:

```bash
sudo nano /etc/nginx
```

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1691669306016/922505c3-0d2b-46fd-a439-210633295e0d.png align="center")

write content in nano index.html for vhost.laptop , Here's an example content that you can use for the `index.html` file of the `vhost.laptop` website. This content will serve as the main page for your website when accessed through the domain name "vhost.laptop":

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1691669543950/094a1670-8cdb-4a53-ad0a-9d6cb60d5e67.png align="center")

Here's an example content that you can use for the `index.html` file of the `vhost.local` website. This content will serve as the main page for your website when accessed using the IP address "10.1.1.102": , here you write your content in nano.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1691520056656/73816d67-8aa3-41e8-89d3-cd67f2e00236.png align="center")

## **Step 2: Configure Nginx for vhost.local**

Inside the `vhost.local.conf` file, add the following configuration:

```nginx
server {
    listen 10.1.1.102:8090;
   
    server_name _;

    location / {
        root /path/to/vhost.local;
        index index.html;
    }
}
```

Replace `/path/to/vhost.local` with the actual path to the `vhost.local` folder.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1691520128471/e772065b-fcfa-4521-abdc-45386c2959ef.png align="center")

## **Step 3: Configure Nginx for vhost.laptop**

Inside the `vhost.laptop.conf` file, add the following configuration:

```bash
server {
    listen 8090;
    server_name vhost.laptop;

    location / {
        root /path/to/vhost.laptop;
        index index.html;
    }
}
```

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1691520473003/96f36ce0-2b54-44a3-8e9a-77af3bdd4e76.png align="center")

Replace `/path/to/vhost.laptop` with the actual path to the `vhost.laptop` folder.

## **Step 4: Test Nginx Configuration**

After configuring Nginx to host your websites, it's important to verify that the configuration is error-free before applying the changes. To do this, follow these steps:

1. Open your terminal or command prompt.
    
2. Run the following command to test the Nginx configuration for syntax errors:
    

```bash
sudo nginx -t
sudo nginx -s reload
```

1. If the configuration files contain any errors, the command will display an error message describing the issue. Carefully review the error message and correct the corresponding configuration file(s).
    
2. If the configuration test completes without errors, you'll see an output indicating that the configuration is successful:
    
3. This means that Nginx has verified the syntax of your configuration files and found them to be valid.
    

**Note:** Testing your Nginx configuration helps prevent issues that could potentially disrupt your website's functionality. It's good practice to perform this step whenever you make changes to your Nginx configuration.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1691777201444/edc35713-7afd-4bc1-abaa-8589d0557217.png align="center")

## **Step 5: Set the firewall**

```bash
sudo ufw allow 8090
sudo ufw status
```

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1691520761687/e6e4fc3f-5837-4ac8-b627-e802d72cc0e2.png align="center")

By configuring UFW, you're enhancing the security of your server by allowing only the necessary traffic and blocking any unwanted access attempts. Remember that proper firewall configuration is crucial for safeguarding your server and the websites hosted on it.

To more about the firewall configurations (`ufw` & `firewalls`), one can refer one of our published [firewall document](https://wiki.wiz4host.com/firewall-in-linux-ubuntu-centos)

## **Step 7: Access the Hosts**

> Open a web browser or use a tool like `curl` to access the hosted content:
> 
> For vhost.local:
> 
> * Access via IP: [**http://10.1.1.102:8090/**](http://10.1.1.102:8090/)
>     
> 
> For `vhost.laptop`:
> 
> * Access via domain name: [**http://vhost.laptop:8090/**](http://vhost.laptop:8090/)
>     
> 
> ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1691670652860/b4264bd9-807c-47ad-937e-b2f90a84c179.png align="center")
> 
> ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1691670705209/7ff9f107-eeeb-4f62-9e58-46615338eae6.png align="center")

## **Conclusion**

You have successfully configured Nginx to host two separate `conf` folders, `vhost.local` and `vhost.laptop`, accessible via IP and domain name respectively, both on port `8090`. Make sure your content is placed in the respective folders and is appropriately accessible through the provided URLs.