Deploy with Ease: A Beginner's Workshop on Terraform and AWS for React Applications

Here is all the source code for this workshop to be used alongside the lecture.

Event Details

Date: January 29th, 2024

Time: 5:30pm - 9:30pm CST

Instructor: Marc McCarthy

Event Link: Deploy with Ease: A Beginner's Workshop on Terraform & AWS for React Applications

Repo Link: marc-mccarthy/deploy-with-ease

Setup

Homebrew Installation (macOS Users)

Homebrew - The Missing Package Manager for macOS.

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

Check version to ensure CLI access:

brew -v

Installing Development Tools

Node.js: JavaScript runtime built on Chrome's V8 JavaScript engine.
AWS CLI: Command-line tool for managing AWS services.
Visual Studio Code: Source-code editor made by Microsoft for Windows, Linux, and macOS.
Terraform: Infrastructure as Code tool for building, changing, and versioning infrastructure safely and efficiently.

brew install node
brew install awscli
brew install visual-studio-code
brew install terraform

...or

brew install node awscli visual-studio-code terraform

Check versions to ensure installation and CLI access.

node -v
npm -v
aws --v
code -v
terraform -v

You should see the current versions installed as outputs.

Creating an AWS Account

AWS Account Creation - Sign up for an Amazon Web Services account.

Creating an IAM user

IAM User Creation - Create a user for this workshop.

Add the AdministratorAccess policy to your IAM user.

Acquiring AWS Access and Secret keys

Follow this guide to create an AWS Access and Secret keys on AWS Console.
Follow this guide to add your AWS keys to your AWS CLI.

Store these keys in a secure location. This is your authentication for your identity on AWS!

React

In you Terminal, lets go into our useragent folder:

cd useragent

Let's install our dependencies:

npm i

Now let's build our application so that Terraform can send the files up to AWS:

npm run build

Once this process in complete, you can either look at the React code more and spin it up locally, or move on to Terraform.

Terraform

Create a local.auto.tfvars file from the local.auto.tfvars.example file.
Add your preferred AWS Region here as a string.
In your Terminal, ensure you are in the repo directory, then run in order:

cd terraform

This will get you into the correct directory where the Terraform files are.

terraform init

This will initialize your Terraform and download the correct files after scanning your Terraform code.

terraform plan

This will show you the services and architecture that you are instructing Terraform to build in your code.

terraform apply

This will apply your changes to AWS after you confirm the selection.

Go to the URL that was output. It should point to the new bucket you created!

Now, in your Terminal, ensure you are deleting your test services with:

terraform destroy

This will destroy all of your AWS architecture that is stored in your Terraform terraform.tfstate file.

Cloudfront CDN

AWS CloudFront is a Content Delivery Network (CDN) service by Amazon Web Services. Its primary purpose is to accelerate the delivery of static and dynamic web content by caching it at edge locations closer to end-users.

By providing low latency and high transfer speeds globally, It supports the delivery of various content types, including images, videos, and APIs.

Go to the cloudfront.tf file and uncomment all the code.
Go to the outputs.tf file and uncomment the Cloudfront CDN URL.
Run all the Terraform commands again. Building the Cloudfront CDN may take 3-4 minutes.
You should now see a new URL that is present as an output and will take you to your application.
Destroy your test resources!

Security

We will be experimenting with a lot of services today, so for simplicity's sake, use whichever account you feel most comfortable with. Root does have it's security issues if used in production. You may incur costs if you leave services running.

Note: If you created any services in AWS in the console, or anything not tracked within your terraform.tfstate file, these resources will not be deleted with Terraform.

min-dles/deploy-with-ease