Hosting Static Website Using AWS S3, ACM, CloudFront and AWS CodePipeline
Published: 2023-06-23 06:27:53

#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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t2r35hmgozh7v0esiscp.png)


Upload the website files to bucket:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ze9xb54p21nor5g8umrv.png)



Block Public Access of S3 Bucket for Security :


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1ukods9dlbj042avl3ms.png)


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


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xjjyxu6e2t3eapowoa95.png)


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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gta7luqczrnsiiup06jo.png)



Setup 2:

Now, Go to CloudFront and Create distribution:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s9xlrwnfiysqdizx5d3o.png)


Create Distribution and select WAF option


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jl724rwnlcve66mu7k9o.png)


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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t30hvmf7wi8um9qhukln.png)


Setup 3 :

Go to AWS CodePipeline

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ixv9b9dadpy393j31t0d.png)



Create Pipeline and name it and connect with the Github

Select Git Repo and Branch


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/df88ewtha6aolxhjf3vg.png)


Build it and you will see Done Screen

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2s2ol7ddlahwwmfnwdsx.png)



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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6mrhbop2vr3wbzo70v7p.png)



Follow me :

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

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

Twitter: https://twitter.com/harshaljethwaa

Thank You!!!