Setting Up a Web Server on Raspberry Pi with Nginx and Cloudflare

In this guide, we'll walk through the complete process of setting up a web server on a Raspberry Pi Zero W 2 (or any other), configuring Nginx, and connecting it to the internet securely using Cloudflare.

By the end of this guide, you will have a fully functional static website hosted on your Raspberry Pi.

We have to two things, make sure requests are routed to the raspberry pi and make sure the raspberry pi can serve the files requested. The process of doing this is can be seen in the diagram below.

Installing Raspberry Pi OS

The first step is to set up your Raspberry Pi with a headless (no GUI) installation of Raspberry Pi OS:

Download the Raspberry Pi Imager from the official website
Insert your microSD card into your computer
Open Raspberry Pi Imager and select "Raspberry Pi OS Lite (64-bit)" as the operating system
Click on the settings gear icon and configure:
- Set hostname (e.g., webserver)
- Enable SSH
- Set username and password
- Configure WiFi credentials
- Set a static IP address for your local network
Write the image to the SD card
Insert the SD card into your Raspberry Pi and power it on

You can now connect to your Pi via SSH:

ssh [email protected]

Setting Up Nginx

The role of Nginx is to take the requests sent the the pi and work out the appropriate files to send as a response. Here's how to install and configure it:

Update your system first:
```
sudo apt update
sudo apt upgrade -y
```
Install Nginx:
```
sudo apt install nginx -y
```
Note the locations of important Nginx files:
- Configuration files: /etc/nginx/
- Main config: /etc/nginx/nginx.conf
- Site configurations: /etc/nginx/sites-available/ and /etc/nginx/sites-enabled/
- Web root: /var/www/html/

Create a new site configuration:

sudo nano /etc/nginx/sites-available/mysite

To serve a basic static web page, add the following configuration:

server {
    # Listen on port 80 (HTTP)
    listen 80;
    
    # Define which domain names this config block applies to
    # This server block will handle requests for both the root domain and www subdomain
    server_name yourdomain.com www.yourdomain.com;
    
    # Set the root directory where your website files are stored
    # This is where Nginx will look for files to serve
    root /var/www/mysite;
    
    # Specify default files to look for when a directory is requested
    # If someone visits yourdomain.com/, Nginx will try to serve yourdomain.com/index.html
    index index.html;

    # Location block for handling requests to the root path (/)
    location / {
        # try_files directive tells Nginx what to do when processing requests:
        # $uri - try to serve the exact URI requested
        # $uri/ - if $uri isn't found, try it as a directory and look for index file
        # =404 - if neither is found, return a 404 error
        try_files $uri $uri/ =404;
    }
}

Let's break down what each part of this configuration does:

server { ... } - This defines a server block. You can have multiple server blocks to handle different domains.
listen 80; - Tells Nginx to listen for incoming HTTP connections on port 80. This is the default port for HTTP traffic.
server_name - Specifies which domain names this server block should respond to. When Nginx receives a request, it looks at the Host header to match it with the appropriate server block.
root - Sets the document root directory. All relative paths in the configuration will be relative to this directory. For example, if someone requests yourdomain.com/images/pic.jpg, Nginx will look for the file at /var/www/mysite/images/pic.jpg. Any location blocks append their specified path to this root.
index - Lists the files to use as an index page when a directory is requested. Nginx will look for these files in the order specified.
location / { ... } - This block defines how Nginx handles requests matching the specified path (in this case, the root path /). You can have multiple location blocks for different paths.
try_files - This directive is crucial for proper URL handling:
- First tries the exact URI requested
- If that fails, tries treating it as a directory and looks for an index file
- If both fail, returns a 404 error

Create your website directory and add some content:

sudo mkdir -p /var/www/mysite
sudo chown -R $USER /var/www/mysite
echo "Hello from my Raspberry Pi!" > /var/www/mysite/index.html

Enable the site:

sudo ln -s /etc/nginx/sites-available/mysite /etc/nginx/sites-enabled/
sudo nginx -t
sudo systemctl restart nginx

Port Forwarding Setup

To make your web server accessible from the internet:

Log into your router's admin interface
Navigate to the port forwarding section
Add a new port forwarding rule:
- External port: 80 (HTTP) and 443 (HTTPS)
- Internal IP: Your Pi's static IP address
- Internal port: 80 and 443
- Protocol: TCP

Cloudflare DNS Configuration

Cloudflare provides free DNS management and HTTPS encryption:

Sign up for a Cloudflare account
Add your domain to Cloudflare
Update your domain's nameservers to Cloudflare's
Add DNS records:
- Type: A
- Name: @ (root domain)
- Value: Your public IP
- Proxy status: Proxied

Automatic DNS Updates

Since most home internet connections have dynamic IP addresses, we need a script to automatically update our DNS records when the IP changes. Here's how the update process works:

Here's the Python script that handles this process:

import requests
import json

# Cloudflare API details
api_token = "your_api_token"
zone_id = "your_zone_id"
record_id = "your_record_id"
domain = "yourdomain.com"

# Get public IP
response = requests.get("https://api.ipify.org?format=json")
public_ip = response.json()['ip']

# Cloudflare API URL
url = f"https://api.cloudflare.com/client/v4/zones/{zone_id}/dns_records/{record_id}"

# DNS record data
data = {
    "type": "A",
    "name": domain,
    "content": public_ip,
    "ttl": 120,
    "proxied": True
}

# Headers for the request
headers = {
    "Authorization": f"Bearer {api_token}",
    "Content-Type": "application/json"
}

# Update the DNS record
response = requests.put(url, headers=headers, json=data)

if response.status_code == 200:
    print(f"DNS record updated successfully to {public_ip}")
else:
    print(f"Failed to update DNS record: {response.text}")

To automate this script:

Save it as update_dns.py
Make it executable:
```
chmod +x update_dns.py
```
Add it to crontab to run every hour:
```
crontab -e
```

Add the line:

0 * * * * /usr/bin/python3 /path/to/update_dns.py

Conclusion

You now have a fully functional web server running on a Raspberry Pi, with:
- Nginx serving your websites
- Port forwarding enabling internet access
- Cloudflare providing DNS management and HTTPS
- Automatic DNS updates for dynamic IP addresses
- Basic security measures in place

Remember to regularly backup your configuration files and keep your system updated. Happy hosting!