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