{"id":276056,"date":"2021-06-16T15:00:53","date_gmt":"2021-06-16T12:00:53","guid":{"rendered":"https:\/\/en.buradabiliyorum.com\/how-to-run-javascript-at-the-edge-with-aws-cloudfront-functions-cloudsavvy-it\/"},"modified":"2021-06-16T15:00:53","modified_gmt":"2021-06-16T12:00:53","slug":"how-to-run-javascript-at-the-edge-with-aws-cloudfront-functions-cloudsavvy-it","status":"publish","type":"post","link":"https:\/\/buradabiliyorum.com\/en\/how-to-run-javascript-at-the-edge-with-aws-cloudfront-functions-cloudsavvy-it\/","title":{"rendered":"#How To Run JavaScript At The Edge With AWS CloudFront Functions \u2013 CloudSavvy IT"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_85 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<label for=\"ez-toc-cssicon-toggle-item-6a3dfd3c06580\" class=\"ez-toc-cssicon-toggle-label\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #dd3333;color:#dd3333\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #dd3333;color:#dd3333\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input type=\"checkbox\"  id=\"ez-toc-cssicon-toggle-item-6a3dfd3c06580\" checked aria-label=\"Toggle\" \/><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/buradabiliyorum.com\/en\/how-to-run-javascript-at-the-edge-with-aws-cloudfront-functions-cloudsavvy-it\/#Doesnt_AWS_Already_Have_LambdaEdge\" >Doesn\u2019t AWS Already Have Lambda@Edge?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/buradabiliyorum.com\/en\/how-to-run-javascript-at-the-edge-with-aws-cloudfront-functions-cloudsavvy-it\/#Using_CloudFront_Functions\" >Using CloudFront Functions<\/a><\/li><\/ul><\/nav><\/div>\n<p><strong>&#8220;#How To Run Java<a href=\"https:\/\/buradabiliyorum.com\/en\/category\/download-scripts-themes-apps\/\" data-internallinksmanager029f6b8e52c=\"9\" title=\"Download Scripts &amp; Themes &amp; Apps\" target=\"_blank\" rel=\"noopener\">Script<\/a> At The Edge With AWS CloudFront Functions \u2013 CloudSavvy IT&#8221;<\/strong><\/p>\n<div id=\"article-content-area\">\n<img loading=\"lazy\" decoding=\"async\" class=\"type:primaryImage alignnone size-full wp-image-5269\" src=\"https:\/\/www.cloudsavvyit.com\/p\/uploads\/2020\/06\/e601b806.png?width=1198&amp;trim=1,1&amp;bg-color=000&amp;pad=1,1\" alt=\"AWS Logo\" width=\"700\" height=\"300\" onload=\"pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\" onerror=\"this.onerror=null;pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\"\/><\/p>\n<p>Many applications need the lowest latency possible, but still want to execute some form of logic. While Content Delivery Networks (CDNs) are traditionally static, it\u2019s becoming increasingly common to run code at the edge of the network, closest to the user.<\/p>\n<p><strong>RELATED:<\/strong> <strong><em>A CDN Can Speed Up Your Website. Here&#8217;s What You Need to Know!<\/em><\/strong><\/p>\n<h2 role=\"heading\" aria-level=\"2\"><span class=\"ez-toc-section\" id=\"Doesnt_AWS_Already_Have_LambdaEdge\"><\/span>Doesn\u2019t AWS Already Have Lambda@Edge?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/aws.amazon.com\/blogs\/aws\/introducing-cloudfront-functions-run-your-code-at-the-edge-with-low-latency-at-any-scale\/?tag=reviewgeek-20\">CloudFront Functions<\/a> isn\u2019t the first or only way to run your custom code at the edge of a CDN. AWS has had <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/aws.amazon.com\/lambda\/edge\/?tag=reviewgeek-20\">Lambda@Edge<\/a> for a while now, which lets you run any Lambda function on a CDN edge, <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/aws.amazon.com\/lambda\/pricing\/?tag=reviewgeek-20\">albeit for three times the cost<\/a>.<\/p>\n<p>This cost prohibits a lot of simple transformation functions from being very viable to run at the edge. In many cases, you don\u2019t need to do more than a simple string manipulation or basic request\/response. These can be executed instead by short-lived, basic functions.<\/p>\n<p>Hence the need for CloudFront Functions. They\u2019re only able to run lightweight JavaScript code, but they run at all CloudFront CDN edge nodes for 1\/6 of the price of Lambda@Edge. In fact, that\u2019s even cheaper than Lambda itself is.<\/p>\n<p>Since it\u2019s only lightweight JS, the uses for it are a lot narrower. But, there are still quite a few operations that it\u2019s good for, such as:<\/p>\n<ul>\n<li>Header manipulation<\/li>\n<li>URL redirects or rewrites<\/li>\n<li>Request authorization<\/li>\n<li>Cache key normalization<\/li>\n<\/ul>\n<p>You have two options for when to run CloudFront Functions: either before or after CloudFront fetches the response from the CDN. If you\u2019re modifying URLs or validating authentication tokens, you may want to run before. If you\u2019re just modifying outgoing headers, it may not matter.<\/p>\n<p>One thing it can\u2019t do is manipulate content from the origin server before it is cached, i.e. on the Origin Response; you can only run functions on viewer request, or viewer response. For anything else, you\u2019ll need to use Lambda@Edge.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-12014\" src=\"https:\/\/www.cloudsavvyit.com\/p\/uploads\/2021\/06\/8b55e945.png?trim=1,1&amp;bg-color=000&amp;pad=1,1\" alt=\"\" width=\"700\" height=\"282\" onload=\"pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\" onerror=\"this.onerror=null;pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\"\/><\/p>\n<p>Functions should run for a maximum execution time of less than 1 millisecond. This ensures performance is good even across millions of requests. CloudFront functions use a new process-based isolation model with limited filesystem and network access, which should be a performance improvement over Lambda\u2019s traditional VM solution.<\/p>\n<p>In exchange for 1\/6 of the cost, you get a total package size of 10 KB, and\u00a02MB of memory. Use it wisely.<\/p>\n<h2 role=\"heading\" aria-level=\"2\"><span class=\"ez-toc-section\" id=\"Using_CloudFront_Functions\"><\/span>Using CloudFront Functions<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>To start, you will of course need to be using a CloudFront CDN. If you\u2019re not, and want to get started with one, you can read our guide to setting one up.<\/p>\n<p><strong>RELATED:<\/strong> <strong><em>Getting Started With AWS&#8217;s CloudFront CDN<\/em><\/strong><\/p>\n<p>From the <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/console.aws.amazon.com\/cloudfront\/?tag=reviewgeek-20\">CloudFront Console<\/a>, click on \u201cFunctions\u201d in the sidebar and create a new function:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-12016\" src=\"https:\/\/www.cloudsavvyit.com\/p\/uploads\/2021\/06\/58a6381b.png?trim=1,1&amp;bg-color=000&amp;pad=1,1\" alt=\"\" width=\"689\" height=\"315\" onload=\"pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\" onerror=\"this.onerror=null;pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\"\/><\/p>\n<p>Give it a name, and you will then be brought to a screen where you can build, test, publish, and deploy the function.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-12017\" src=\"https:\/\/www.cloudsavvyit.com\/p\/uploads\/2021\/06\/bba7986b.png?trim=1,1&amp;bg-color=000&amp;pad=1,1\" alt=\"\" width=\"700\" height=\"361\" onload=\"pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\" onerror=\"this.onerror=null;pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\"\/><\/p>\n<p>Of course, the code you write will vary wildly depending on your goals. For this tutorial, I\u2019ll simply make a completely useless function that changes every status code to 404 and turns off the website, because that\u2019s easy to test.<\/p>\n<p>Make sure to click \u201cSave\u201d after writing code, before moving on to the next step, testing. You\u2019re given a few sample test events based on different event types, for which you can choose the URL and request headers the client is sending.<\/p>\n<p>It will fetch a response from the CDN like it would in production. This should make it easy to test any function before going live with it.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-12018\" src=\"https:\/\/www.cloudsavvyit.com\/p\/uploads\/2021\/06\/6f829399.png?trim=1,1&amp;bg-color=000&amp;pad=1,1\" alt=\"\" width=\"700\" height=\"512\" onload=\"pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\" onerror=\"this.onerror=null;pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\"\/><\/p>\n<p>Then, on the next page, click \u201cpublish\u201d to save your changes to the production version of the function. This doesn\u2019t apply it to the CDN automatically though; you will need to associate it with a CloudFront distribution, or multiple distributions.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-12019\" src=\"https:\/\/www.cloudsavvyit.com\/p\/uploads\/2021\/06\/a719213b.png?trim=1,1&amp;bg-color=000&amp;pad=1,1\" alt=\"\" width=\"700\" height=\"350\" onload=\"pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\" onerror=\"this.onerror=null;pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\"\/><\/p>\n<p>You will of course want to test that the production version is working properly. Head over to your CDN and you should see the function being applied. In this case, the function is doing its job of making my example website entirely unusable.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-12020\" src=\"https:\/\/www.cloudsavvyit.com\/p\/uploads\/2021\/06\/a623eaf1.png?trim=1,1&amp;bg-color=000&amp;pad=1,1\" alt=\"\" width=\"428\" height=\"136\" onload=\"pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\" onerror=\"this.onerror=null;pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\"\/><\/p>\n<p>If it\u2019s not working, you may want to consider adding <code>console.log()<\/code> statements, which will get sent directly to AWS CloudWatch. This is the only available form of logging, besides basic metrics, as the functions are very lightweight. For more info, you can <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/docs.aws.amazon.com\/AmazonCloudFront\/latest\/DeveloperGuide\/monitoring-functions.html?tag=reviewgeek-20\">read AWS\u2019s guide on logging in CloudFront Functions<\/a>.\n<\/div>\n<blockquote><p><strong><span style=\"color: #ff6600;\">If you liked the article, do not forget to share it with your friends. Follow us on\u00a0<span style=\"color: #ff0000;\"><a style=\"color: #ff0000;\" href=\"https:\/\/news.google.com\/publications\/CAAqBwgKMLG0nwswvr63Aw\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Google News<\/a><\/span>\u00a0too, click on the star and choose us from your favorites.<\/span><\/strong><\/p><\/blockquote>\n<blockquote>\n<p style=\"text-align: center;\">For forums sites go to <span style=\"color: #ff9900;\"><a style=\"color: #ff9900;\" href=\"https:\/\/forum.buradabiliyorum.com\/\" target=\"_blank\" rel=\"noopener\">Forum.BuradaBiliyorum.Com<\/a><\/span><\/strong><\/p>\n<\/blockquote>\n<blockquote>\n<p style=\"text-align: center;\"><strong>If you want to read more like this article, you can visit our <span style=\"color: #ff9900;\"><a style=\"color: #ff9900;\" href=\"https:\/\/en.buradabiliyorum.com\/technology\/\" target=\"_blank\" rel=\"noopener\">Technology category.<\/a><\/span><\/strong><\/p>\n<\/blockquote>\n<p><span style=\"color: black;\"><a style=\"color: #ff9900;\" href=\"https:\/\/www.cloudsavvyit.com\/12013\/how-to-run-javascript-at-the-edge-with-aws-cloudfront-functions\/\" target=\"_blank\" rel=\"noopener\">Source<\/a><\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>&#8220;#How To Run JavaScript At The Edge With AWS CloudFront Functions \u2013 CloudSavvy IT&#8221; Many applications need the lowest latency possible, but still want to execute some form of logic. While Content Delivery Networks (CDNs) are traditionally static, it\u2019s becoming increasingly common to run code at the edge of the network, closest to the user&#8230;.<\/p>\n","protected":false},"author":1,"featured_media":276057,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"fifu_image_url":"https:\/\/www.cloudsavvyit.com\/p\/uploads\/2020\/06\/e601b806.png","fifu_image_alt":"","footnotes":""},"categories":[18],"tags":[],"class_list":["post-276056","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-technology"],"_links":{"self":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/posts\/276056","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/comments?post=276056"}],"version-history":[{"count":0,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/posts\/276056\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/media\/276057"}],"wp:attachment":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/media?parent=276056"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/categories?post=276056"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/tags?post=276056"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}