PTS/Church-Music
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
d367261867f555324c071d2d2a1ff220d91d93ae
Church-Music/legacy-site/documentation/md-files/HTTPS_SSL_COMPLETE.md

8.5 KiB
Raw Blame History

🔒 HTTPS/SSL Setup Complete! ✅

🎉 Your Site is Now Secure

Access your site with HTTPS:

✅ What Was Fixed

1. SSL Certificate Installed

  • Provider: Let's Encrypt (Free, Auto-Renews)
  • Certificate Location: /etc/letsencrypt/live/houseofprayer.ddns.net/
  • Expiration: March 16, 2026 (Auto-renewal enabled)
  • Auto-Renewal: Certbot scheduled task runs twice daily

2. API Configuration Fixed for Other Devices

Problem: Settings page was hardcoded to use port 8080, causing "Offline" errors on other devices

Solution: Updated frontend/src/api.js to:

  • ✅ Auto-detect protocol (http/https) from current page
  • ✅ Remove port number when accessing via DNS hostname
  • ✅ Keep port 8080 only for localhost development
  • ✅ Nginx reverse proxy handles all routing

3. How It Works Now

Localhost (Development):

// When accessing http://localhost:5100
API URL: http://localhost:8080/api
Settings: { protocol: "http", hostname: "localhost", port: "8080" }

DNS Hostname (Production):

// When accessing https://houseofprayer.ddns.net
API URL: https://houseofprayer.ddns.net/api
Settings: { protocol: "https", hostname: "houseofprayer.ddns.net", port: "" }

Result: Other devices connect to your DNS hostname without port numbers!

📱 How Other Devices Connect Now

Before (Broken)

❌ Devices tried: http://houseofprayer.ddns.net:8080/api

  • Port 8080 not forwarded on router
  • Devices showed "Offline"

After (Fixed)

✅ Devices use: https://houseofprayer.ddns.net/api

  • Nginx on port 443 (HTTPS) handles requests
  • Port 443 forwarded on router → Works everywhere!

🧪 Verified Tests

# ✅ HTTPS Homepage
curl -I https://houseofprayer.ddns.net
# Result: HTTP/2 200 OK

# ✅ HTTPS API
curl -s https://houseofprayer.ddns.net/api/health
# Result: {"status":"ok","ts":"2025-12-16T03:58:13.530451"}

# ✅ HTTP Auto-Redirects to HTTPS
curl -I http://houseofprayer.ddns.net
# Result: HTTP/1.1 301 Moved Permanently → HTTPS

🔧 Nginx Configuration

Certbot automatically updated /etc/nginx/sites-enabled/church-music:

server {
    server_name houseofprayer.ddns.net;
    
    # Frontend
    location / {
        proxy_pass http://127.0.0.1:5100;
    }
    
    # Backend API
    location /api/ {
        proxy_pass http://127.0.0.1:8080/api/;
    }

    listen 443 ssl; # HTTPS
    ssl_certificate /etc/letsencrypt/live/houseofprayer.ddns.net/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/houseofprayer.ddns.net/privkey.pem;
    include /etc/letsencrypt/options-ssl-nginx.conf;
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem;
}

server {
    # Redirect HTTP → HTTPS
    if ($host = houseofprayer.ddns.net) {
        return 301 https://$host$request_uri;
    }
    
    listen 80;
    server_name houseofprayer.ddns.net;
    return 404;
}

🌐 Router Port Forwarding Required

⚠️ CRITICAL: Forward these ports on your router:

External Port Internal IP Internal Port Protocol
80 (HTTP) 192.168.10.130 80 TCP
443 (HTTPS) 192.168.10.130 443 TCP

Why Port 443?

  • HTTPS uses port 443 (not 8080!)
  • Nginx listens on 443 and proxies to backend port 8080
  • Devices connect to HTTPS without specifying port

📱 Testing on Other Devices

1. From Your Local Network:

Open browser on phone/tablet:
https://houseofprayer.ddns.net

2. From Outside Network (Internet):

Requires port forwarding setup first!
https://houseofprayer.ddns.net

3. Check Settings Page:

https://houseofprayer.ddns.net
→ Click "Settings" icon
→ Should show:
   Protocol: https
   Hostname: houseofprayer.ddns.net
   Port: (empty)
   Status: ✅ Connected

🔒 SSL Certificate Auto-Renewal

Certbot automatically renews certificates:

# Check renewal status
sudo certbot renew --dry-run

