How to Install Nginx UI on Ubuntu 24.04- An Opensource WebUI for Nginx

Nginx UI is an open-source web-based configuration management GUI for Nginx. It supports single-node and cluster node configurations with real-time server statistics, automatic TLS certificates with Let's Encrypt, Nginx performance monitoring, and integration with large language models (LLMs) to manage configurations on a server.

In this article, you will install Nginx UI on Ubuntu 24.04 to create and manage Nginx web server configurations using a web-based management interface. You will create virtual host configurations and configure Nginx UI to use a trusted certificate authority (CA) such as Let's Encrypt to manage TLS certificates for secure connections on your server.

Prerequisites

Before you start, you need to:

• Access an Ubuntu 24.04 instance as a non-root user with sudo privileges.
• Create a new domain A record pointing to the instance's public IP address. For example, nginx-ui.example.com.
• Install Docker on your server if you want to install Nginx UI using Docker.

Install Nginx UI

Nginx UI is not available in the default package repositories on Ubuntu. You can install Nginx UI using Docker or the latest stable release script. Choose one of the two methods covered in this section.

1. Update your system package index.

   console Copy

   $ sudo apt update
   

   Explain Code

2. Install Nginx.

   console Copy

   $ sudo apt install nginx -y
   

   Explain Code

Configure Nginx Reverse Proxy

Nginx UI listens on localhost port 9000 by default. Follow these steps to create a reverse proxy configuration with HTTPS using Let's Encrypt.

1. Navigate to the Nginx sites-available directory.

   console Copy

   $ cd /etc/nginx/sites-available
   

   Explain Code

2. Create a new Nginx UI virtual host configuration.

   console Copy

   $ sudo nano nginx-ui.conf
   

   Explain Code

3. Add the following reverse proxy configuration. Replace nginx-ui.example.com with your domain.

   ini Copy

   map $http_upgrade $connection_upgrade {
       default upgrade;
       ''      close;
   }
   
   server {
       listen          80;
       listen          [::]:80;
   
       server_name     nginx-ui.example.com;
   
       location / {
           proxy_set_header    Host                $host;
           proxy_set_header    X-Real-IP           $remote_addr;
           proxy_set_header    X-Forwarded-For     $proxy_add_x_forwarded_for;
           proxy_set_header    X-Forwarded-Proto   $scheme;
           proxy_http_version  1.1;
           proxy_set_header    Upgrade             $http_upgrade;
           proxy_set_header    Connection          $connection_upgrade;
           proxy_pass          http://127.0.0.1:9000;
       }    
   }
   

   Explain Code

   Save and close the file.

4. Remove the default configuration from sites-enabled.

   console Copy

   $ sudo rm -f /etc/nginx/sites-enabled/default
   

   Explain Code

5. Enable the Nginx UI virtual host configuration.

   console Copy

   $ sudo ln -s /etc/nginx/sites-available/nginx-ui.conf /etc/nginx/sites-enabled/
   

   Explain Code

6. Test the Nginx configuration for errors.

   console Copy

   $ sudo nginx -t
   

   Explain Code

   Output:

   nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
   nginx: configuration file /etc/nginx/nginx.conf test is successful

7. Restart Nginx to apply the configuration.

   console Copy

   $ sudo systemctl restart nginx
   

   Explain Code

Secure Nginx UI with Let's Encrypt TLS

1. Install Certbot and the Nginx plugin.

   console Copy

   $ sudo apt install certbot python3-certbot-nginx -y
   

   Explain Code

2. Configure the firewall to allow HTTP and HTTPS traffic.

   console Copy

   $ sudo ufw allow 80,443/tcp
   

   Explain Code

3. Reload the firewall.

   console Copy

   $ sudo ufw reload
   

   Explain Code

4. Generate a Let's Encrypt TLS certificate. Replace nginx-ui.example.com with your domain and admin@example.com with your email.

   console Copy

   $ sudo certbot --nginx -d nginx-ui.example.com -m admin@example.com --agree-tos --no-eff
   

   Explain Code

5. Restart the nginx-ui service.

   console Copy

   $ sudo systemctl restart nginx-ui
   

   Explain Code

