When you’ve successfully hosted a static website on Amazon S3, the next step is to establish continuous integration and continuous deployment (CI/CD) from your repository to the S3 bucket. The most important considerations are whether disaster recovery is in place and whether it is resilient. In this session, learn how to use AWS CodePipeline to establish continuous delivery for every commit into an AWS CodeCommit or GitHub repository. Then, learn how to set up cross-Region replication with an S3 bucket in another Region for disaster recovery, using an Amazon CloudFront origin group with a main and DR bucket as primary and secondary origins.

1. © 2021, Amazon Web Services, Inc. or its affiliates. All rights reserved.

2. © 2021, Amazon Web Services, Inc. or its affiliates. All rights reserved.
© 2021, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Enable continuous delivery and
resiliency for a static website
Bhuvaneswari Subramani (she/her)
C O M 2 0 3
Director, Engineering Operations and AWS DevTools Hero
Infor

3. © 2021, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Quick intro
Bhuvaneswari Subramani (Bhuvana)
Director, Engineering Operations, Infor
AWS Hero since 2019
Organizer, AWS User Group Bengaluru
Leading cloud computing, DevOps,
and Performance QA
https://bhuvana.pro
/bhuvanas
@installjournal

4. © 2021, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Traditional static website hosting
Source control management
Continuous integration and continuous delivery
Enable resiliency
Agenda

5. © 2021, Amazon Web Services, Inc. or its affiliates. All rights reserved.
© 2021, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Traditional static
website hosting

6. © 2021, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Everything fails all the time.
Dr. Werner Vogels
VP and CTO, Amazon

7. © 2021, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Traditional static website architecture
AWS Cloud
Amazon Route 53
AWS Certificate
Manager (ACM)
Amazon
CloudFront
example.com logs.example.com

8. © 2021, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Traditional static website architecture
AWS Cloud
Amazon Route 53
AWS Certificate
Manager (ACM)
Amazon
CloudFront
example.com logs.example.com
Is it complete?

9. © 2021, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Challenges
• Repository for static website
code
• Traceability for code changes
• Sharing environment for
staging and prod
• No CI/CD
• Disaster recovery
• Resilient for regional failure

10. © 2021, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Opportunities for automation
Source control
management (SCM)
Continuous integration and
continuous delivery (CI/CD)
Resiliency

11. © 2021, Amazon Web Services, Inc. or its affiliates. All rights reserved.
How automation can tackle the challenges
• Repository for static website code
• Traceability for code changes
• Sharing environment for staging and prod
• No CI/CD
• Disaster recovery
• Resilient for regional failure
SCM
CI/CD
Resiliency

12. © 2021, Amazon Web Services, Inc. or its affiliates. All rights reserved.
© 2021, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Source control
management

13. © 2021, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Source actions for AWS CodePipeline
Code management
• Check in source code
• Peer-review new code
• Version control
AWS CodeCommit Bitbucket Cloud
GitHub GitHub Enterprise

14. © 2021, Amazon Web Services, Inc. or its affiliates. All rights reserved.
© 2021, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Continuous integration
and continuous delivery

15. © 2021, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Continuous delivery stages
Source
Developers
commit changes
Staging
Deploy and test
Approval
Green signal
Production
Go live!

16. © 2021, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Continuous integration
Source
Developers
commit changes
Staging
Deploy and test
Approval
Green signal
Production
Go live!

17. © 2021, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Continuous delivery with AWS DevTools
Source
Developers
commit changes
Staging
Deploy and test
Approval
Green signal
Production
Go live!
AWS CodeCommit
AWS CodePipeline
AWS CodeBuild AWS CodeBuild
AWS CodePipeline AWS CodePipeline

18. © 2021, Amazon Web Services, Inc. or its affiliates. All rights reserved.
AWS CodePipeline
Continuous delivery AWS architecture
Developers
Source Deploy Test
staging.example.com
Deploy Test
example.com
AWS
CodeCommit
Approval
Source Staging Approval Production
Amazon S3
bucket
Amazon S3
bucket

19. © 2021, Amazon Web Services, Inc. or its affiliates. All rights reserved.
AWS CodePipeline
Continuous delivery AWS architecture
Source Deploy Test
staging.example.com
Deploy Test
example.com
Source action
Input artifact: None
Output artifact: MyWeb
Deploy action
Input artifact: MyWeb
Output artifact: MyWeb
Deploy action
Input artifact: MyWeb
Output artifact: None
Approval
AWS
CodeCommit
Developers
Amazon S3
bucket
Amazon S3
bucket

20. © 2021, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Visualize the pipeline execution
Source
MyWebsiteSource
CodeCommit
i
Deploy to staging
DeployToStaging
Deploy
TestStagingWebsite
CodeBuild
i
i
Approval
GreenSignal
Approval
i
Deploy to production
DeployToProd
Deploy
TestProdWebsite
CodeBuild
i
i

21. © 2021, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Visualize the pipeline execution
Source
MyWebsiteSource
CodeCommit
i
Deploy to staging
DeployToStaging
Deploy
TestStagingWebsite
CodeBuild
i
i
Approval
GreenSignal
Approval
i
Deploy to production
DeployToProd
Deploy
TestProdWebsite
CodeBuild
i
i
Manual approval

