Setting Up Nginx with UI and Reverse Proxy

DevOps

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

Environment Variables

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

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

Remove Nginx

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)

  3. Add AAAA Record (for IPv6, optional)

  4. Add CNAME Record (alternative for subdomains)

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:
    • 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:

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:

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