Deploy a Site with HTTPS Support Behind a CDN with AWS CDK
Deploying a "static" website on AWS is surprisingly tricky - it requires managing S3, CloudFront, the security between them, and more. Luckily, we don't have to do everything ourselves - in this lesson we're going to learn how to use a 3rd party cdk-website construct available on npm in order to host our application on AWS.
Instructor: [0:00] Our TODO App is currently running on localhost. Since we are pretty much done with it, it is time to deploy that to the web. The thing is that deploying a static website on AWS is surprisingly tricky because it requires managing S3, CloudFront, and a bunch of other stuff.
[0:16] The power of CDK is that we don't have to do everything ourselves. In fact, we can use third-party higher-level constructs that were created by the community members in order to make our lives easier. In this lesson, we are going to use a construct called CDK website, which is available on NPM.
[0:34] We are going to use this construct to deploy two things. We are going to deploy an S3 bucket, which is going to host the static assets for our app, and also a CloudFront distribution, which is AWS's solution for content delivery networks, which is going to use our S3 bucket as the origin. Both of those things are going to be pre-configured for us.
[0:55] Let's go back to our stack. First of all, I'm going to go ahead and install the CDK website package. After this is done, I'm going to import website from CDK website. Below our Todo Backend, I'm going to create a new website as follows.
[1:11] We are going to create a new website. The content is going to be whatever is in the frontend/builddirectory. We are also going to perform a cache invalidation whenever we deploy the changes to the site, just to make sure that we don't have outdated content out there.
[1:29] To deploy this website, first of all, I'm going to navigate the frontend directory and run npm run build. Afterwards, I'm going to go back to our CDK stack, and I'm going to run cdk deploy. Bear in mind that because this updated stack is deploying a CloudFront distribution, this is going to take a while.
[1:49] After a successful deployment, let me go ahead to AWS console. I'm going to navigate to CloudFormation console, choose our TODO App stack. Let me expand that. I'm going to click on resources and here we can see our website.
[2:03] If I expand that, we can see the S3 site bucket, which is hosting the static assets for our app. We can also see the CloudFront distribution. I'm going to click here to go to CloudFront console. Here we can see our custom CDN, which was deployed to AWS cloud.
[2:20] If I click over here, I can actually copy the distribution domain. If I paste that into a browser, we can see that our AWS CDK TODO App is live out there on the Internet behind a CDN.