Access Nginx UI

You can now access the Nginx UI web interface using HTTPS on your domain. Follow these steps to complete the initial setup.

1. Access your domain using a web browser.

   https://nginx-ui.example.com

2. Verify the system information page displays without errors, then click Next.

   

3. Create an administrator account by entering:

   • Your email address
   • A username
   • A strong password

   

4. Click Install to apply the configuration.

5. Log in with your administrator credentials.

   

6. Verify the dashboard displays server statistics, including uptime, memory, storage, and network information.

7. Click Nginx in the navigation menu to monitor web server performance.

8. Toggle Enable stub_status module to enable Nginx monitoring.

   

Manage TLS Certificates

Nginx UI supports automatic TLS certificate management with Let's Encrypt and other certificate authorities. To configure certificate management, follow these steps.

1. Navigate to Certificates in the main menu.

2. Click Certificates List to view existing certificates.

   

3. Click Import to add existing certificates or Issue Certificate to generate new ones.

4. Navigate to DNS Credentials to configure DNS provider APIs for wildcard certificates.

5. Click Add to configure your DNS provider.

   

6. Navigate to ACME User to manage certificate authority accounts.

7. Click Add to create an ACME user:

   • Enter a username
   • Enter your email address
   • Select https://acme-v02.api.letsencrypt.org/directory from the CA Dir dropdown
   • Keep Proxy and EAB fields empty

   

8. Toggle Register on Startup to enable automatic registration.

9. Click Save to create the ACME user.

10. Verify the ACME user status shows Valid.

11. Click View to check the ACME user details.

    

Create Virtual Host Configurations

Follow these steps to create new virtual host configurations using Nginx UI.

1. Create a new subdomain DNS record pointing to your server's IP address. For example, app.example.com.

   

2. Navigate to Terminal in Nginx UI.

3. Create a directory for your web application.

   console Copy

   $ sudo mkdir -p /var/www/app.example.com
   

   Explain Code

4. Create a sample HTML file.

   console Copy

   $ sudo nano /var/www/app.example.com/index.html
   

   Explain Code

5. Add the following HTML content.

   html Copy

   <html>
   <head>
   <title>Sample Nginx Virtual Host Application</title>
   </head>
   <body>
   <h1 align="center">Greetings from Vultr!</h1>
   </body>
   </html>
   

   Explain Code

   Save and close the file.

6. Set proper ownership permissions.

   console Copy

   $ sudo chown -R www-data:www-data /var/www/app.example.com
   

   Explain Code

7. Navigate to Manage Sites in the main menu.

8. Click Sites List to view existing configurations.

   

9. Click Add to create a new virtual host.

10. Configure the virtual host:

    • Enter a configuration name
    • Verify IPv4 and IPv6 listening ports (80)
    • Enter your domain in the server_name field
    • Enter /var/www/app.example.com in the root field

    

11. Set the index file order: index.html, index.htm, index.php.

12. Click Next to configure TLS.

13. Toggle Enable TLS and click OK.

    

14. Toggle Encrypt website with Let's Encrypt and click OK.

15. Configure Let's Encrypt settings:

    • Keep HTTP01 as the challenge method
    • Select EC256 as the key type
    • Select your ACME user

16. Click Next and monitor the certificate generation.

    

17. Close the Let's Encrypt dialog and verify the certificate details.

18. Click Next to apply the configuration.

    

19. Verify the virtual host status shows Enabled.

20. Click Edit to modify the configuration if needed.

    

21. Toggle Basic Mode to switch to Advanced Mode for raw configuration access.

    

22. Access your virtual host domain to verify the configuration.

    https://app.example.com

    

Conclusion

In this article, you have installed Nginx UI on Ubuntu 24.04 and managed Nginx configurations on your server. You can use Nginx UI to manage users, advanced Nginx configurations, virtual host configurations, create backups, and monitor the Nginx web server performance using logs. In addition, you can integrate Nginx UI with MCP and use large language models (LLMs) to manage your configurations using the chat feature within the web dashboard. For more information and configurations, visit the Nginx UI documentation.