Angular Hosting and Deployment on AWS S3 + CloudFront

www.internetkatta.com

Hello Am Avinash

- @aviboy2006

Agenda :

• Host Angular web app on AWS using S3 and CloudFront.

• Automate build deployment that recovers from failure.

• Walk through most common issues that occur in AWS S3 web hosting

• Discussion (Q/A)

@aviboy2006

What is ?  🤔

• S3 Bucket - is storage which used for storing content or media or static web hosting

• CloudFront - is like another CDN provided by AWS

• Route53 - NS record management tool

• ACM - AWS SSL certificate provider

@aviboy2006

Hosting Flow:

@aviboy2006

Steps to host Angular app on AWS S3

@aviboy2006

Why should I automate something ?

• Reduce repetitive task

• Avoid manual mistakes

• Easy rollback if something goes wrong

• Of Course it removes dependencies

@aviboy2006

• ng build 

• Copy build folder and upload to S3 bucket

• After upload, go to CloudFront and invalidate cache to content expiring.

What if we missed how to take backup of an existing file if we want to rollback it ?

Deployment Steps

@aviboy2006

Answer ? 

@aviboy2006

Most issue faced in AWS S3

Note : S3 doesn't understand URL routing or rewriting which is required in any SPA or Angular 

@aviboy2006

Any Question ? 

@aviboy2006

Reference:

@aviboy2006

• https://www.internetkatta.com/host-angular-2-or-4-or-5-version-in-aws-s3-using-cloudfront

• https://github.com/aviboy2006/angular-upload-s3cf

• https://docs.aws.amazon.com/AmazonS3/latest/dev/WebsiteHosting.html

• https://stackoverflow.com/questions/50299204/receive-accessdenied-when-trying-to-access-a-reload-or-refresh-or-one-in-new-tab

Thank You !

You can reach out to me here 👇🏻

@aviboy2006

@aviboy2006

https://www.linkedin.com/in/avinash-dalvi-315b021a/

avinashsdalvi@gmail.com

www.internetkatta.com