Mythical Mysfits

About

A tutorial for developers that want to learn about how to build modern applications on top of AWS. We build a sample website that leverages infrastructure as code, containers, serverless code functions, CI/CD, and more.
Github: https://github.com/aws-samples/aws-modern-application-workshop/tree/python

Architecture

S3 web hosting with CloudFront and OAI

1. Cloned git repository

2. Git checkout branch python in VSCode

3. S3 bucket created

4. Index.html uploaded from github source code to S3.

5. Static website hosted in S3 bucket

6. Bucket policy changed

7. Static website is accessible from the URL endpoint

Cloudfront

8. Cloudfront distribution created

9. OAI created to restrict bucket access to Cloudfront user.

10. Bucket policy automatically updated to retrict access to only OAI

11. Verified the bucket is only accessible to OAI

Note:

If you are getting CloudFront Error: This XML file does not appear to have any style information associated with it [duplicate]
go to Cloud front -> Select you cloud distribution detail -> select tab General -> Select edit -> In this form Setup the property Default Root Object to index.html
Ref: https://stackoverflow.com/questions/44741287/cloudfront-error-this-xml-file-does-not-appear-to-have-any-style-information-as

Cloud9 - Secure static web hosting

In this module, we create a cloud-based IDE on AWS Cloud9 and deploy the first version of the static Mythical Mysfits website.

1. Cloned the git repository into Cloud9

2. Bucket created with CLI

3. Static website and Bucket policy added with CLI

4. index.html uploaded from module-1 to bucket

5. Website is visible - http://mythical-misfitfrontend.s3-website-us-east-1.amazonaws.com/

Creating the Core Infrastructure using AWS CloudFormation

1. create-stack from Cloud9

Describe stack

Created

Deploying a Service with AWS Fargate

1. Navigate to ~/environment/module-2/app

2. Build the docker image

3. Testing the Service Locally

Preview JSON response from running service

Pushing the Docker Image to Amazon ECR

1. ECR repository created

2. Login

3. Docker push to ECR

4. Describe image

Configuring the Service Prerequisites in Amazon ECS

1. Create ECS cluster

2. Task definition update

3. Task definition registered

Enabling a Load Balanced Fargate Service

1. Provision a new NLB

nlb.json

2. Create target group

target-group.json

3. Create listener

Console

Load balancer/Listeners

Target group

4. Updated service-definition.json

5. ECS service created

Service running in cluster

Testing the service

1. DNS copied from nlb-output.json

2. Running from browser to get json response

Updating frontend

1. index.html API Endpoint updated to NLB DNS

2. Updated index.html copied to S3 bucket - mythical-misfitfrontend

Verify S3 static website URL

Request going out to ELB DNS from static website URL

Frontend connected to backend container through the load balancer!

Automating Deployments using AWS Code Services

1. Creating a new bucket for artifacts

2. Updated artifacts bucket policy

3. Grant access to this bucket to your CI/CD pipeline

4. Create Code-Commit repository

5. Create code-build project

Create pipeline in Codepipeline

1. Update codepipeline.json

`2. Create codepipeline

3. Updated ECR policy

4. Enable Automated Access to ECR Image Repository

Test the CI/CD Pipeline

1. Configure git and clone

2. Copied the application files to ythicalMysfitsService-Repository

3. Run git commands to push in your code changes

4. CodePipeline in action on git push

Automated Deployment - Testing a code change in mysfits-response.json

Before

Change in mysfits-response.json

git push

CodePipeline triggered

After

Adding a Data Tier with Amazon DynamoDB

Create table with CLI

Table scan shows empty table

Website bucket updated with new URL