From a85989db58b315a850c89a9f576fd5e03592d3c4 Mon Sep 17 00:00:00 2001 From: mtgoncalves1 Date: Thu, 11 May 2023 15:33:19 -0400 Subject: [PATCH 1/2] WIP --- architecture/static-websites.mdx | 32 ++++++++++++++++++++++++++++++++ 1 file changed, 32 insertions(+) diff --git a/architecture/static-websites.mdx b/architecture/static-websites.mdx index f62731d..5483537 100644 --- a/architecture/static-websites.mdx +++ b/architecture/static-websites.mdx @@ -101,3 +101,35 @@ CMD ["npm", "run", "dev"] ## Setup caching w/ Cloudflare +... describe how to set up Cloudflare for caching ... + +You can set caching for an individual endpoint or set for specific set of endpoint. + +### Set up cache for one endpoint: +``` js +app.get('/', function(req, res) { + // Cache for one week + res.set('cache-control', 'public, max-age=604800'); + res.send('Hello, World!'); +}); +``` + +### Set up cache for all requests that have url starting with `/static/` +``` js +const express = require('express'); +const app = express(); + +app.set('port', (process.env.PORT || 3000)); +app.use(express.static(__dirname + '/public')); + +// Add cache headers to responses +app.use((req, res, next) => { + // Cache all assets with request url starting with /static/ for one week + if (req.url.startsWith('/static/')) { + res.set('Cache-Control', 'public, max-age=604800'); + } + + next(); +}); +``` +To check that the cache is working, you can check Network on your browser. From fc60ef9c91e6b254030718129002e2cf333c9c69 Mon Sep 17 00:00:00 2001 From: mtgoncalves1 Date: Tue, 16 May 2023 16:21:45 -0400 Subject: [PATCH 2/2] Static Websites --- architecture/static-websites.mdx | 67 ++++++++++++++++++------------- images/cache-rule.png | Bin 0 -> 8951 bytes 2 files changed, 38 insertions(+), 29 deletions(-) create mode 100644 images/cache-rule.png diff --git a/architecture/static-websites.mdx b/architecture/static-websites.mdx index 5483537..7b27c5d 100644 --- a/architecture/static-websites.mdx +++ b/architecture/static-websites.mdx @@ -101,35 +101,44 @@ CMD ["npm", "run", "dev"] ## Setup caching w/ Cloudflare -... describe how to set up Cloudflare for caching ... - -You can set caching for an individual endpoint or set for specific set of endpoint. - -### Set up cache for one endpoint: -``` js -app.get('/', function(req, res) { - // Cache for one week - res.set('cache-control', 'public, max-age=604800'); - res.send('Hello, World!'); -}); + + 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. -### Set up cache for all requests that have url starting with `/static/` -``` js -const express = require('express'); -const app = express(); - -app.set('port', (process.env.PORT || 3000)); -app.use(express.static(__dirname + '/public')); - -// Add cache headers to responses -app.use((req, res, next) => { - // Cache all assets with request url starting with /static/ for one week - if (req.url.startsWith('/static/')) { - res.set('Cache-Control', 'public, max-age=604800'); - } +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. - next(); -}); -``` -To check that the cache is working, you can check Network on your browser. +[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 0000000000000000000000000000000000000000..f0d2fbd07ce27db57781ee2dd21a7d98b77919d0 GIT binary patch literal 8951 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 literal 0 HcmV?d00001