Deploy a site with HTTPS support behind a CDN with CDK
Deploying a static site to S3 works really well unless we consider the fact that you cannot add HTTPS support to the site directly in S3. In order to do that - a CloudFront distribution is required.
While it is possible to setup CloudFront with CDK on our own, we don't always have to do anything on our own.
Instead, we can use constructs that were created by the community.
In this quick lesson we're going to learn how to use CDK-SPA-Deploy construct in order to deploy our app to S3 (using createBasicSite construct) and deploy it with HTTPS support and behind a CloudFront CDN distribution.
IMPORTANT NOTE: All AWS Construct Library modules used in your project must be the same version.
Instructor: [0:00] Now the app is deployed to the web, but honestly, it is not perfect. We can see two or more remaining items on our to-do list.
[0:07] First up, the site is not secure because we are not using HTTPS, which is less than ideal. We have to care about security. Also, we are serving this site from a single S3 bucket, so there's no content delivery network in front of it.
[0:21] On top of that, the thing that we did in the last lesson -- creating a bucket, creating a bucket deployment, and creating a CloudFormation output -- seems fairly excessive. It would be much more convenient if you could replace it with a single construct. Luckily, we can.
[0:35] As we established before, we don't have to create our own constructs all the time. In fact, we can use constructs that were created by others in the community to serve our needs.
[0:45] For instance, this construct, the cdk-spa-deploy, it is an AWS CDK Construct to make deploying a single-page website built with Angular, React, Vue, or whatever to AWS S3 behind SSL and CloudFront much easier. This is exactly what we need.
[1:00] Let's take a look. We have to install it and after we do, we can either create a basic site -- this is what we have right now -- or we can also create a site with CloudFront. This is going to configure SSL and a CloudFront distribution for us.
[1:13] A quick note, Amazon CloudFront is a fast content delivery network service, which works seamlessly with many AWS services including Amazon S3. In order to add cdk-spa-deploy to our stack, open up the terminal and run yarn add cdk-spa-deploy. Next, import it in our project. I'm going to close the terminal, go over here, and import spa-deploy from cdk-spa-deploy.
[1:37] Next in our main stack, I'm going to comment out all those lines and instead of all of that, we are going to do new spa-deploy. The first argument is going to be this, I'm going to call it website-deploy and I'm going to use it to create a basic site.
[1:51] This is a basic setup needed for a non-SSL, non-cashed S3 website. It's going to create a bucket for our site and also is going to deploy it. This is exactly what we had over here, but with a single construct.
[2:02] Create a basic site takes a config as an argument. We're going to add two things to our config. First up, the index-doc which is going to be equal to index.html. Secondly, the website folder, which is going to be equal to ..frontend/build.
[2:18] Website deployment is ready. Let's go ahead and run cdk deploy to deploy that to the Cloud. Now it's done, and we can see the website deploy address over here. Let me just copy and paste that into the browser. Here it is. It looks and behaves exactly the same, but it was deployed with a single construct instead of having to reinvent the wheel.
[2:34] Still, there are two problems to fix. First up, the site is not secure and also, we are not serving the site from our content delivery network. To fix that, go back to our stack, and instead of creating a basic site, I'm going to create a site with CloudFront. Now, if we open up the terminal and run cdk diff, we can see that this construct is going to create an entire CloudFront distribution for us.
[2:55] Let's deploy that with cdk deploy. For the record, this deployment is going to take a couple of minutes because deploying a CloudFront distribution takes a while. I'm going to fast forward the video.
[3:06] Now it's done and we can see our website deployed cloudFormation domain over here. Let me just copy and paste that into the browser. Now it is so much better. Our site is fully secure because we are supporting HTTPS and we are also serving the site from our content delivery network, so we [inaudible] that as well.
[3:21] There are no more to dos for us to do before we mark the app as complete.
I am getting this error while installing cdk-spa-deploy npm package
Error: 404 Not Found - GET https://registry.npmjs.org/@aws-cdk%2faws-iam - Not found
Hey!
npm was down around 2 hours ago, could you try again? :)
Just heads up, per the documentation to the latest version of cdk-spa-deploy, you need to install dependencies to use it: https://github.com/nideveloper/CDK-SPA-Deploy#installation-and-usage
That's right 👆
I was getting errors after installing cdk-spa-deploy via yarn and trying to implement SPADeploy in the code. The app wouldn't build. There error I was getting was: "Argument type of 'this' is not assignable to parameter of type 'Construct'"
In order to get it working I had to make sure all aws-cdk packages had matching versions. remove all carets in version numbers (^)... then npm install, npm run build, cdk deploy.
I ended up deleting my npm_modules folder but I'm not sure if that's necessary. No issues have arose at the moment.