AWS For Front-End Engineers, v2
Learning Paths:
Topics:
Table of Contents
Introduction
Setup
AWS Free Tier Overview
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.
Account Setup & Billing
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.
Securing Root Account with IAM
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
S3
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.
Setup a Domain with S3 & Route 53
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.
S3 Policies
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
Deploy App with the AWS CLI
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.
Configure Route 53 & Routing
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.
www Redirect
Steve creates a second S3 bucket to represent the "www" version of the domain. This bucket redirects to the naked domain.
CloudFront
Configure CloudFront Distribution
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.
CloudFront & S3
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.
OAI
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.
Securing the S3 Bucket
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.
CloudFront Routing
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
Create Custom Cache Policies
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.
Build a CI Pipeline
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.
Integrate GitHub Action
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
Lambda Overview
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.
Setup Lambda Deployment
Steve 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 Headers
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.
CloudFront Functions
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.
