Meta tags:
description=Documentation for Cloudflare Workers, a serverless execution environment that allows you to create entirely new applications or augment existing ones without configuring or maintaining infrastructure.;

Headings (most frequently used words):

your, configure, cdn, before, you, start, overview, prerequisites, generate, build, publish, resources, handling, requests, routing, to, assets, custom, caching,

Text of the page (most frequently used words):
the (112), response (64), workers (43), and (42), your (41), event (38), you (37), cloudflare (34), this (33), function (31), #request (28), url (27), external (25), link (25), cache (25), that (23), new (20), status (19), return (19), icon (18), from (18), storage (18), can (18), cloud (17), for (16), should (16), use (15), open (14), with (14), tutorial (13), assets (13), code (13), cdn (13), serveasset (13), bucket (13), set (13), get (12), project (12), asset (12), const (12), worker (12), will (11), build (11), fetch (11), jpg (10), wrangler (10), publish (9), handlerequest (9), async (9), index (9), start (8), like (8), using (8), method (8), how (8), serve (8), requests (8), google (8), building (7), com (7), await (7), pathname (7), which (7), through (7), docs (7), serverless (6), cached (6), faces (6), script (6), default (6), when (6), responses (6), custom (6), given (6), hello (6), expand (6), github (5), started (5), own (5), check (5), our (5), template (5), make (5), let (5), headers (5), public (5), control (5), bucket_url (5), back (5), 200 (5), caching (5), data (5), functions (5), works (5), generate (5), projects (4), templates (4), application (4), instance (4), header (4), indicate (4), not (4), 405 (4), 399 (4), clone (4), put (4), bucket_name (4), just (4), api (4), receives (4), configuration (4), objects (4), have (4), configure (4), tutorials (4), web (4), want (3), provided (3), built (3), serving (3), deploying (3), route (3), being (3), available (3), allowed (3), else (3), statustext (3), body (3), max (3), age (3), 14400 (3), match (3), http (3), respondwith (3), addeventlistener (3), final (3), before (3), there (3), one (3), thing (3), requested (3), doesn (3), pass (3), directly (3), client (3), instead (3), html (3), only (3), implementation (3), well (3), what (3), are (3), incoming (3), ensure (3), applications (3), javascript (3), guide (3), sample (3), images (3), existing (3), platform (3), cli (3), theme (3), depiction (3), readablestream (3), streams (3), hours (2), gallery (2), see (2), full (2), visit (2), resources (2), after (2), browser (2), going (2), addition (2), content (2), hit (2), myassets (2), waituntil (2), caches (2), googleapis (2), writing (2), version (2), publishing (2), more (2), currently (2), exist (2), access (2), corresponding (2), error (2), doing (2), where (2), level (2), codes (2), success (2), original (2), solution (2), example (2), construct (2), much (2), presence (2), those (2), look (2), point (2), would (2), fully (2), here (2), configuring (2), powerful (2), making (2), path (2), constant (2), log (2), parse (2), find (2), configured (2), https (2), routing (2), inside (2), create (2), simple (2), text (2), handling (2), network (2), easy (2), customize (2), tooling (2), edge (2), pattern (2), all (2), makes (2), them (2), support (2), directory (2), command (2), line (2), tool (2), publicly (2), follow (2), found (2), upload (2), don (2), prerequisites (2), deploy (2), overview (2), getting (2), dark (2), writablestream (2), fetchevent (2), durable (2), runtime (2), apis (2), sites (2), pricing (2), playground (2), learning (2), menu (2), logo (2), logomark (2), dec (2), updated, ago, edit, out, quick, published, source, repo, test, retrieving, deployed, show, uploaded, inspect, confirm, send, whether, was, miss, need, first, then, hugo, finished, added, policy, include, page, returned, checked, higher, than, redirection, truncated, add, something, important, note, designed, processed, once, according, service, spec, implements, around, cloned, looks, common, way, they, respects, many, others, indicating, enabling, value, seconds, four, retrieved, copying, but, overwriting, define, information, passing, handler, provides, two, general, flow, give, functional, could, retrieve, wrapping, continue, explore, really, bucketurl, bucketname, simply, append, end, console, looking, definition, beginning, section, field, parsed, library, class, number, useful, properties, used, query, contains, part, mysite, host, clear, bulk, happen, conditional, replacing, separate, house, majority, remainder, returns, begin, adding, additional, coming, other, resulting, below, delete, post, runs, because, also, both, behavior, logic, globally, distributed, centers, result, understand, highly, performant, ability, specific, needs, wildcard, any, modern, modules, npm, packages, together, aren, same, process, today, comes, into, uses, means, continuing, origin, standard, server, accept, allows, respond, quickly, efficiently, constructing, file, action, constructs, explicit, param, listening, events, fired, occurs, user, walk, understanding, featured, includes, based, represents, entry, git, repositories, ton, options, help, name, managing, has, great, pre, collections, finally, accessible, groups, readable, along, download, zipped, folder, root, structure, image, collection, illustrate, profile, pictures, via, formatted, numeric, order, 199, uifaces, assumes, recommend, quickstart, jump, straight, made, codebase, take, happy, coding, interested, prior, experience, assumed, serves, users, approach, called, white, labelling, often, takes, form, complex, dns, thanks, fast, problem, few, lines, assume, already, gone, gets, account, top, moon, light, sun, search, magnifying, glass, webpack, commands, authentication, install, update, crypto, defaultwriter, transformstream, defaultreader, byobreader, scheduledevent, htmlrewriter, encoding, standards, scratch, cron, triggers, button, environments, scripts, routes, limits, languages, integrations, metrics, analytics, security, model, debugging, lifecycle, starters, examples, welcome, discord, home, dropdown, navigation, skip, app, best, enabled, wayback, machine, archive, org, 20210119084446, developers, timestamps, about, capture, fail, 2022, 2021, 2020, feb, jan, sep, 2019, 2025, 236, captures,

