diff --git a/architecture/static-websites.mdx b/architecture/static-websites.mdx index f62731d..7b27c5d 100644 --- a/architecture/static-websites.mdx +++ b/architecture/static-websites.mdx @@ -101,3 +101,44 @@ CMD ["npm", "run", "dev"] ## Setup caching w/ Cloudflare + + This feature only works with a custom domain set up in the environment your application is deployed. + + +Caching in Cloudflare offers significant performance benefits such as reducing server load, enhancing scalability, and improving the user experience of your application. +By leveraging Cloudflare's caching capabilities, you can optimize the delivery of your content and achieve faster, more reliable, and cost-effective web experiences. + +### Add a domain in Architect.io +Let's say you have an account name `my-account`. Under this account, create an environment, for example `example-environment`. +Go to the `Settings` of `example-environment` and provide your DNS Zone. +Click on `Register DNS Zone`. Copy the target endpoint to be used in configuration of Cloudflare DNS record. + +### Configure cache in Cloudflare +To setup caching with Cloudflare, register a Cloudflare account and add your domain. +Then, configure the DNS records for your domain by creating a CNAME using the copied target endpoint generated by Architect.io. +To add a DNS record, click on the `Add record` button, select `CNAME` from `Type`, put in the wildcard `*` for `Name`, and the target endpoint for `IPv4 address`. + +Once the DNS record is added to Cloudflare, go to the `Caching` section of the Cloudflare sidebar. +Under `Configuration`, you can change the different settings of caching to fit your need, such as `Caching Level`, `Browser Cache TTL`, etc. + +You can also customize the caching behavior of specific HTTP requests by setting up Cache Rules in Cloudflare. +Cache Rules allow you to define criteria and actions to determine how Cloudflare should cache and serve content from its servers. +For example, if the domain name is `example.com` and you would like to cache all the HTTP requests, configure the `Field` to match `Hostname` with `Operator` of `contains` and `Value` of `example.com`. +![Cache rule](/images/cache-rule.png) +Then, give this rule a name and click on `Deploy`. + +Now, deploy your application in the `example-environment`. + +### Verify caching in browser +Once your application is successfully deployed with Architect, go to an endpoint of your website, for example, `.example.com` where `` is a service name of your application. +Next, open `Network` of your browser. For Mac, use `Command + Option + I` and for Windows, Linux, Chrome: `Control + Shift + I`. +Click on the endpoint that you cached and inspect the `Reponse Headers`. After a hard reload of your browser, you should see the `cf-cache-status` to be `HIT`. +``` +cf-cache-status: HIT +``` +This indicates that the data are retrieved from the Cloudflare cache instead of fetching it from the origin server. + +When you access a website that is using Cloudflare caching, the first request will usually take longer to load because it has to fetch the content from the origin server. +Subsequent requests for the same content should be faster because Cloudflare will serve the content from its cache instead of fetching it from the origin server. + +[Learn more about Cloudflare Cache](https://developers.cloudflare.com/cache/) diff --git a/images/cache-rule.png b/images/cache-rule.png new file mode 100644 index 0000000..f0d2fbd Binary files /dev/null and b/images/cache-rule.png differ