Mythical Mysfits
Tags: aws
Published: 2021-07-09 05:28:33

# 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
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1u6syq9mazxxf0ox1hxa.png)

# S3 web hosting with CloudFront and OAI
`1. Cloned git repository`
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cfinp3zxmwi2pfkowgsd.PNG)

`2. Git checkout branch python in VSCode`
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h10sqz1xl7etwdwu1ghg.PNG)

`3. S3 bucket  created`
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vzglp9xieizj9bvca4fo.PNG)

`4. Index.html uploaded from github source code to S3.`
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1jjlml4zx65doz45saf6.PNG)

`5. Static website hosted in S3 bucket`
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2kd8uaj9wb5xi63x3g3k.PNG)

`6. Bucket policy changed`
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8ciwpny733fpiudt9bf5.PNG)

`7. Static website is accessible from the URL endpoint`
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5wa8dwo0zlf2tcfn5nxo.PNG)

# Cloudfront
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dtlqhl0gtm0783qqtsqw.PNG)


`8. Cloudfront distribution created`
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tneyqmld44fzgr3x7m8d.PNG)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b34diasn3tkoi798qm0k.PNG)

`9. OAI created to restrict bucket access to Cloudfront user.`
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c98kwvqhzivfzem8gqlc.PNG)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kk4siwl0ggmd54ghfn99.PNG)

`10. Bucket policy automatically updated to retrict access to only OAI`
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ppchl1k5ow35v1cqwxh4.PNG)

`11. Verified the bucket is only accessible to OAI`
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kkn085k2cyiim4dpchvp.PNG)

# 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
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q4r66i1imcwpx5av1e4t.PNG)

# 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`
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kguu2l11x0xnxj4bs9mf.PNG)

`2. Bucket created with CLI`
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wj70hlimi608lgy2upth.PNG)

`3. Static website and Bucket policy added with CLI`
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jcgwyznc9i17tdo4auwi.PNG)

`4. index.html uploaded from module-1 to bucket`
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z6m9pd8zl0c2m0238bmw.PNG)

`5. Website is visible` - `http://mythical-misfitfrontend.s3-website-us-east-1.amazonaws.com/`
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xhf6j6okana2i9ftiq35.PNG)

# Creating the Core Infrastructure using AWS CloudFormation
`1. create-stack from Cloud9`
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aq472jtty8flmp0d4yi1.PNG)

`Describe stack`
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ynvvi21lxbib14tfehfl.PNG)

Created
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f4ol9zm4rtgl05ux68bw.PNG)

# Deploying a Service with AWS Fargate
`1. Navigate to ~/environment/module-2/app`
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zt0txsre9du41raokda3.PNG)

`2. Build the docker image`
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dalzei3iarowvbfnueoj.PNG)

`3. Testing the Service Locally`
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7hkxavcpulbnt2v52bvy.PNG)

Preview  JSON response from running service
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4tox1bea791kmba723b2.PNG)

# Pushing the Docker Image to Amazon ECR
`1. ECR repository created`
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8udeashoipf5jk48mwro.PNG)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tjtspejyothwo3wzxvw8.PNG)

`2. Login`
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xb31oii5s8batiznvved.PNG)

`3. Docker push to ECR`
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5dvdvx8dhtnv1h6oq58i.PNG)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6zogzj5px6sodghi2e5j.PNG)

`4. Describe image`
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h7izc9ghbsmdbd0mbc2r.PNG)

# Configuring the Service Prerequisites in Amazon ECS
`1. Create ECS cluster`
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j5v3s2egp9zkuotlpr4o.PNG)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g45pz5opsxaru21c0qoz.PNG)

`2. Task definition update`
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hwri7waw18kjcb4naoj8.PNG)

`3. Task definition registered`
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/geq6u4wo6d8bqlz4vuh3.PNG)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y7gvnszm19ub9svavyn1.PNG)

# Enabling a Load Balanced Fargate Service
`1. Provision a new NLB`
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0oexh77nmu1cy4260qs1.PNG)

nlb.json
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uuc5qqyiwgkr90lusoom.PNG)

