AWS For Front-End Engineers, v2
Table of Contents
IntroductionSteve 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.
AWS Free Tier OverviewSteve 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.
Account Setup & BillingSteve 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.
Securing Root Account with IAMSteve 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.
S3Steve 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.
Setup a Domain with S3 & Route 53Steve 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.
S3 PoliciesSteve 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.
Deploy App with the AWS CLISteve 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.
Configure Route 53 & RoutingSteve 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.
www RedirectSteve creates a second S3 bucket to represent the "www" version of the domain. This bucket redirects to the naked domain.
Configure CloudFront DistributionSteve 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.
CloudFront & S3Steve 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.
OAISteve 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.
Securing the S3 BucketSteve 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.
CloudFront RoutingSteve 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.
Create Custom Cache PoliciesSteve 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.
Build a CI PipelineSteve 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.
Integrate GitHub ActionSteve 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 OverviewSteve 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.
Setup Lambda DeploymentSteve introduces Lambda functions and talks through a few use cases. When Lambda functions are deployed, they are cached on all edge servers.
Lambda for Updating HeadersSteve 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.