Setting Up Cloudflare with DigitalOcean: A Step-by-Step Guide (2024)

So, I was trying to set up Cloudflare with DigitalOcean, and man, it was a real headache. I scoured the web for some up-to-date info, but all I found were old articles and videos that might not even be relevant anymore. My setup just wasn't working, and DigitalOcean didn't have any articles that matched what I was trying to do.

I think the issue might have been with the DigitalOcean image I was using for the droplet. So, I decided to start fresh and created a new droplet with Ubuntu 24.04 (LTS) x64 image. I followed these steps, and boom, everything worked like a charm! And yes, I am using websockets in my app (You'll see in the configuration below).

Step 1: Add Domain to Cloudflare

1.1. Sign Up/Log In to Cloudflare:

• Go to the Cloudflare website and sign up or log in to your account.

1.2. Add Your Domain to Cloudflare:

• In the Cloudflare dashboard follow the steps to add your domain. Start with the free plan. And allow Cloudflare to import DNS records if it asks.
  • Edit DNS to point to your DigitalOcean droplet:
• Add an A record to point your domain to the public IP address of your DigitalOcean droplet:
  • Name: @ (for root domain) or www (for subdomain).
  • IPv4 address: Your Droplet’s IP address.
  • TTL: Auto.
• Optionally, add a CNAME record to handle www subdomain redirection:
  • Name: www
  • Target: yourdomain.com

1.3. Update Nameservers:

• Cloudflare will provide you with two nameservers. Log in to your Domain Registrar (like Namecheap) account and update the nameservers with the Cloudflare nameservers. It may take some time for the nameserver changes to propagate. Once Cloudflare tells you that your domain is ready, you can follow the following steps.

2. Set up SSL/TLS

3.1. Set Up SSL/TLS on Cloudflare:

• Navigate to the SSL/TLS tab in Cloudflare.
• Choose the appropriate SSL mode (e.g., Full, Full (strict), Flexible). It’s recommended to use "Full (strict)" for the best security, assuming you have SSL configured on your Droplet.

3.2. Generate a Cloudflare Origin Certificate

• Log in to Cloudflare and select your domain.

• Navigate to SSL/TLS > Origin Server.

• Click Create Certificate.

• Choose Let Cloudflare generate a private key and a CSR. This option will generate both a certificate and a private key.

• Select the Key Format (PEM).

• Add hostnames for which the certificate should be valid (e.g., yourdomain.com and *.yourdomain.com).

• Click Next and Download both the certificate and the private key.

4. Install the Origin Certificate on Your Server

4.1. Save the Certificate and Private Key

Save the downloaded certificate and private key on your server. For example, you might save them in /etc/ssl/certs/ and /etc/ssl/private/, respectively:

sudo mkdir -p /etc/ssl/certs
sudo mkdir -p /etc/ssl/private

sudo nano /etc/ssl/certs/cloudflare_origin_cert.pem
# Paste the certificate content and save the file.

sudo nano /etc/ssl/private/cloudflare_origin_key.pem
# Paste the private key content and save the file.

4.2. Set Permissions

Set these permissions to the key files:

sudo chmod 600 /etc/ssl/private/cloudflare_origin_key.pem
sudo chown root:root /etc/ssl/private/cloudflare_origin_key.pem

5. Configure Nginx to Use the Origin Certificate

Make sure your Nginx configuration has these lines:

ssl_certificate /etc/ssl/certs/cloudflare_origin_cert.pem;
    ssl_certificate_key /etc/ssl/private/cloudflare_origin_key.pem;

Edit your Nginx server block configuration (usually located in /etc/nginx/sites-available/yourdomain.com).

If you don't already have Nginx installed. Follow these steps:

• Install Nginx on your DigitalOcean droplet:
  

   sudo apt update
   sudo apt install nginx
  

  • Configure Nginx to reverse proxy to your app running on port 8000 inside the droplet:
    • Create a new Nginx configuration file:

     sudo nano /etc/nginx/sites-available/yourdomain.com
  

Your Nginx configuration should look like this (Note that the WebSocket configuration in the Nginx setup is optional and should only be included if needed):

server {
    listen 80;
    server_name yourdomain.com www.yourdomain.com;
    return 301 https://$host$request_uri;
}

server {
    listen 443 ssl;
    server_name yourdomain.com www.yourdomain.com;

    ssl_certificate /etc/ssl/certs/cloudflare_origin_cert.pem;
    ssl_certificate_key /etc/ssl/private/cloudflare_origin_key.pem;

    ssl_protocols TLSv1.2 TLSv1.3;
    ssl_ciphers HIGH:!aNULL:!MD5;

    location / {
        proxy_pass http://127.0.0.1:8000;
        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;
    }

    location /ws/ {
        proxy_pass http://127.0.0.1:8000;
        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;
    }
}

6. Test and Restart Nginx

6.1. Check the Nginx configuration for syntax errors:

sudo nginx -t

6.2. If the test is successful, you can go ahead and restart Nginx to apply the changes:

    sudo systemctl restart nginx

7. Ensure Cloudflare SSL/TLS settings are correct

• Log in to Cloudflare and select your domain.
• Navigate to SSL/TLS > Overview.
• Ensure the SSL/TLS encryption mode is set to Full or Full (strict).

8. Test

You should now try to visit your domain in a web browser. Your app that was running inside the VPS should now be accessible to the world.