The Astronomer

Posted on Aug 1

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

#webdev #cloudflare #digitalocean

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.

Top comments (4)

roggc • Aug 4

Hey thanks for the post. I am trying to use websocket too in my express app deployed in digitalocean, either with socket.io or ws, but it doesn't work. My question is do I need to do all the stuff you comment on your post (Cloudfare, nginx, ...)? Why is this needed? I am a completely newby in these things. Does digitalocean uses Cloudfare out of the box? I also have the same ubuntu version as yours in my droplet. Thanks for your post, it can save me.

The Astronomer • Aug 5

I usually use Cloudflare for my websites because of the free SSL (and also some other cool features). Nginx is for reverse proxy. Basically routes the traffic coming from outside world to my app that is running on port 8000 in 127.0.0.1. You need something like this for production servers. Another popular alternative is Apache web server. Widely used like in the LAMP stack (PHP/WordPress type sites). No, Digital Ocean does not use Cloudflare out of the box.

roggc • Aug 5

Hello thanks for your reply and the post. I have a little of mess in my head. I've done everything you put on the post. I have nginx on my droplet, etc. In nginx config I do:
proxy_pass localhost:8080;
But when I do 'sudo netstat -plunt' I don't see any process listening on port 8080. I have my app deployed with 'app platform' in theory listening at port 8080. It is not the same 'app platform' than the droplet? Have you encountered this same issue? If you could help me on this I would be very much appreciated. Thanks and sorry my bad english.

The Astronomer • Aug 16

Hi, I hope you resolved your issue. Sorry I didn't see your reply earlier. Did you make sure your app was running at first?

DEV Community