Directus Cf Cache

Overview

The directus-cf-cache is a tool that allows users to cache and limit access to the data managed on their Directus instance. It is powered by Cloudflare Workers, Workers KV, and Cloudflare Pages. With directus-cf-cache, users can ensure the availability of their API with live updates, serve content from their Directus instance or the KV cache, cache image assets, and automatically update the cache upon webhook trigger. There is also a demo Vue web application available to showcase functionality.

Features

• Always available API with live updates.
• Origin Priority mode to serve content from the Directus instance with fallback to the KV cache when unavailable.
• Cache Priority mode to serve content from the KV cache with fallback to the Directus instance when unavailable.
• Origin Only mode to only serve content from the Directus instance.
• Cache Only mode to only serve content from the KV cache.
• Caching of image assets.
• Automatic updating of cache upon webhook trigger.
• Preset requests to prevent tampering of query parameters.
• Full support of Directus Global Query Parameters.
• Demo Vue web application to showcase functionality.

Installation Guide

To install the directus-cf-cache, follow these steps:

1. Fork the directus-cf-cache GitHub repository.
2. Create a Fork of the repository as the deployments are pushed via GitHub Actions.
3. Sign up for a Cloudflare Workers account.
4. Copy the Account ID shown in the Workers page and save it.
5. Copy the Subdomain shown in the Workers page and save it.
6. Set up a new namespace in the KV tab and copy the Namespace ID somewhere.
7. Go to API Tokens and create a new Custom API Token with the Permission of “Account/Worker Scripts/Edit”. Copy the API Key and save it.
8. If you already have a Directus instance, skip to step 5. Otherwise, sign up for a Directus Cloud account.
9. Create a new Project in Directus.
10. Check your email for the login credentials and login to your Directus instance.
11. Go to Settings > Data Model.
12. Set up all the required collections (e.g., articles, projects, people).
13. Create a new collection with the following settings:
    • Set the name as “cf_cache_options”.
    • Check the singleton checkbox.
    • Skip the configuration of other parameters and save.
14. Click on Data Model and create a new collection with the following settings:
    • Set the name as “global_query_params”.
    • Skip the configuration of other parameters and save.
15. Create the following fields in the “global_query_params” collection:
    • description with string type.
    • operation with string type (either “list” or “get”).
    • collection with string type (collection names that you want to cache).
    • key with string type (cache key to differentiate the request).
16. Deploy the directus-cf-cache to Cloudflare Pages and Cloudflare Workers.

Summary

The directus-cf-cache tool provides a convenient way to cache and limit access to data managed on a Directus instance. It leverages Cloudflare Workers, Workers KV, and Cloudflare Pages to ensure the availability of the API and allow users to serve content from the Directus instance or the KV cache. It also enables caching of image assets and supports automatic cache updates upon webhook trigger. With a demo Vue web application available, users can easily showcase the functionality of directus-cf-cache.