22. © 2021, Amazon Web Services, Inc. or its affiliates. All rights reserved.
© 2021, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Create pipeline and
configure

23. © 2021, Amazon Web Services, Inc. or its affiliates. All rights reserved.
AWS CodePipeline components
Action Action
Stage
Action Action
Stage
Action
Transition

24. © 2021, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Pipeline - Settings

25. © 2021, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Pipeline - Settings

26. © 2021, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Pipeline - Source

27. © 2021, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Pipeline – Skip Build

28. © 2021, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Pipeline – Skip Build

29. © 2021, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Pipeline - Deploy

30. © 2021, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Pipeline - Review

31. © 2021, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Pipeline – Output for staging
example.com-pipeline
AWS CodeCommit
example.com-pipeline

32. © 2021, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Pipeline – Output for Approval & Production
example.com-pipeline
AWS CodeCommit
example.com-pipeline
Approval
GreenSignal
Approval
i
Deploy to production
DeployToProd
Deploy
TestProdWebsite
CodeBuild
i
i

33. © 2021, Amazon Web Services, Inc. or its affiliates. All rights reserved.
© 2021, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Enable resiliency

34. © 2021, Amazon Web Services, Inc. or its affiliates. All rights reserved.
AWS Cloud
Replication
Amazon Route 53
AWS Certificate
Manager (ACM)
Region Region
Cross-Region replication
example.com dr.example.com
Origin group
Amazon CloudFront

35. © 2021, Amazon Web Services, Inc. or its affiliates. All rights reserved.
© 2021, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Set up replication
from example.com
to dr.example.com

36. © 2021, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Create
replication
rule
Enable
bucket
versioning
Source
bucket
Destination
bucket
Save &
ready

37. © 2021, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Create
replication
rule
Enable
bucket
versioning
Source
bucket
Destination
bucket
Save &
ready

38. © 2021, Amazon Web Services, Inc. or its affiliates. All rights reserved.
example.com
Create
replication
rule
Enable
bucket
versioning
Source
bucket
Destination
bucket
Save &
ready

39. © 2021, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Create
replication
rule
Enable
bucket
versioning
Source
bucket
Destination
bucket
Save &
ready

40. © 2021, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Create
replication
rule
Enable
bucket
versioning
Source
bucket
Destination
bucket
Save &
ready

41. © 2021, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Create
replication
rule
Enable
bucket
versioning
Source
bucket
Destination
bucket
Save &
ready

42. © 2021, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Create
replication
rule
Enable
bucket
versioning
Source
bucket
Destination
bucket
Save &
ready

43. © 2021, Amazon Web Services, Inc. or its affiliates. All rights reserved.
© 2021, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Create origin group

44. © 2021, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Create origin for disaster recovery

45. © 2021, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Create origin group

46. © 2021, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Time to test for resiliency
• Update the S3 bucket policy (example.com) where you hosted static
website to deny for Amazon CloudFront
• Watch Amazon CloudFront distribution as it redirects the request to
the disaster recovery S3 bucket (dr.example.com)

47. © 2021, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Time to test for resiliency – In action
Change the bucket policy for the source bucket (example.com)
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "CloudFrontReadGetObject",
"Effect": ”Allow",
"Principal": {
"AWS": "arn:aws:iam::cloudfront:user/CloudFront Origin Access Identity XXXXXXXXXXXX"
},
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::example.com/*"
}
]
}
Deny

48. © 2021, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Time to test for resiliency – In action
Change the bucket policy for the source bucket (example.com)
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "CloudFrontReadGetObject",
"Effect": ”Allow",
"Principal": {
"AWS": "arn:aws:iam::cloudfront:user/CloudFront Origin Access Identity XXXXXXXXXXXX"
},
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::example.com/*"
}
]
}
Deny
Yay!! Still works

49. © 2021, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Time to test for resiliency – In action
Change the bucket policy for both source and destination bucket
(example.com and dr.example.com)
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "CloudFrontReadGetObject",
"Effect": ”Allow",
"Principal": {
"AWS": "arn:aws:iam::cloudfront:user/CloudFront Origin Access Identity XXXXXXXXXXXX"
},
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::example.com/*"
}
]
}
Deny

50. © 2021, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Time to test for resiliency – In action
Uh-oh! It breaks

51. © 2021, Amazon Web Services, Inc. or its affiliates. All rights reserved.
© 2021, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Resources

52. © 2021, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Additional resources
My blog featured in AWS Heroes Content Library:
CI/CD for a static website hosted on Amazon S3
https://go.aws/3b9xkQk
Related dev.to blogs written by me:
• Self-hosting secured static web site using S3, Route 53, ACM, CloudFront
https://bit.ly/3b6evgR
• CI/CD for a static website hosted on Amazon S3
https://bit.ly/3GlSN6D
• Enabling resiliency for a static website hosted on AWS Cloud
https://bit.ly/3jzTRue
/bhuvanas

53. © 2021, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Thank you!
© 2021, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Bhuvaneswari Subramani
https://bhuvana.pro/
/bhuvanas
@installjournal

54. © 2021, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Please complete
the session survey
© 2021, Amazon Web Services, Inc. or its affiliates. All rights reserved.