This article is the fourth in a series of articles outlining how to setup a highly available, scalable, serverless single page application using AWS.
In previous articles we looked at:
- Deploying a VueJS app to an S3 bucket with static site hosting
- Creating a custom domain for the static site using Amazon Route53
- Generating a free SSL certificate for HTTPS with LetsEncrypt
In this article we’ll go over creating a CloudFront distribution to act as a CDN for our app. We’ll also show how to attach a certificate to the distribution.
Content Delivery as a Service with Amazon CloudFront
CloudFront allows the creation of a content delivery network (or distribution) for your applications. The CDN will cache you’re app’s static content at the various edge locations within the AWS network. This means that your users will experience reduced latency when navigating to your site.
New CloudFront Edge Locations for Cape Town and Johannesburg
More exciting is that, at the recent AWS Summit hosted in Cape Town, there was a brand new CloudFront edge location announced for Cape Town. This follows on news of the new location in Johannesburg earlier this quarter. See the news article here
CloudFront nodes in Cape Town and Johannesburg should improve the latency performance of sites hosted on AWS by up to 75%. This is great news for the African continent!
Setup CloudFront in under 5 minutes
For our VueJS app, this will increase the performance because the app is entirely made up of static assets that are run in the browser.
If you’ve created an app hosted in S3 from the first article, you can use this
to quickly create a CloudFront distribution in your account. Because CloudFront is a global service, it does not matter which region you deploy this stack.
Update the values for the bucket name, and CNAMEs and choose “Create Stack”.
The stack will automatically provision the CloudFront distribution. This can take up to 20 minutes to propagate across the AWS network.
View the Distribution and Cached App
From the CloudFront console, you should see the newly provisioned distribution. When the status is “Deployed” you can navigate to the domain name displayed to see a cached version of your site.
You’ll notice the following things with this cached version:
- The SSL certificate is registered to Amazon for the *.cloudfront.net domain
- Our domain still points to the S3 site and not this CloudFront distribution.
- Deploying new versions of this site does not update the cached version.
Let address these issues.
Add our SSL Certificate to the CloudFront Distribution
From the CloudFront console, select the distribution that was just created, choose “Edit”.
Under the “SSL Certificate” section select “Custom SSL Certificate”. From the dropdown choose from one of the certificates hosted in the AWS certificate manager in us-east-1.
Confirm the change to start the propagation (this will take about 20 minutes).
Updating Route53 to Point to CloudFront Distribution
While the distribution is updating, go to the AWS Route53 console. Choose the hosted zone we created in the previous article. Update the A Record Set for this hosted zone.
Change the ALIAS in the dropdown from the S3 bucket to the newly created CloudFront distribution.
Save the Record Set to update the DNS for your app.
View your app on your domain with HTTPS
Once the CloudFront distribution and Route53 DNS has propagated you should be able to view your app from your own domain via HTTPS.
The distribution is set to automatically redirect from HTTP to HTTPS
Updating NPM scripts
Now that the site is configured, add an additional script to out application
package.json file called
invalidate updating it with your CloudFront distribution ID.
... "deploy": "aws s3 sync --acl public-read --delete dist/ s3://lula.cloud && npm run invalidate", "invalidate": "aws cloudfront create-invalidation --distribution-id ERA7283D9PJ8L --paths '/*'" ...
I’ve also updated the
deploy script to call the invalidate operation after doing the sync.
This will automatically invalidate all of the static files after they have been synced.
This will cause the CloudFront distribution to re-fetch the new assets. Once the static files have been fetched they will be cached.
You should now have a functioning VueJS application hosted in S3 with a CloudFront CDN to deliver the App. You have a custom domain pointing to the App with a free SSL certificate.
In the final step of this series I’ll go over the following:
- Creating a CI / CD pipeline for our application using GitHub and CodeBuild and CodePipeline