Back to demo

Cloudflare Workers Edge Configuration Walkthrough

Goal: build a small customer-facing technical demo that shows how DNS, HTTPS/TLS, HTTP headers, redirects, caching, and page-load behavior can be configured and validated for a static site on a custom domain.

1. Architecture

The main portfolio remains on Vercel at www.dongqing-li.com. This lab uses edge-lab.dongqing-li.com as a separate Cloudflare Workers Static Assets deployment so Cloudflare-specific behavior can be tested without adding an extra reverse proxy layer in front of the portfolio.

2. DNS

The subdomain is added as a Workers custom domain. DNS is managed in Cloudflare, and Cloudflare creates the DNS record and certificate for the custom domain. Requests to the hostname invoke the Worker directly.

dig edge-lab.dongqing-li.com
dig CNAME edge-lab.dongqing-li.com

Validation result: edge-lab.dongqing-li.com resolves to Cloudflare anycast IPs, and the authoritative nameservers are bruce.ns.cloudflare.com and phoenix.ns.cloudflare.com.

3. HTTPS / TLS

The site is served over HTTPS. TLS can be checked in the browser certificate viewer and with command-line response inspection.

curl -I https://edge-lab.dongqing-li.com

Validation result: the custom domain returns HTTP/2 200 over HTTPS and includes a Cloudflare edge response marker (cf-ray).

4. HTTP Response Headers

Security-oriented headers are configured using the static _headers file and verified with curl -I.

curl -I https://edge-lab.dongqing-li.com

Validation result: the response includes strict-transport-security, x-content-type-options, x-frame-options, referrer-policy, and permissions-policy.

5. Redirect Behavior

A simple redirect rule maps /old-walkthrough to the current walkthrough page. This demonstrates how redirect behavior can be tested without changing application code.

curl -I https://edge-lab.dongqing-li.com/old-walkthrough

Validation result: the legacy URL returns HTTP/2 301 with location: /walkthrough.html.

6. Cache Behavior

The cache test asset is configured with a long-lived cache policy through the static assets _headers file. Repeated requests can be used to observe response headers such as cache-control, cf-cache-status, and age.

curl -I https://edge-lab.dongqing-li.com/assets/cache-demo.json
curl -I https://edge-lab.dongqing-li.com/assets/cache-demo.json

Validation result: the JSON asset returns cf-cache-status: HIT and cache-control: public, max-age=31536000, immutable.

7. Performance Check

Page load can be tested with Lighthouse, browser DevTools, or Cloudflare speed tooling. The key metrics to capture are TTFB, transfer size, cache behavior, and Core Web Vitals where available.

8. Learning Summary

This demo shows practical understanding of customer-facing technical work: choosing a clean architecture, configuring DNS records, enabling HTTPS, validating HTTP behavior, explaining cache trade-offs, and documenting reproducible tests.