Text of the page (random words):
s the wayback machine http web archive org web 20210119084446 https developers cloudflare com workers tutorials configure your cdn this app works best with javascript enabled skip to content cloudflare docs logomark cloudflare docs cloudflare workers logo workers navigation menu icon open external link cloudflare docs logomark cloudflare docs cloudflare workers logo workers dropdown icon workers menu workers home playground pricing discord welcome examples starters tutorials expand learning learning getting started playground fetchevent lifecycle debugging workers how workers works how kv works how the cache works using streams using durable objects security model metrics and analytics integrations expand platform platform languages limits pricing routes scripts environments deploy button cron triggers expand workers sites workers sites start from existing start from scratch start from worker configuration expand runtime apis runtime apis web standards addeventlistener cache durable objects encoding fetch fetchevent htmlrewriter kv request response scheduledevent expand streams streams readablestream readablestream byobreader readablestream defaultreader transformstream writablestream writablestream defaultwriter web crypto expand cli wrangler cli wrangler install update authentication commands configuration webpack search icon depiction of a magnifying glass github icon visit workers on github light theme icon depiction of a sun dark theme icon depiction of a moon set theme to dark d top overview prerequisites generate build handling requests routing to your assets custom caching publish resources tutorials configure your cdn before you start all of the tutorials assume you ve already gone through getting started which gets you set up with a cloudflare workers account and the workers cli tool wrangler external link icon open external link overview in this tutorial you ll build and publish a cloudflare workers function that serves assets from a storage platform in this example google cloud storage external link icon open external link to your users this approach called white labelling often takes the form of complex dns configuration thanks to cloudflare workers and cloudflare s cdn we can build a powerful and fast solution to this problem in just a few lines of code if you re interested in building and publishing a cloudflare workers function to configure your cdn this is the guide for you no prior experience with serverless functions or cloudflare workers is assumed one more thing before you start the tutorial if you just want to jump straight to the code we ve made the final version of the codebase available on github external link icon open external link you can take that code customize it and deploy it for use in your own projects happy coding prerequisites this tutorial assumes that you have a public bucket on google cloud storage which you ll use to serve assets through your cloudflare workers function if you don t have a google cloud storage bucket to use with this project we recommend going through google cloud s cloud storage quickstart guide which can be found here external link icon open external link this tutorial makes use of sample images to illustrate serving data through your cloudflare workers function if you have an existing set of images you d like to use you can upload those to your google cloud storage bucket and use them if you don t have an existing set of images we ve provided a sample set of profile pictures via uifaces com external link icon open external link formatted in numeric order 1 jpg 2 jpg 199 jpg to follow along with this tutorial using the data set we ve provided download the sample image collection external link icon open external link and upload the zipped folder faces to root of your bucket the directory structure should look like this your bucket faces 1 jpg 2 jpg 99 jpg finally to ensure that you can access the objects from your workers function your google cloud storage bucket should be publicly accessible to ensure this follow the making groups of objects publicly readable guide in the google cloud storage docs which can be found at google cloud s docs external link icon open external link generate cloudflare s command line tool for managing worker projects wrangler has great support for templates pre built collections of code that make it easy to get started writing workers we ll make use of the default javascript template to start building your project in the command line generate your workers project and pass the project name serve cdn assets generate a new project wrangler generate serve cdn assets cd serve cdn assets by default wrangler will use our worker template external link icon open external link wrangler templates are just git repositories so if you want to create your own templates or use one from our template gallery there s a ton of options to help you get started cloudflare s worker template includes support for building and deploying javascript based projects inside of your new serve cdn assets directory index js represents the entry point to your cloudflare workers application all cloudflare workers applications start by listening for fetch events which are fired when a client makes a request to a workers route when that request occurs you can construct responses and return them to the user this tutorial will walk you through understanding how the request response pattern works and how we can use it to build fully featured applications index js addeventlistener fetch event event respondwith handlerequest event fetch and log a request param request request async function handlerequest event return new response hello worker status 200 in your default index js file we can see that request response pattern in action the handlerequest constructs a new response with the body text hello worker as well as an explicit status code of 200 when a fetch event comes into the worker the script uses event respondwith to return that new response back to the client this means that your cloudflare workers script will serve new responses directly from cloudflare s edge network instead of continuing to the origin where a standard server would accept requests and return responses cloudflare workers allows you to respond quickly and efficiently by constructing responses directly on the edge build any project you publish to cloudflare workers can make use of modern js tooling like es modules npm packages and async await external link icon open external link functions to put together your application in addition simple serverless functions aren t the only thing you can publish on cloudflare workers you can build full applications or serverless functions using the same tooling and process as what we ll be building today the cloudflare workers project built in this tutorial will be a serverless function that runs on a wildcard route and receives requests when the serverless function receives an incoming request it should parse the url find what asset is being requested and serve it from the configured cloud storage bucket because the asset will go through your workers function and through cloudflare s network you can also make use of both cloudflare s default caching behavior as well as your own custom logic to ensure that as much data can be cached at cloudflare s globally distributed data centers the result is an easy to understand and highly performant cdn configuration with the ability to customize it to your application s specific needs handling requests currently the workers function receives requests and returns a simple response with the text hello worker begin configuring the function by adding an additional check requests coming in to the function should only be get requests if it receives other requests like post s or delete s it should return an error response with a status code of 405 external link icon open external link using event request method the resulting code is below index js async function handlerequest event if event request method get return new response hello worker status 200 else return new response method not allowed status 405 given that the incoming request to the function is a get it should be clear that the bulk of our implementation will happen inside of that conditional replacing the hello worker response create a separate function serveasset which will house the majority of the implementation for the remainder of the tutorial index js async function serveasset event return new response hello worker status 200 async function handlerequest event if event request method get return serveasset event routing to your assets looking back at the original definition of this project at the beginning of the build section the serveasset function should parse the url find what asset is being requested and serve it from the configured cloud storage bucket to do this the event request url field should be parsed using the url library and set to url given an instance of the url class url there are a number of useful properties that can be used to query the incoming request serveasset should check the pathname which contains the part of the url after the host for instance given the url https assets mysite com faces 1 jpg the pathname will be faces 1 jpg index js function serveasset event const url new url event request url console log url pathname faces 1 jpg with that path available the function can simply request the corresponding path from our cloud storage bucket given a constant bucket_name we ll set it in this tutorial to my bucket set a bucket_url constant append url pathname to the end of it and fetch it to get your function s response index js const bucket_name my bucket const bucket_url http storage googleapis com bucketname function serveasset event const url new url event request url return fetch bucketurl url pathname custom caching at this point in the tutorial deploying this script would give you a fully functional project you could use to retrieve assets from your cloud storage bucket instead of wrapping up the tutorial here let s continue to explore how configuring your cdn is really powerful with workers by making use of the cache api to cache responses in a workers function the cache api provides cache match to check for the presence of a cached asset and cache put to cache a response for a given request given those two functions the general flow will look like this check for the presence of a cached asset and set it to response if response doesn t exist get the asset from cloud storage set it to response and cache it return response from the function back to the fetch event handler the cache control header is a common way that html responses indicate how they should be cached the workers implementation respects the cache control header as well as many others in indicating how assets should be cached on cloudflare s cdn in building a custom asset serving solution and enabling caching you should set a custom cache control header in this example we ll set it to public and a max age value of 14400 seconds or four hours when the asset is retrieved from cloud storage the serveasset function should construct a new instance of response copying much of the html response data from the cloud storage response but overwriting the response headers by doing this you ll define your own custom caching information and passing it to the workers cache api when you add something to the cache it s important to note that an html response is designed to only be processed once in your code according to the service worker spec that cloudflare workers implements to get around this we ll clone the asset response using response clone and pass that cloned response to the cache api and return the original response back from the function the final code looks like this index js async function serveasset event const url new url event request url const cache caches default let response await cache match event request if response response await fetch bucket_url url pathname const headers cache control public max age 14400 response new response response body response headers event waituntil cache put event request response clone return response before building and publishing your workers script there s one more thing to be added currently if an asset is requested that doesn t exist or if your bucket policy doesn t include public access to an asset serveasset will pass back the corresponding error page directly to the client instead of doing this the returned response should be checked in handlerequest if the status code is higher than 399 where 200 level status codes indicate success and 399 level status codes indicate redirection we can return a truncated response with just the status and statustext from response index js async function handlerequest event if event request method get let response await serveasset event if response status 399 response new response response statustext status response status return response else return new response method not allowed status 405 and with that you re finished writing the code for this tutorial the final version of your script should like this addeventlistener fetch event event respondwith handlerequest event const bucket_name hugo workers const bucket_url http storage googleapis com bucket_name async function serveasset event const url new url event request url const cache caches default let response await cache match event request if response response await fetch bucket_url url pathname const headers cache control public max age 14400 response new response response body response headers event waituntil cache put event request response clone return response async function handlerequest event if event request method get let response await serveasset event if response status 399 response new response response statustext status response status return response else return new response method not allowed status 405 publish to make this script available for use you ll need to build and publish it to cloudflare using wrangler to do this we ll first build the code and then publish it build and publish your project wrangler build wrangler publish after deploying your project open up your browser to test retrieving your assets for instance if your workers project is deployed to the route myassets com going to the url myassets com faces 1 jpg should show an uploaded asset in addition you can inspect the request in your browser to confirm that it s being cached cloudflare s cdn will send a cf cache status header with hit or miss to indicate whether the content was a cache hit or not resources in this tutorial you built and published a serverless function to cloudflare workers for serving assets from cloud storage if you d like to see the full source code for this application visit the repo on github external link icon open external link if you want to get started building your own projects check out the quick start templates we ve provided i...