Cloudflare POC
Implementation:
Frontend mock server:
The frontend Remix project is hosted on poc.liaozhengpeng.com. Click here to see the newsroom page, which is a clone of the iqair.com/us/newsroom page.Shopify admin API mock:
I copied some data from the iqair.com/us/newsroom page to a Cloudflare Worker, and then I can use the worker to mock the Shopify Admin API. https://cache-server-cloudflare-poc.liaozhangpeng.workers.dev/api/news is the cache server.Test requesting website API from Cloudflare Worker:
Live city ranking
Cities with high air pollution (AQI⁺)
This hourly ranking includes 10 global cities with measured PM2.5 data. Click to learn more.
#
MAJOR CITY
US AQI⁺
Advantages:
- ✓Easier CI/CD
- ✓Automatic HTTPS setup
- ✓Deployed to global edge servers automatically
- ✓Blocks malicious bots
- ✓Solid security, WAF & DDoS protection (one running security rule to block all requests from iPhone for demo)
- ✓Good CDN edge performance
- ✓Comprehensive core web vitals metric monitoring
Blockers:
- ❗️Cannot host backend api service directly, because cloudflare has no support for Node.js environments
- ❗️Requires manual setup for metrics alerts and reporting - not available out of the box
Results:
| Requirement | Result |
|---|---|
| Validate Shopify integration using the Staging Shopify Admin API and test store environment. | Hosted a mock server to serve data like Shopify Admin API |
| Verify communication with backend systems via development backend APIs | Website API is public, anyone can access it |
| Monitor cost implications throughout the PoC period | Free tier has been used |
| Conduct baseline testing, including essential end-to-end (E2E) tests and connectivity checks | Ongoing |
| Evaluate observability capabilities by integrating with OpenTelemetry, and validate monitoring and logging functionalities. | Cloudflare does not provide metrics alarms and reports out of the box, need to set up manually |