AWS For Front-End Engineers, v2

Steve Kinney

Steve Kinney

Temporal
3 hours, 40 minutes CC
AWS For Front-End Engineers, v2

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
Close

Course Details

Published: March 1, 2022

Learning Paths

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
Get Unlimited Access Now

Table of Contents

Introduction

Section Duration: 7 minutes
  • Introduction
    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

S3

Section Duration: 33 minutes
  • 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

Section Duration: 23 minutes

CloudFront

Section Duration: 39 minutes
  • 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

Section Duration: 36 minutes
  • 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

Section Duration: 43 minutes

Wrapping Up

Section Duration: 9 minutes
  • Wrapping Up
    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.
I just completed "AWS For Front-End Engineers, v2" by Steve Kinney on Frontend Masters! Excellent intro to AWS to any engineer.
Connie Leung

Connie Leung

connieleung404

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now