Temporal
AWS For Front-End Engineers, v2
3 hours, 40 minutes
CC
Course Description
Learn to build an enterprise-grade deployment infrastructure on AWS. Host your assets on S3 and use CloudFront as a CDN to distribute those assets worldwide in seconds. We’ll set up routing and certs using Amazon Certificate Manager (ACM) and add custom functionality with lambda@edge to our CloudFront distribution.
This course and others like it are available as part of our Frontend Masters video subscription.
Preview
CloseWhat They're Saying
I just completed "AWS For Front-End Engineers, v2" by Steve Kinney on Frontend Masters! Excellent intro to AWS to any engineer.
Connie Leung
connieleung404
Learn Straight from the Experts Who Shape the Modern Web
Your Path to Senior Developer and Beyond
- 200+ In-depth courses
- 18 Learning Paths
- Industry Leading Experts
- Live Interactive Workshops
Table of Contents
Introduction
Section Duration: 7 minutes
Steve Kinney introduces the course and explains how it will help developers build the necessary server infastructure for performant and reliable applications. The course will cover hosting an application on AWS that's globally distributed, secured with SSL, and automatically deployed with continuous integration.
Setup
Section Duration: 27 minutes
Steve summarizes the specs included in the AWS free tier. S3 includes 5GB of storage, Cloudfront includes 1TB of data transfer, and Lambda includes one million free requests per month.
Steve creates an AWS account and configures budget and account alerts in the billing area. A budget alert will notify the account owner when the costs over a given interval exceed a threshold. The dangers of root user access are also discussed in this section.
Steve navigates to the IAM section of AWS and creates an new user with administrator priviledges. The admin account will be used to work with AWS instead of the root account for security purposes. The admin user also has API access.
S3
Section Duration: 33 minutes
Steve explains that S3 is comprised of buckets. These buckets can hold objects like client-side assets, are infinitely scalable, and have 99.9% availability. S3 features asset versioning, ecryption, and lifecycle management.
Steve uses Route 53, the AWS DNS manager, to register a new domain name. After the domain is registered, an S3 bucket is created and configured to be publically available.
Steve demonstrates how to add policies to an S3 bucket to allow public read access to the website files. The AWS CLI tool is installed and will be used to deploy assets to the bucket instead of manually uploading them through the AWS interface.
AWS CLI
Section Duration: 23 minutes
Steve uses the AWS CLI to deploy the static files from the local project to the S3 bucket. The AWS CLI takes in the local directory to be deployed along with the name of the destination bucket. Once the files are deployed, the files are immediately accessible through the bucket's URL.
Steve uses Route 53 to configure the new domain to work with the current S3 bucket. The A record of the domain is aliased to the S3 endpoint. The Certificate Manager is used to request the SSL certifiate. Handling client-side routing is also introduced in this segment.
Steve creates a second S3 bucket to represent the "www" version of the domain. This bucket redirects to the naked domain.
CloudFront
Section Duration: 39 minutes
Steve creates a CloudFront distribution to act as an access point for the website. While the website assets will be distributed across all the AWS edge servers, the Cloudfront distribution URL will be the publically available URL. If a custom domain is associated with the website, the DNS should be updated to use the distribution's URL.
Steve explains the integration between CloudFront and S3. As a bucket receives requests through CloudFront, the assets are cached on any edge server where they are accessed. This allows the assets to be available throughout the CloudFront network during subsequent requests.
Steve configures the Origin Access Identity (OAI) so access to the S3 bucket is limited to CloudFront. This ensures the bucket cannot be directly accessed publically. All request must come through CloudFront.
Steve fixes the default root object issue and locks down the S3 Bucket. Since the bucket is now accessible through CloudFront, public access can be removed and the static website hosting can be disabled.
Steve redirects 404 errors to the index.html file to let the client-side router handle any issues. This fix allows users to link directly to a page within the client-side application.
Pipeline Caching
Section Duration: 36 minutes
Steve explains a few different strategies around cache policies to that make updating resources within CloudFront easier. When cache policies do not expire quick enough, an invalidation can be used to force assets to be reloaded. AWS limits the number of invalidations that can be used before incurring a charge.
Steve creates a new user and a custom policy for deploying the assets to AWS. The policy limits the user's access to only allow putting files into the S3 bucket. Rather than use a login, the CI pipeline user will use an API key and secret.
Steve adds a GitHub action which will execute anytime code is pushed to the repository. The action logs into AWS, installs the NPM modules, builds the project, and pushes the build directory to the S3 bucket.
Lambda
Section Duration: 43 minutes
Steve introduces Lambda@Edge which allows functions to be deployed to the CloudFront edge nodes. These functions can intercept and modify requests and responses both before and after the CloudFront cache.
Steve introduces Lambda functions and talks through a few use cases. When Lambda functions are deployed, they are cached on all edge servers.
Steve updates the Lambda function to write the correct security headers on the viewer response behavior. Mozilla's Observatory tool is used to check security headers and issues a grade based on how safe and secure a website is configured.
Steve writes a simple CloudFront function to replace an image with different image when it's requested. CloudFront functions use a subset of JavaScript so not all APIs are available.
Wrapping Up
Section Duration: 9 minutes
Steve wraps up the course answering a question about AWS resources and talking through other AWS products that may be helpful to frontend developers. These products include Amazon Cognito, DynamoDB, AWS AppSync, Amazon Location Service, and AWS Amplify.
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops