Presentation about AWS S3 Static Website Hosting and CICD Pipeline using GitHub

1. AWS S3 static web site hosting
&
CICD Pipeline using GitHub
Girish Bhatia | 2023
AWS cloud technology enthusiast

2. About Girish Bhatia
IT Experience:
§ 20+ years in IT
§ Software Development using Java, .NET, Oracle, APIs, BI tools in
telecom, public/state system, banking/finance domain.
§ Onshore/offshore software delivery
§ Tech Program/Project Management
§ Journey to Cloud, Tech Modernization
§ On Prim to Cloud Migration
§ Cloud/API integration B2B
Qualifications:
§ Master of Science in Computer Information Systems
§ AWS Certified Solution Architect: Associate ǀ Amazon Web Services
§ Microsoft Certified: Azure Fundamentals ǀ Microsoft
§ AWS Certified Cloud Practitioner ǀ Amazon Web Services
§ Microsoft Certified Professional: Solution Architecture ǀ Microsoft
§ Microsoft Certified .NET Solutions Developer ǀ Microsoft
§ Microsoft Certified .NET Solutions Developer ǀ Microsoft
§ Project Management Professional (PMP) | Project Management Institute
§ Certified Scrum Master | Scrum Alliance

3. Girish’s Tech Journey

4. AWS S3 Static Website Hosting & CICD Pipeline using GitHub
• AWS S3 Static Website Hosting
• CICD Pipeline using GitHub
• Update S3 Website using CICD Pipeline

5. AWS S3 Static Website Hosting
• What is S3?
• Simple Storage Service
• Object Storage
• 99.99% availability
• Setup Budget
• Familiarize yourself with cost explorer

6. S3 Bucket
• Show AWS console view of S3 bucket

7. AWS Budget
• Show AWS console view of Budget

8. AWS Cost Explorer
• Show view of AWS console view

9. Steps for S3 Web Site Hosting
o Create S3 bucket for static contents
o Enable static web site hosting
o Upload site contents
o Organize html, CSS, image and other contents files
o Identify index and error pages.

10. See it in action!
o Create S3 bucket for static contents
o Enable static web site hosting
o Upload site contents
o Organize html, CSS, image and other contents files
o Identify index and error pages.

18. http://cmh-aws-meetup.s3-website.us-east-2.amazonaws.com

19. Got the website endpoint, what’s next?
o Buy a Domain (use Route 53 or similar service )
o Configure S3 bucket end point for your domain. Configure CNAME entry
o Public Hosted Zones are meant to be used for people requesting your website through the Internet. Finally, NS
records must be updated on the 3rd party Registrar.
o Optional: Use ACM to generate SSL/TLS Certificate
o Install certificate to enable HTTPS
o Use CloudFront (you cannot use https/certificate directly with S3 static web site)

20. AWS Services used thus far:
o AWS Budget
o AWS Cost Explorer
o AWS S3
o AWS Route 53
o AWS ACM
o AWS CloudFront

21. Upload site contents - Multiple Way to upload contents
o Use AWS Console to load the contents
o Use IDE/AWS tools like VS Code. ( this is my preferred way )
o Use CLI

23. VS Code + AWS Toolkit Extension
o VS Code View
o Updating the content via VS Code
o Refresh the site

24. VS Code + AWS Toolkit Extension
o Show VS Code View

25. Backup your website code in your local folder
o CLI Command to backup/fetch contents to your local folder
o aws s3 cp s3://cmh-aws-meetup/ ./ --recursive

26. CICD Pipeline

27. CICD Pipeline using GitHub
o VS Code + GitHub
o AWS Code Commit
o AWS Code Build
o AWS Code Deploy
o AWS Code Pipeline
o AWS S3

28. Current State: Basic Architecture ( on prim )

29. Current State: Improved Architecture ( on prim )

30. Future State: AWS Cloud enabled Architecture

31. See it in action!
o Create Code Pipeline
o Commit change
o Push to GitHub
o Code Pipeline gets triggered and update S3 Bucket
o Updated website is published!

32. Create Code Pipeline

33. Create Code Pipeline

34. Add source Repo

35. Connect to GitHub

36. Connect to GitHub

37. Connect to GitHub

38. Code pipeline deploy stage

39. Code pipeline Review before creation

40. Code pipeline Created!

41. Code pipeline Manual Approval Action

42. S3 Bucket

43. GitHub

44. AWS Services used:
o AWS Budget
o AWS Cost Explorer
o AWS S3
o AWS Route 53
o AWS ACM
o AWS CloudFront
o AWS Code Deploy
o AWS Code Pipeline
o VS Code
o GitHub

45. Thank you!
Girish Bhatia | 2023

46. Contact Me:
LinkedIn: https://www.linkedin.com/in/girishbhatia/
Website: http://girishbhatia.tech
Twitter: https://twitter.com/BhatiaGirish/
Code/slide available: GitHub