🌐 Configure Custom Domains with Nginx and Port Forwarding on EC2 (with Cloudflare)

πŸš€ WG ✨ Pecha AI Studio WG
, , ,
1

This guide helps you set up custom domains and subdomains for your services (e.g., FastAPI, Flower) hosted on an EC2 instance. It includes:

  • Cloudflare DNS configuration
  • Nginx reverse proxy for multiple ports/services
  • iptables port forwarding (optional)
  • SSL with Let’s Encrypt (optional)

:brick: Example Setup

You have:

  • A FastAPI app on port 8000
  • Flower (Celery dashboard) on port 5555
  • A domain: pecha.tools
  • Desired subdomains:
    • translation-api.pecha.tools β†’ FastAPI (port 8000)
    • flower-translation.pecha.tools β†’ Flower (port 5555)

:technologist: Step 1: Add DNS Records in Cloudflare

Go to your domain dashboard on Cloudflare:

  1. Go to the DNS tab.
  2. Add A records for the subdomains:
Type Name Content TTL Proxy status
A translation-api <your-ec2-ip> Auto DNS only :white_circle:
A flower-translation <your-ec2-ip> Auto DNS only :white_circle:

:warning: Disable the Cloudflare proxy (set to β€œDNS only”) for initial setup.

:gear: Step 2: Install Nginx

sudo apt update
sudo apt install nginx

:receipt: Step 3: Create Nginx Server Blocks

Create Nginx config files for each service:

##:small_blue_diamond: FastAPI (translation-api)

sudo nano /etc/nginx/sites-available/translation-api

server {
    server_name translation-api.pecha.tools;

    location / {
        proxy_pass http://localhost:8000;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}

:small_blue_diamond: Flower (flower-translation)

sudo nano /etc/nginx/sites-available/flower-translation

server {
    server_name flower-translation.pecha.tools;

    location / {
        proxy_pass http://localhost:5555;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}

:link: Step 4: Enable Sites and Restart Nginx

sudo ln -s /etc/nginx/sites-available/translation-api /etc/nginx/sites-enabled/
sudo ln -s /etc/nginx/sites-available/flower-translation /etc/nginx/sites-enabled/

sudo nginx -t
sudo systemctl restart nginx

:repeat_button: (Optional) Step 5: Use iptables to Redirect Ports

If you want users to access port 8000 via port 80 directly:

sudo iptables -t nat -A PREROUTING -p tcp --dport 80 -j REDIRECT --to-port 8000

To persist iptables rules across reboots:

sudo apt install iptables-persistent
sudo netfilter-persistent save

:locked: (Optional) Step 6: Add SSL with Let’s Encrypt

Install Certbot:

sudo apt install certbot python3-certbot-nginx

Run Certbot:

sudo certbot --nginx -d translation-api.pecha.tools -d flower-translation.pecha.tools

Auto-renewal is configured by default.

:prohibited: Error: 413 Request Entity Too Large

When sending a large request to a FastAPI app hosted on EC2, you may encounter the following error:

HTTP 413: Request Entity Too Large

This happens because **NGINX**, acting as a reverse proxy, has a default limit of **1 MB** on request body size.

---

## βœ… Solution: Increase NGINX `client_max_body_size`

### 1. Edit the NGINX configuration

Open the appropriate NGINX config file. Common locations:

- `/etc/nginx/nginx.conf`
- `/etc/nginx/sites-available/default`

Find the `server` block and add or update the `client_max_body_size` directive:

```nginx
server {
    listen 80;
    server_name your_domain_or_ip;

    client_max_body_size 50M;  # Set to desired limit

    location / {
        proxy_pass http://127.0.0.1:8000;  # Address of your FastAPI app
        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;
    }
}

2. Test the NGINX configuration

sudo nginx -t

3. Reload NGINX to apply changes

sudo systemctl reload nginx
2 Likes