AWS for Front-End Engineers (ft. S3, Cloudfront & Route 53)
Topics:
This course has been updated! We now recommend you take the AWS For Front-End Engineers, v2 course.
Table of Contents
Introduction
Introduction
After 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 Tier
Steve examines available services that come with AWS's free tier.
IAM and Account Management
Monitoring Billing
Steve 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 Account
Steve 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 User
Steve 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 S3
Steve 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 Name
AWS 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.
Policies
Steve explains how bucket policies work and how to generate policies for an S3 bucket.
Setting Up an S3 Bucket
Steve 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 CLI
Steve 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 CLI
Steve 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 53
Steve introduces Route 53 along with a brief explanation of the Domain Name System (DNS).
Setting Up DNS
Steve sets up the recently purchased domain name to use with the new static website that was created earlier.
Creating a SSL Certificate
Steve 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 S3
Steve solves a bug where client-side routes cannot be navigated to directly — the best way he can for now.
Setting Up a WWW Subdomain
Steve 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.
CloudFront
Creating a Cloudfront Distribution
CloudFront takes a few minutes to set up, so Steve starts by creating a CloudFront distribution for the application that was deployed earlier.
Re-Routing DNS
Steve redirects Route 53 from the S3 bucket in us-east-1 to CloudFront.
CloudFront Overview
While waiting for the CloudFront set up to complete, Steve more formally reviews AWS's content delivery network (CDN).
Error Pages with CloudFront
Steve readdresses the problem with client-side routes and answers questions from students.
Cache Invalidations
To 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 CI
Steve 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 File
Steve shares a .travis.yml template to make deploying to S3 and CloudFront easier.
Creating Another IAM User and Policy
Steve creates another create another IAM user with restricted permissions to keep from sharing administrator credentials with Travis CI.
Pushing a Change with CI
With 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 Review
Make a new commit to master and push it up to GitHub to trigger a new build. Steve takes questions from students.
Lambda@Edge
Introducing Lambda@Edge
Steve introduces Lambda@Edge, a new service from AWS that allows you to deploy Lambda functions to your CloudFront Edge nodes.
Solving Client-Side Routing Issues
Steve walks-through setting up a Lambda@Edge function for resolving client-side routing problems and 404 File Not Found errors.
Swapping Out Image Requests Exercise
Steve uses Lambda@Edge to manipulate HTTP requests on the fly.
Adding Security Headers
Steve 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 Responses
Steve sets up an Origin Request function to create a 302 redirect for a particular route. Steve takes questions from students.
