From e52f280517556894fd0634046e8fe64962a0eb41 Mon Sep 17 00:00:00 2001 From: Luciano Mammino Date: Wed, 12 Jun 2024 09:56:47 +0100 Subject: [PATCH] Added ep. 125 --- src/_transcripts/125.json | 40 +++++++++---------- src/_transcripts/125.vtt | 40 +++++++++---------- .../125-cloudfront-hosting-toolkit.md | 24 +++++++++++ 3 files changed, 64 insertions(+), 40 deletions(-) create mode 100644 src/episodes/125-cloudfront-hosting-toolkit.md diff --git a/src/_transcripts/125.json b/src/_transcripts/125.json index b50bfa5..91609ef 100644 --- a/src/_transcripts/125.json +++ b/src/_transcripts/125.json @@ -980,7 +980,7 @@ "speakerLabel": "spk_0", "start": 740.72, "end": 745.84, - "text": " immutable Eastern deploys on CloudFront. We'll talk a little bit more about that later. It's a" + "text": " immutable atomic deployments on CloudFront. We'll talk a little bit more about that later. It's a" }, { "speakerLabel": "spk_0", @@ -1424,19 +1424,19 @@ "speakerLabel": "spk_0", "start": 1121.44, "end": 1126.64, - "text": " toolkit itself. We said it's a CLN application, it's built with Node.js. So of course Node.js" + "text": " toolkit itself. We said it's a CLI application, it's built with Node.js. So of course Node.js" }, { "speakerLabel": "spk_0", "start": 1126.64, "end": 1132.8, - "text": " becomes a requirement at that point. But once you do that, you can easily install with MPX or just" + "text": " becomes a requirement at that point. But once you do that, you can easily install with NPX or just" }, { "speakerLabel": "spk_0", "start": 1132.8, "end": 1139.6000000000001, - "text": " by doing an npm install global of the art AWS slash CloudFront dash hosting dash toolkit. And" + "text": " by doing an npm install global of the @aws/cloudfront-hosting-toolkit. And" }, { "speakerLabel": "spk_0", @@ -1454,7 +1454,7 @@ "speakerLabel": "spk_0", "start": 1148.16, "end": 1154, - "text": " I created an XJS project first. Once I did all of that and I was happy with the outcome, then you" + "text": " I created an Next.js project first. Once I did all of that and I was happy with the outcome, then you" }, { "speakerLabel": "spk_0", @@ -1466,13 +1466,13 @@ "speakerLabel": "spk_0", "start": 1159.76, "end": 1164.88, - "text": " you have your frontend application and you just run CloudFront dash hosting dash toolkit space" + "text": " you have your frontend application and you just run cloudfront-hosting-toolkit init" }, { "speakerLabel": "spk_0", "start": 1164.88, "end": 1170.16, - "text": " init. That's literally the one command you need to run. And at that point, you have a guided process" + "text": "That's literally the one command you need to run. And at that point, you have a guided process" }, { "speakerLabel": "spk_0", @@ -1634,7 +1634,7 @@ "speakerLabel": "spk_0", "start": 1294.16, "end": 1299.44, - "text": " folder called the CloudFront-hosting-toolkit. And in this folder, it will generate three files for" + "text": " folder called the ./cloudFront-hosting-toolkit. And in this folder, it will generate three files for" }, { "speakerLabel": "spk_0", @@ -1760,13 +1760,13 @@ "speakerLabel": "spk_0", "start": 1393.36, "end": 1398.08, - "text": " you to start the deployment. So you can run another command called cloudfront-osting-toolkit" + "text": " you to start the deployment. So you can run another command called cloudfront-osting-toolkit deploy" }, { "speakerLabel": "spk_0", "start": 1398.08, "end": 1402, - "text": " space deploy. And what it's going to do is basically going to take all these three generated" + "text": "And what it's going to do is basically going to take all these three generated" }, { "speakerLabel": "spk_0", @@ -1778,13 +1778,13 @@ "speakerLabel": "spk_0", "start": 1407.04, "end": 1411.76, - "text": " everything else that we described before. So it's three buckets, cloud front, the distributions," + "text": " everything else that we described before. So it's S3 buckets, CloudFront distributions," }, { "speakerLabel": "spk_0", "start": 1411.76, "end": 1416.4799999999998, - "text": " the cloud front function, the cloud front key value storage, and there is a lot more. You can" + "text": " the CloudFront function, the CloudFront key-value storage, and there is a lot more. You can" }, { "speakerLabel": "spk_0", @@ -2048,7 +2048,7 @@ "speakerLabel": "spk_1", "start": 1621.28, "end": 1626.4, - "text": " version, like a SPA version of an XJS app, with only client-side rendering, with static export" + "text": " version, like a SPA version of an Next.js app, with only client-side rendering, with static export" }, { "speakerLabel": "spk_1", @@ -2276,19 +2276,19 @@ "speakerLabel": "spk_0", "start": 1802.1599999999999, "end": 1806.6399999999999, - "text": " relatively easy, you should be able to create a container and then run that container with a Next" + "text": " relatively easy, you should be able to create a container and then run that container with a Next.js" }, { "speakerLabel": "spk_0", "start": 1806.6399999999999, "end": 1811.4399999999998, - "text": " JS application with full server-side rendering either on a Prunner or Fargate. But then of course," + "text": "application with full server-side rendering either on AppRunner or Fargate. But then of course," }, { "speakerLabel": "spk_0", "start": 1811.4399999999998, "end": 1815.52, - "text": " you have something that is running 24 seven. So maybe not necessarily what you want to do if you" + "text": " you have something that is running 24/7. So maybe not necessarily what you want to do if you" }, { "speakerLabel": "spk_0", @@ -2330,7 +2330,7 @@ "speakerLabel": "spk_0", "start": 1844.9599999999998, "end": 1850.6399999999999, - "text": " It's probably a modern take on Heroku. So it allows you to host your own bus and it does that" + "text": " It's probably a modern take on Heroku. So it allows you to host your own PaaS and it does that" }, { "speakerLabel": "spk_0", @@ -2342,7 +2342,7 @@ "speakerLabel": "spk_0", "start": 1856.24, "end": 1860.5600000000002, - "text": " everything you need to run an Next JS project. So another thing that we really like to try," + "text": " everything you need to run an Next.js project. So another thing that we really like to try," }, { "speakerLabel": "spk_0", @@ -2420,13 +2420,13 @@ "speakerLabel": "spk_1", "start": 1920.48, "end": 1926.24, - "text": " have, because I'd love to know. I have seen some online discussion. Actually Yan Shui was" + "text": " have, because I'd love to know. I have seen some online discussion. Actually Yan Cui was" }, { "speakerLabel": "spk_1", "start": 1927.2, "end": 1933.04, - "text": " mentioning the release of the CloudFront hosting toolkit. And one of the principal essays at AWS" + "text": " mentioning the release of the CloudFront hosting toolkit. And one of the principal SAs at AWS" }, { "speakerLabel": "spk_1", diff --git a/src/_transcripts/125.vtt b/src/_transcripts/125.vtt index 9f3d935..a0849d0 100644 --- a/src/_transcripts/125.vtt +++ b/src/_transcripts/125.vtt @@ -650,7 +650,7 @@ integrates really well with GitHub for version control. It's going to do for you 163 00:12:20.720 --> 00:12:25.840 -immutable Eastern deploys on CloudFront. We'll talk a little bit more about that later. It's a +immutable atomic deployments on CloudFront. We'll talk a little bit more about that later. It's a 164 00:12:25.840 --> 00:12:30.160 @@ -946,15 +946,15 @@ deploy it using this CloudFront hosting toolkit. The first thing you need to do 237 00:18:41.440 --> 00:18:46.640 -toolkit itself. We said it's a CLN application, it's built with Node.js. So of course Node.js +toolkit itself. We said it's a CLI application, it's built with Node.js. So of course Node.js 238 00:18:46.640 --> 00:18:52.800 -becomes a requirement at that point. But once you do that, you can easily install with MPX or just +becomes a requirement at that point. But once you do that, you can easily install with NPX or just 239 00:18:52.800 --> 00:18:59.600 -by doing an npm install global of the art AWS slash CloudFront dash hosting dash toolkit. And +by doing an npm install global of the @aws/cloudfront-hosting-toolkit. And 240 00:18:59.600 --> 00:19:04.240 @@ -966,7 +966,7 @@ environment. Now the idea is that you need to use it against an existing reposit 242 00:19:08.160 --> 00:19:14.000 -I created an XJS project first. Once I did all of that and I was happy with the outcome, then you +I created an Next.js project first. Once I did all of that and I was happy with the outcome, then you 243 00:19:14.000 --> 00:19:19.760 @@ -974,11 +974,11 @@ can start the tool. And the way you start the tool, you go with your CLI into th 244 00:19:19.760 --> 00:19:24.880 -you have your frontend application and you just run CloudFront dash hosting dash toolkit space +you have your frontend application and you just run cloudfront-hosting-toolkit init 245 00:19:24.880 --> 00:19:30.160 -init. That's literally the one command you need to run. And at that point, you have a guided process +That's literally the one command you need to run. And at that point, you have a guided process 246 00:19:30.160 --> 00:19:35.120 @@ -1086,7 +1086,7 @@ point, it can start to generate things for you. And it's interesting to see that 272 00:21:34.160 --> 00:21:39.440 -folder called the CloudFront-hosting-toolkit. And in this folder, it will generate three files for +folder called the ./cloudFront-hosting-toolkit. And in this folder, it will generate three files for 273 00:21:39.440 --> 00:21:44.160 @@ -1170,11 +1170,11 @@ generated these three configuration files, but those three configuration files a 293 00:23:13.360 --> 00:23:18.080 -you to start the deployment. So you can run another command called cloudfront-osting-toolkit +you to start the deployment. So you can run another command called cloudfront-osting-toolkit deploy 294 00:23:18.080 --> 00:23:22.000 -space deploy. And what it's going to do is basically going to take all these three generated +And what it's going to do is basically going to take all these three generated 295 00:23:22.000 --> 00:23:27.040 @@ -1182,11 +1182,11 @@ files as an input, and it's going to create all the necessary cloud formation te 296 00:23:27.040 --> 00:23:31.760 -everything else that we described before. So it's three buckets, cloud front, the distributions, +everything else that we described before. So it's S3 buckets, CloudFront distributions, 297 00:23:31.760 --> 00:23:36.480 -the cloud front function, the cloud front key value storage, and there is a lot more. You can +the CloudFront function, the CloudFront key-value storage, and there is a lot more. You can 298 00:23:36.480 --> 00:23:41.200 @@ -1362,7 +1362,7 @@ the value in it, because I have been in a case recently where I've been trying t 341 00:27:01.280 --> 00:27:06.400 -version, like a SPA version of an XJS app, with only client-side rendering, with static export +version, like a SPA version of an Next.js app, with only client-side rendering, with static export 342 00:27:06.400 --> 00:27:11.920 @@ -1514,15 +1514,15 @@ So other things that we think are going to be suitable, for instance, you can mo 379 00:30:02.160 --> 00:30:06.640 -relatively easy, you should be able to create a container and then run that container with a Next +relatively easy, you should be able to create a container and then run that container with a Next.js 380 00:30:06.640 --> 00:30:11.440 -JS application with full server-side rendering either on a Prunner or Fargate. But then of course, +application with full server-side rendering either on AppRunner or Fargate. But then of course, 381 00:30:11.440 --> 00:30:15.520 -you have something that is running 24 seven. So maybe not necessarily what you want to do if you +you have something that is running 24/7. So maybe not necessarily what you want to do if you 382 00:30:15.520 --> 00:30:19.680 @@ -1550,7 +1550,7 @@ Similarly, there is another project called Coolify, which is a little bit more g 388 00:30:44.960 --> 00:30:50.640 -It's probably a modern take on Heroku. So it allows you to host your own bus and it does that +It's probably a modern take on Heroku. So it allows you to host your own PaaS and it does that 389 00:30:50.640 --> 00:30:56.240 @@ -1558,7 +1558,7 @@ in a serverless way. But as such, you should be able to host a container that yo 390 00:30:56.240 --> 00:31:00.560 -everything you need to run an Next JS project. So another thing that we really like to try, +everything you need to run an Next.js project. So another thing that we really like to try, 391 00:31:00.560 --> 00:31:05.200 @@ -1610,11 +1610,11 @@ that. I haven't tried it, so I don't know exactly what the experience is like. L 403 00:32:00.480 --> 00:32:06.240 -have, because I'd love to know. I have seen some online discussion. Actually Yan Shui was +have, because I'd love to know. I have seen some online discussion. Actually Yan Cui was 404 00:32:07.200 --> 00:32:13.040 -mentioning the release of the CloudFront hosting toolkit. And one of the principal essays at AWS +mentioning the release of the CloudFront hosting toolkit. And one of the principal SAs at AWS 405 00:32:13.040 --> 00:32:16.800 diff --git a/src/episodes/125-cloudfront-hosting-toolkit.md b/src/episodes/125-cloudfront-hosting-toolkit.md new file mode 100644 index 0000000..1be62fc --- /dev/null +++ b/src/episodes/125-cloudfront-hosting-toolkit.md @@ -0,0 +1,24 @@ +--- +episode: 125 +title: "A first look at CloudFront Hosting Toolkit" +youtube_id: "rCMG65_eToI" +spotify_link: "https://podcasters.spotify.com/pod/show/aws-bites/episodes/125--A-first-look-at-CloudFront-Hosting-Toolkit-e2kpcfs" +publish_date: 2024-06-14 +--- + +In this episode, we discuss the newly announced CloudFront Hosting Toolkit from AWS. We provide an overview of the tool, which aims to simplify deploying modern front-end applications to AWS while retaining infrastructure control. We discuss the current capabilities and limitations and share our hands-on experiences trying out the tool. We also talk about alternatives like Vercel and Amplify, and the tradeoffs between convenience VS control. Overall, the toolkit shows promise but is still early-stage. We are excited to see it evolve to support more frameworks and use cases. + + +> AWS Bites is brought to you by fourTheorem an AWS consulting partner with tons of experience with AWS. If you need someone to help you with your ambitions AWS projects, check out [fourtheorem.com](https://fourtheorem.com)! + + +In this episode, we mentioned the following resources: + +- [CloudFront Hosting Toolkit official announcement](https://aws.amazon.com/blogs/networking-and-content-delivery/introducing-cloudfront-hosting-toolkit/) +- [Previous episode "80. Can you do private static websites on AWS?"](https://awsbites.com/80-can-you-do-private-static-websites-on-aws/) +- [Previous episode "3. How do you deploy a static website on AWS?"](https://awsbites.com/3-how-do-you-deploy-a-static-website-on-aws/) +- [CloudFront functions](https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/cloudfront-functions.html) +- [CloudFront Key-Value Store](https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/kvs-with-functions.html) +- [Sandro Volpicella's article on CloudFront Hosting Toolkit](https://blog.awsfundamentals.com/cloudfront-hosting-toolkit) +- [Open Next](https://open-next.js.org/) +- [Coolify](https://coolify.io/)