Cara Setup Nginx sebagai Web Server dan Reverse Proxy

Nginx adalah web server yang ringan dan powerful. Mari pelajari cara setup dan konfigurasinya.

Install Nginx

Ubuntu/Debian

# Update packages
sudo apt update

# Install Nginx
sudo apt install nginx

# Start dan enable
sudo systemctl start nginx
sudo systemctl enable nginx

# Check status
sudo systemctl status nginx

# Test di browser: http://your-server-ip

Firewall Configuration

# Allow Nginx through firewall
sudo ufw allow 'Nginx Full'

# Or specific ports
sudo ufw allow 80
sudo ufw allow 443

# Check status
sudo ufw status

Directory Structure

Important Paths

/etc/nginx/              # Config files
├── nginx.conf           # Main config
├── sites-available/     # Available sites
├── sites-enabled/       # Enabled sites (symlinks)
├── conf.d/              # Additional configs
└── snippets/            # Reusable snippets

/var/www/                # Web root
/var/log/nginx/          # Log files
├── access.log
└── error.log

Basic Configuration

Main Config (nginx.conf)

# /etc/nginx/nginx.conf

user www-data;
worker_processes auto;
pid /run/nginx.pid;

events {
    worker_connections 1024;
    multi_accept on;
}

http {
    # Basic Settings
    sendfile on;
    tcp_nopush on;
    tcp_nodelay on;
    keepalive_timeout 65;
    types_hash_max_size 2048;

    # MIME types
    include /etc/nginx/mime.types;
    default_type application/octet-stream;

    # Logging
    access_log /var/log/nginx/access.log;
    error_log /var/log/nginx/error.log;

    # Gzip
    gzip on;
    gzip_vary on;
    gzip_types text/plain text/css application/json application/javascript;

    # Virtual Host Configs
    include /etc/nginx/conf.d/*.conf;
    include /etc/nginx/sites-enabled/*;
}

Simple Site Config

# /etc/nginx/sites-available/mysite.com

server {
    listen 80;
    listen [::]:80;

    server_name mysite.com www.mysite.com;
    root /var/www/mysite.com;
    index index.html index.htm;

    location / {
        try_files $uri $uri/ =404;
    }

    # Logging
    access_log /var/log/nginx/mysite.access.log;
    error_log /var/log/nginx/mysite.error.log;
}

Enable Site

# Create symlink
sudo ln -s /etc/nginx/sites-available/mysite.com /etc/nginx/sites-enabled/

# Test config
sudo nginx -t

# Reload Nginx
sudo systemctl reload nginx

Reverse Proxy

Node.js Application

# /etc/nginx/sites-available/nodeapp.com

upstream nodejs {
    server 127.0.0.1:3000;
    keepalive 64;
}

server {
    listen 80;
    server_name nodeapp.com;

    location / {
        proxy_pass http://nodejs;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        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_cache_bypass $http_upgrade;
    }
}

Multiple Applications

server {
    listen 80;
    server_name example.com;

    # API server (Node.js on port 3000)
    location /api {
        proxy_pass http://127.0.0.1:3000;
        proxy_http_version 1.1;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }

    # Frontend (React on port 3001)
    location / {
        proxy_pass http://127.0.0.1:3001;
        proxy_http_version 1.1;
        proxy_set_header Host $host;
    }

    # WebSocket
    location /ws {
        proxy_pass http://127.0.0.1:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
    }
}

SSL/TLS Configuration

Install Certbot

# Install Certbot
sudo apt install certbot python3-certbot-nginx

# Get certificate
sudo certbot --nginx -d mysite.com -d www.mysite.com

# Auto-renewal test
sudo certbot renew --dry-run

Manual SSL Config

server {
    listen 443 ssl http2;
    listen [::]:443 ssl http2;
    server_name mysite.com;

    # SSL Certificate
    ssl_certificate /etc/letsencrypt/live/mysite.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/mysite.com/privkey.pem;

    # SSL Settings
    ssl_protocols TLSv1.2 TLSv1.3;
    ssl_ciphers ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256;
    ssl_prefer_server_ciphers off;

    # HSTS
    add_header Strict-Transport-Security "max-age=63072000" always;

    root /var/www/mysite.com;
    index index.html;

    location / {
        try_files $uri $uri/ =404;
    }
}

# Redirect HTTP to HTTPS
server {
    listen 80;
    server_name mysite.com www.mysite.com;
    return 301 https://$server_name$request_uri;
}

Load Balancing

Round Robin

upstream backend {
    server 192.168.1.10:3000;
    server 192.168.1.11:3000;
    server 192.168.1.12:3000;
}

server {
    listen 80;
    server_name example.com;

    location / {
        proxy_pass http://backend;
    }
}

Weighted Load Balancing

upstream backend {
    server 192.168.1.10:3000 weight=5;
    server 192.168.1.11:3000 weight=3;
    server 192.168.1.12:3000 weight=2;
}

IP Hash (Sticky Sessions)

upstream backend {
    ip_hash;
    server 192.168.1.10:3000;
    server 192.168.1.11:3000;
}

Caching

Proxy Cache

# Define cache zone
proxy_cache_path /var/cache/nginx levels=1:2 keys_zone=my_cache:10m max_size=1g inactive=60m;

server {
    listen 80;
    server_name example.com;

    location / {
        proxy_pass http://backend;
        proxy_cache my_cache;
        proxy_cache_valid 200 60m;
        proxy_cache_valid 404 1m;
        proxy_cache_use_stale error timeout updating;
        add_header X-Cache-Status $upstream_cache_status;
    }

    # Bypass cache for specific requests
    location /api {
        proxy_pass http://backend;
        proxy_cache_bypass $http_cache_control;
    }
}

Static File Caching

location ~* \.(jpg|jpeg|png|gif|ico|css|js|woff2)$ {
    expires 30d;
    add_header Cache-Control "public, immutable";
}

Security Headers

Secure Configuration

server {
    # ... other config

    # Security Headers
    add_header X-Frame-Options "SAMEORIGIN" always;
    add_header X-XSS-Protection "1; mode=block" always;
    add_header X-Content-Type-Options "nosniff" always;
    add_header Referrer-Policy "no-referrer-when-downgrade" always;
    add_header Content-Security-Policy "default-src 'self';" always;

    # Hide Nginx version
    server_tokens off;

    # Limit request size
    client_max_body_size 10M;

    # Rate limiting
    limit_req_zone $binary_remote_addr zone=one:10m rate=1r/s;

    location /api {
        limit_req zone=one burst=5 nodelay;
        proxy_pass http://backend;
    }
}

Gzip Compression

Enable Gzip

http {
    gzip on;
    gzip_vary on;
    gzip_min_length 1024;
    gzip_proxied any;
    gzip_comp_level 6;
    gzip_types
        text/plain
        text/css
        text/xml
        text/javascript
        application/json
        application/javascript
        application/xml
        application/xml+rss
        application/x-javascript
        image/svg+xml;
}

Common Commands

Nginx Management

# Test configuration
sudo nginx -t

# Reload (graceful)
sudo systemctl reload nginx

# Restart
sudo systemctl restart nginx

# Stop
sudo systemctl stop nginx

# View logs
sudo tail -f /var/log/nginx/access.log
sudo tail -f /var/log/nginx/error.log

# Check connections
sudo netstat -tlnp | grep nginx

Troubleshooting

Common Issues

# Permission denied
sudo chown -R www-data:www-data /var/www/mysite.com

# 502 Bad Gateway
# - Check if backend is running
# - Check proxy_pass URL
# - Check firewall

# 413 Request Entity Too Large
# Add: client_max_body_size 50M;

# Check error logs
sudo tail -100 /var/log/nginx/error.log

Kesimpulan

Nginx adalah web server yang sangat flexible dan powerful. Mulai dengan basic config lalu explore fitur advanced seperti load balancing dan caching.