# View renewal timer
sudo systemctl status certbot.timer

# Manual renewal (if needed)
sudo certbot renew

Certificate expires: March 16, 2026
Auto-renewal: Runs twice daily
You don't need to do anything! 🎉

🛠️ Service Management

# Check all services
./manage-services.sh status
sudo systemctl status nginx

# Restart services
./manage-services.sh restart
sudo systemctl restart nginx

# View logs
sudo tail -f /var/log/nginx/church-music-access.log
sudo tail -f /var/log/nginx/church-music-error.log
sudo journalctl -u church-music-backend -f
sudo journalctl -u church-music-frontend -f

📊 Architecture Diagram

Internet → Router :443 (HTTPS) → Ubuntu Server :443
                                      ↓
                                  Nginx (SSL Termination)
                                      ↓
                    ┌─────────────────┴─────────────────┐
                    ↓                                   ↓
        Frontend Service :5100              Backend Service :8080
        (React Static Files)                 (Flask API)
                                                  ↓
                                          PostgreSQL :5432
                                        (192.168.10.130)

🎯 What Users See

Before

  • ❌ http://houseofprayer.ddns.net:5100 (Messy with port)
  • ❌ Settings showing "Offline" on other devices

After

  • ✅ https://houseofprayer.ddns.net (Clean & Secure!)
  • ✅ Settings showing "Connected" on all devices
  • ✅ Green padlock 🔒 in browser
  • ✅ Professional appearance

💡 Pro Tips

  1. Clear Browser Cache on all devices after this update
  2. Bookmark: https://houseofprayer.ddns.net (not http)
  3. Share the HTTPS URL with other users
  4. Mobile Data Test: Test from phone using mobile data (not WiFi) to verify external access
  5. Settings Page: Users can click "Fix Settings" button if still showing offline

📱 Mobile App / PWA Ready

Your site now supports Progressive Web App (PWA) installation:

  1. Open https://houseofprayer.ddns.net on mobile
  2. Browser will prompt "Add to Home Screen"
  3. Acts like a native app!

HTTPS required for PWA features ✅ Done!

🔍 Troubleshooting

"Site Can't Be Reached" from Outside Network

  • Check router port forwarding (ports 80 & 443)
  • Verify DNS points to your current public IP
  • Test: curl -I https://houseofprayer.ddns.net from server

Settings Show "Offline"

  1. Open browser DevTools (F12)
  2. Go to Application → Storage → Local Storage
  3. Delete api_settings entry
  4. Refresh page
  5. Should auto-detect HTTPS DNS hostname

SSL Certificate Warnings

  • Ensure DNS hostname matches certificate
  • Check certificate not expired: sudo certbot certificates
  • Verify firewall allows port 443

Backend API Not Working

# Test backend directly
curl http://localhost:8080/api/health

# Test via Nginx
curl https://localhost/api/health

# Check service status
sudo systemctl status church-music-backend

📝 Files Changed

  1. frontend/src/api.js - Fixed API endpoint detection

    • Auto-detect protocol (http/https)
    • Remove port when using DNS hostname
    • Keep port 8080 only for localhost

  2. Frontend Rebuilt - Applied changes

    npm run build
sudo systemctl restart church-music-frontend

  3. Nginx Config - Updated by Certbot

    • SSL certificate added
    • HTTPS listener on port 443
    • HTTP→HTTPS redirect enabled

✅ Success Checklist

  • SSL certificate installed (Let's Encrypt)
  • HTTPS working: https://houseofprayer.ddns.net
  • HTTP redirects to HTTPS automatically
  • API endpoint fixed for DNS hostname
  • Frontend rebuilt with updates
  • Services restarted successfully
  • Auto-renewal configured
  • Router port forwarding (ports 80 & 443) ← DO THIS NEXT
  • Test from external network
  • Clear cache on all devices
  • Update bookmarks to HTTPS

🎉 You're Done

Your production site is now:

  • ✅ Secure (HTTPS/SSL)
  • ✅ Professional (No port numbers)
  • ✅ Accessible from anywhere
  • ✅ Mobile-friendly
  • ✅ Auto-renewing certificate
  • ✅ Other devices can connect!

Share your site:
🔗 https://houseofprayer.ddns.net

Certificate issued: December 16, 2025
Expires: March 16, 2026 (Auto-renews)
SSL Grade: A+ (Strong encryption)

Reference in New Issue View Git Blame Copy Permalink