Setting Up Nginx with UI and Reverse Proxy

Introduction

This guide walks you through setting up Nginx with a web-based UI interface and configuring reverse proxies for multiple services. We'll cover installation, SSL certificate setup, and common proxy configurations.

Installing Nginx UI

Nginx UI provides a user-friendly web interface for managing your Nginx configurations.

Installation Steps

# Install Nginx UI
curl -L https://raw.githubusercontent.com/0xJacky/nginx-ui/master/install.sh | sudo bash -s install

# Update system packages
sudo apt update

# Install Nginx
sudo apt install nginx -y

# Restart Nginx UI
sudo systemctl restart nginx-ui

# Configure firewall
sudo ufw allow 80
sudo ufw allow 443
sudo ufw allow "Nginx Full"

Environment Variables

For deployment automation with Vercel, you'll need to configure your credentials:

VERCEL_API_TOKEN=your_api_token_here
VERCEL_TEAM_ID=team_your_team_id_here

Getting Your Vercel Credentials

1. API Token: Visit https://vercel.com/account/settings/tokens to create a new token

   • Click "Create Token"
   • Give it a descriptive name (e.g., "Nginx Deployment")
   • Set appropriate scope and expiration
   • Copy the token immediately (it won't be shown again)

2. Team ID: Find this in your Vercel team settings

   • Go to your team dashboard
   • The team ID is in the URL or team settings page
   • Format: team_xxxxxxxxxx

Note: Store these credentials securely and never commit them to version control.

Uninstalling (Optional)

If you need to remove Nginx UI or Nginx completely:

Remove Nginx UI

sudo systemctl stop nginx-ui
sudo systemctl disable nginx-ui
sudo rm /etc/systemd/system/nginx-ui.service
sudo systemctl daemon-reload
sudo rm /usr/local/bin/nginx-ui
sudo rm -rf /usr/local/etc/nginx-ui
sudo rm -rf /var/log/nginx-ui
sudo systemctl status nginx-ui

Remove Nginx

sudo systemctl stop nginx
sudo systemctl disable nginx
sudo apt purge nginx nginx-common nginx-full -y
sudo apt purge nginx-core nginx-light nginx-extras -y
sudo rm -rf /etc/nginx
sudo rm -rf /var/www/html
sudo rm -rf /var/log/nginx
sudo rm -rf /usr/share/nginx
sudo apt autoremove -y

# Verify removal
which nginx
nginx -v

DNS Configuration

Before your generate ssl can work, you need to point your domain to your server.

Adding DNS Records in Vercel

1. Access DNS Settings

   • Go to your Vercel dashboard
   • Select your domain
   • Navigate to the "DNS" tab

2. Add A Record (for IPv4)

   Type: A
   Name: subdomain (or @ for root domain)
   Value: your_server_public_ip
   TTL: Auto
   

3. Add AAAA Record (for IPv6, optional)

   Type: AAAA
   Name: subdomain (or @ for root domain)
   Value: your_server_ipv6_address
   TTL: Auto
   

4. Add CNAME Record (alternative for subdomains)

   Type: CNAME
   Name: subdomain
   Value: your-domain.com or your-dns-provider.com
   TTL: Auto
   

DNS Record Examples

• Root domain: @ → 203.0.113.10 (A record)
• Subdomain: api → 203.0.113.10 (A record)
• Wildcard: * → 203.0.113.10 (A record for all subdomains)
• Alias: www → example.com (CNAME record)

Note: DNS changes can take 5 minutes to 48 hours to propagate globally. Use nslookup your-domain.com or dig your-domain.com to verify DNS resolution.

SSL Certificate Setup with Nginx UI

Nginx UI supports automatic SSL certificate generation using ACME (Let's Encrypt) with DNS verification.

Configuring ACME in Nginx UI

1. Access Nginx UI

   • Open your browser and navigate to http://your-server-ip:9000
   • Log in with your credentials

2. Add ACME User

   • Go to Certificates in the sidebar
   • Click on ACME User
   • Click Add ACME User
   • Enter your email address
   • Select CA Server (Let's Encrypt Production)
   • Click Save

3. Configure DNS Credentials (Vercel)

   • Navigate to DNS Credentials under Certificates
   • Click Add DNS Credential
   • Select provider: Vercel
   • Enter your credentials:

     Name: Vercel DNS
     Provider: Vercel
     VERCEL_API_TOKEN: your_vercel_api_token
     

   • Click Save

4. Request Certificates

   • Go to Certificates List
   • Click Add Certificate
   • Select DNS Challenge
   • Choose your ACME User
   • Choose your DNS Credential (Vercel)
   • Enter domain names (e.g., example.com, *.example.com for wildcard)
   • Click Obtain Certificate

5. Verify Certificate

   • Wait for the DNS challenge to complete (usually 1-3 minutes)
   • Certificate will appear in the Certificates List
   • Auto-renewal is enabled by default (certificates renew 30 days before expiration)

Certificate File Locations

After successful generation, certificates are stored at:

/etc/nginx/ssl/your_domain/fullchain.cer
/etc/nginx/ssl/your_domain/private.key

Pro Tip: Use wildcard certificates (*.example.com) to cover all subdomains with a single certificate.

Reverse Proxy Configurations

Here are common reverse proxy patterns for different services.

Basic HTTP/HTTPS Proxy

This configuration proxies requests to an internal service:

server {
    listen 80;
    listen [::]:80;
    server_name nas.ocst.pro;
    return 301 https://$host$request_uri;
    location / {
        proxy_pass https://192.168.1.xxx:xxxx;
        proxy_set_header Host $host;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_max_temp_file_size 16384m;
        client_max_body_size 0;
        proxy_buffering off;
    }
}
server {
    listen 443 ssl;
    listen [::]:443 ssl;
    server_name nas.ocst.pro;
    ssl_certificate /etc/nginx/ssl/your_domain/fullchain.cer
    ssl_certificate_key /etc/nginx/ssl/your_domain/private.key
    location / {
        proxy_pass https://192.168.1.xxx:xxxx;
        proxy_set_header Host $host;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_max_temp_file_size 16384m;
        client_max_body_size 0;
        proxy_buffering off;
    }
}

With Nginx properly configured, you can securely expose internal services through a single entry point with SSL encryption. The Nginx UI makes management easier, while these configuration patterns provide a solid foundation for most proxy scenarios.

References

https://github.com/NginxProxyManager/nginx-proxy-manager/issues/643