`2. Create target group`
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/feq6lkw2e9r7jzvi0vcd.PNG)

target-group.json
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i5gvf3uqb1vmc3xgta1z.PNG)

`3. Create listener`
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ifohikpgqj46a641knix.PNG)

# Console
Load balancer/Listeners
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u5boajbacq5kpe446syy.PNG)

Target group
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ypzwlxd7onpnrz3xjgti.PNG)

`4. Updated service-definition.json`
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/53u724vt3glkwrdibj3p.PNG)

`5. ECS service created`
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/klwn5buxhpgn30agzdmd.PNG)

Service running in cluster
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l4x1nr57do7kyr2jb679.PNG)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/efvqo257hfc4gfksd4ej.PNG)

# Testing the service
`1. DNS copied from nlb-output.json`
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z27hung69p9hb5p89jm2.PNG)

`2. Running from browser to get json response`
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wbov69qpf5xbj0scqy0a.PNG)


# Updating frontend
`1. index.html API Endpoint updated to NLB DNS`
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/50admsz8gfhs9bwfjw2q.PNG)

`2. Updated index.html copied to S3 bucket - mythical-misfitfrontend`
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f4l2yvuu1m7ypk5j1dl0.PNG)

# Verify  S3 static website URL
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0shlbodb08lez181d2pk.PNG)

Request going out to ELB DNS from static website URL
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5empz8r86nrhohejdtvl.PNG)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rezeb6rskfj6qweih0al.PNG)

# Frontend connected to backend container through the load balancer!

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/00gxny2gvpf7uknoibb7.png)
# Automating Deployments using AWS Code Services
`1. Creating a new bucket for artifacts`
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wm3hy75ab1rytk8zjz77.PNG)

`2. Updated artifacts bucket policy`
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/px8xrwoju97rfcyf4eg5.PNG)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1pijfkifzepc05l9wd62.PNG)

`3. Grant access to this bucket to your CI/CD pipeline`
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5m0bjjd27l51la9wjadp.PNG)

`4. Create Code-Commit repository`
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2fc6eow1pi4my5u8af5o.PNG)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ziyxjaeev26govd9wjqe.PNG)

`5. Create code-build project`
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n5lk1vsbpf5m4muvpc5e.PNG)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nqpwhue2b31gj9zt16op.PNG)

# Create pipeline in Codepipeline
`1. Update codepipeline.json`
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3at8brpe2u4atsy2m558.PNG)

`2. Create codepipeline
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pemzavj8luly08ghpo8j.PNG)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ao2ywcfn70rlzhn1cifc.PNG)

`3. Updated ECR policy`
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/53ty0fwpgxmcpw4ikhdn.PNG)

`4. Enable Automated Access to ECR Image Repository`
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qgxe65ny79vk89n4a04y.PNG)

# Test the CI/CD Pipeline
`1. Configure git and clone`
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ad0qvy2w2c1fo15ixqnz.PNG)

`2. Copied the application files to ythicalMysfitsService-Repository`
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n0vw5xki8u39tf3qzpvs.PNG)

`3. Run git commands to push in your code changes`
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u3c7d5v2jhk4ynm6nhlc.PNG)

`4. CodePipeline in action on git push`
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cvo6stoizz5uhisai82x.PNG)

# Automated Deployment - Testing a code change in mysfits-response.json
`Before`
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mcg7smwi1ujv8zlz7nsj.PNG)

`Change in mysfits-response.json`
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y5bb9qmjed2k41xdkbcw.PNG)

`git push`
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ddllevabb8r6qh8e13g4.PNG)

`CodePipeline triggered`
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rxe4l6yminfkzneo0q2t.PNG)

`After`
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q2rqsdotpxww1rl5ikr4.PNG)

# Adding a Data Tier with Amazon DynamoDB
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hp4sjlry268swlwv6qle.png)

`Create table with CLI`
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xpuqv34tq9fa6szyfxin.PNG)

`Table scan shows empty table`
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b38cv2sx1xwh1v31u4nh.PNG)

`Website bucket updated with new URL`
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2h6wbznal7gxstdyfji0.PNG)