AWS for Front-End Engineers (ft. S3, Cloudfront & Route 53)
Table of Contents
IntroductionAfter discussing the dramatic performance gains by using AWS infrastructure, Steve Kinney reviews the course's agenda, and the demo application students will build.
The AWS Free TierSteve examines available services that come with AWS's free tier.
IAM and Account Management
Monitoring BillingSteve Kinney walks through how to set up an AWS budget and alert notifications, in case free tier limits are exceeded on AWS.
Securing the Root AccountSteve sets up a new AWS account with a subuser and configures MFA on both accounts as well as discusses AWS's Identity Access Management (IAM).
Creating an IAM UserSteve creates an administrator user that is separate from our root user and prompts students to set up two-factor auth on the newly created IAM administrator account.
Storage and Hosting with S3
Introducing S3Steve introduces Simple Storage Service (S3), one of AWS's oldest and most popular services. S3 is used for storing and hosting the course client-side application on the web.
Registering a Domain NameAWS offers domain name registration through its Route 53 service. CloudFront wants S3 buckets that are named after the respective domain name. Since both domain names and bucket names are globally unique, make sure neither has already been used.
PoliciesSteve explains how bucket policies work and how to generate policies for an S3 bucket.
Setting Up an S3 BucketSteve configures an S3 bucket for static web hosting. Along the way, he explores some of the additional features offered by S3.
The AWS CLI
Introducing the AWS CLISteve takes a quick tour of the AWS CLI. Steve also sets up named profiles and other configuration for the AWS CLI.
Deploying to S3 through the CLISteve uses the AWS CLI to build and deploy the course's React application to the S3 bucket configured for static web hosting.
DNS with Route 53
Introducing Route 53Steve introduces Route 53 along with a brief explanation of the Domain Name System (DNS).
Setting Up DNSSteve sets up the recently purchased domain name to use with the new static website that was created earlier.
Creating a SSL CertificateSteve creates an SSL (Secure Sockets Layer) certificate using Amazon Certificate Manager to establish an encrypted link between the web server and a browser.
Routing with S3 and Route 53
Client-side Routing and S3Steve solves a bug where client-side routes cannot be navigated to directly — the best way he can for now.
Setting Up a WWW SubdomainSteve sets up a second S3 bucket for redirecting from the "www" subdomain (e.g., http://www.example.com) to the bare domain (e.g., http://example.com). He also configures the DNS settings in Route 53 to work with the new bucket.
Creating a Cloudfront DistributionCloudFront takes a few minutes to set up, so Steve starts by creating a CloudFront distribution for the application that was deployed earlier.
Re-Routing DNSSteve redirects Route 53 from the S3 bucket in us-east-1 to CloudFront.
CloudFront OverviewWhile waiting for the CloudFront set up to complete, Steve more formally reviews AWS's content delivery network (CDN).
Error Pages with CloudFrontSteve readdresses the problem with client-side routes and answers questions from students.
Cache InvalidationsTo deploy a new version of an application, Steve demonstrates how to invalidate versions of the previous version at the edge nodes of CloudFront.
Setting Up a Build Pipeline
Introducing CI/CD with Travis CISteve sets up Travis CI to automatically deploy new versions of the application to S3 as well as remove previous versions of the application by invalidating CloudFront's caches.
Setting Up a Travis Configuration FileSteve shares a .travis.yml template to make deploying to S3 and CloudFront easier.
Creating Another IAM User and PolicySteve creates another create another IAM user with restricted permissions to keep from sharing administrator credentials with Travis CI.
Pushing a Change with CIWith a new IAM user set up with a custom restricted AWS policy in place, Steve deploys the course application with Travis CI. Steve takes questions from students.
Build Pipeline ReviewMake a new commit to master and push it up to GitHub to trigger a new build. Steve takes questions from students.
Introducing Lambda@EdgeSteve introduces Lambda@Edge, a new service from AWS that allows you to deploy Lambda functions to your CloudFront Edge nodes.
Solving Client-Side Routing IssuesSteve walks-through setting up a Lambda@Edge function for resolving client-side routing problems and 404 File Not Found errors.
Swapping Out Image Requests ExerciseSteve uses Lambda@Edge to manipulate HTTP requests on the fly.
Adding Security HeadersSteve audits the security of our new application, and it fails, so he writes a Viewer Response function to address the holes in the application.
Redirecting ResponsesSteve sets up an Origin Request function to create a 302 redirect for a particular route. Steve takes questions from students.