Merge pull request #108 from MatrixAI/feature-cf-cache-change

Add cf cache header changes for versioned assets.

Author: shafiqihtsham

.env.example

@@ -2,3 +2,6 @@
 CLOUDFLARE_ACCOUNT_ID=5e0333335a21846798fafca9e55e044f
 # Cloudflare API TOKEN
 CLOUDFLARE_API_TOKEN=
+# Development Enivronment Key
+# Change this to 'production' when in production
+POLYKEY_DOCS_ENV=development

.github/workflows/ci.yml

@@ -65,6 +65,7 @@ jobs:
           deployment_tier: 'development'
           CLOUDFLARE_ACCOUNT_ID: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
           CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}
+          POLYKEY_DOCS_ENV: ${{ secrets.POLYKEY_DOCS_ENV }}
         run: |
           echo 'Perform service deployment for feature'
           nix develop .#ci --command bash -c $'
@@ -124,6 +125,7 @@ jobs:
           deployment_tier: 'staging'
           CLOUDFLARE_ACCOUNT_ID: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
           CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}
+          POLYKEY_DOCS_ENV: ${{ secrets.POLYKEY_DOCS_ENV }}
         run: |
           nix develop .#ci --command bash -c $'
           npm run deploy -- --env staging
@@ -186,6 +188,7 @@ jobs:
           deployment_tier: 'production'
           CLOUDFLARE_ACCOUNT_ID: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
           CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}
+          POLYKEY_DOCS_ENV: ${{ secrets.POLYKEY_DOCS_ENV }}
         run: |
           nix develop .#ci --command bash -c $'
           npm run deploy -- --env production

package.json

@@ -4,6 +4,8 @@
   "scripts": {
     "lint": "eslint '{src,server,scripts}/**/*.{js,ts,jsx,tsx,json}' 'docusaurus.config.ts'",
     "lintfix": "eslint '{src,server,scripts}/**/*.{js,ts,jsx,tsx,json}' 'docusaurus.config.ts' --fix",
+    "lintcontent": "prettier --check '{blog,docs}/**/*.{md,mdx}'",
+    "lintcontentfix": "prettier --write '{blog,docs}/**/*.{md,mdx}'",
     "start": "docusaurus start",
     "swizzle": "docusaurus swizzle",
     "build": "docusaurus build --out-dir=./public",

scripts/deploy.js

@@ -64,7 +64,9 @@ async function main(argv = process.argv) {
   ];
   console.error(['wrangler', ...secretBulkArgs].join(' '));
   childProcess.execFileSync('wrangler', secretBulkArgs, {
-    input: JSON.stringify({}),
+    input: JSON.stringify({
+      POLYKEY_DOCS_ENV: process.env.POLYKEY_DOCS_ENV,
+    }),
   });
   const deployArgs = ['deploy', '--config', './wrangler.toml', ...restArgs];
   console.error(['wrangler', ...deployArgs].join(' '));

server/worker.ts

@@ -7,6 +7,7 @@ import assetManifestJSON from '__STATIC_CONTENT_MANIFEST';
 export interface Env {
   // CF Worker Sites automatically injects this to point to the KV namespace
   __STATIC_CONTENT: string;
+  POLYKEY_DOCS_ENV: string;
 }
 
 const router = ittyRouter.Router();
@@ -30,9 +31,8 @@ function mapRequestToDocs(req: Request): Request {
 
 router.all('*', async (req: Request, env: Env, ctx: ExecutionContext) => {
   const cacheControl = {
-    browserTTL: 30 * 24 * 60 * 60,
     edgeTTL: 2 * 24 * 60 * 60,
-    bypassCache: false,
+    bypassCache: env.POLYKEY_DOCS_ENV === 'development' ? true : false,
   };
   const url = new URL(req.url);
   // Check if the URL pathname is exactly '/docs'
@@ -44,7 +44,7 @@ router.all('*', async (req: Request, env: Env, ctx: ExecutionContext) => {
   // wrangler as a cache busting measure.
   const assetManifest = JSON.parse(assetManifestJSON);
   try {
-    return await cloudflareKVAssetHandler.getAssetFromKV(
+    const response = await cloudflareKVAssetHandler.getAssetFromKV(
       {
         request: req,
         waitUntil: ctx.waitUntil.bind(ctx),
@@ -56,6 +56,14 @@ router.all('*', async (req: Request, env: Env, ctx: ExecutionContext) => {
         ASSET_MANIFEST: assetManifest,
       },
     );
+
+    if (req.url.includes('assets')) {
+      response.headers.set('Cache-Control', 'max-age=31536000, immutable');
+    } else {
+      response.headers.set('Cache-Control', 'max-age=86400');
+    }
+
+    return response;
   } catch (e) {
     if (e instanceof cloudflareKVAssetHandler.NotFoundError) {
       console.log('Requested resource not found', e.message);
@@ -74,8 +82,14 @@ router.all('*', async (req: Request, env: Env, ctx: ExecutionContext) => {
           ASSET_MANIFEST: assetManifest,
         },
       );
+
+      const headers = new Headers(response404.headers);
+
+      headers.set('Cache-Control', 'max-age=86400');
+
       return new Response(response404.body, {
         ...response404,
+        headers,
         status: 404,
       });
     } else if (e instanceof cloudflareKVAssetHandler.MethodNotAllowedError) {