DEV Community

Harshal Jethwa
Harshal Jethwa

Posted on

Hosting Static Website Using AWS S3, ACM, CloudFront and AWS CodePipeline

10WeeksOfCloudOps

Introduction of AWS Services that we are going to use :

AWS S3 (Simple Storage Service):

AWS S3 is a highly scalable, reliable, and secure object storage service that allows you to store and retrieve any amount of data from anywhere on the web. S3 provides developers with simple API access to the same scalable storage infrastructure that Amazon.com uses to run its global e-commerce network. It is ideal for hosting static websites, storing backups, and archiving data.

AWS ACM (AWS Certificate Manager):

AWS ACM is a service that makes it easy for you to provision, manage, and deploy SSL/TLS certificates for use with AWS services. It removes the time-consuming manual process of purchasing, uploading, and renewing SSL/TLS certificates. ACM provides you with a simple interface for requesting and managing certificates, as well as for configuring SSL/TLS encryption for your web applications running on AWS.

AWS CloudFront:

AWS CloudFront is a content delivery network (CDN) that securely delivers data, videos, applications, and APIs to customers globally, with low latency, high transfer speeds, and no minimum usage commitments. It integrates with other AWS services like S3 and EC2, enabling you to distribute content stored in S3 buckets or EC2 instances to customers worldwide.

AWS CodePipeline:

AWS CodePipeline is a fully managed continuous delivery service that helps you automate your software release process. With CodePipeline, you can model, visualize, and automate the steps required to release your software, such as building, testing, and deploying code changes. It integrates with other AWS services, such as CodeCommit, CodeBuild, and CodeDeploy, allowing you to create continuous delivery pipelines that are scalable, resilient, and easy to manage.

Setup to Host Static Website Using AWS S3, ACM, CloudFront and AWS CodePipeline :

Setup 1 :

Create An AWS S3 Bucket :

Image description

Upload the website files to bucket:

Image description

Block Public Access of S3 Bucket for Security :

Image description

Select an Option of Static Website Hosting and write index file name :

Image description

Access the Website using link of Static Website you will not get anything.

Image description

Setup 2:

Now, Go to CloudFront and Create distribution:

Image description

Create Distribution and select WAF option

Image description

Setup 3 :

Then, go to ACM(AWS Certificate Manager) validate CName and CValue of your Domain

Add CName and CValue of your AWS cloudfront to your dmain CName and HostName

Now, copy your distribution domain name and paste it to url. you will see your website

Image description

Setup 3 :

Go to AWS CodePipeline

Image description

Create Pipeline and name it and connect with the Github

Select Git Repo and Branch

Image description

Build it and you will see Done Screen

Image description

Now to go to your buckets Invalidation and create invalidation

Now, your Static Website is hosted using AWS S3, ACM, CloudFront and AWS CodePipeline.

Image description

Follow me :

Linkedin : https://www.linkedin.com/in/harshaljethwa/

GitHub: https://github.com/HARSHALJETHWA19/

Twitter: https://twitter.com/harshaljethwaa

Thank You!!!

Top comments (0)