Hosting static website on AWS S3 with CloudFront+ creating CI/CD pipeline + SSL with domain name

Project 1 :

It is to tell people what they can expect. It talks about important tools for the project, such as GitHub, AWS CodePipeline, AWS S3, CloudFront, AWS Route 53, and SSL. Overall, it shows the most important parts of the project clearly.

GitHub is a popular web-based platform used for version control and collaboration in software development projects. It allows developers to store and manage their source code, track changes, and collaborate effectively with other team members.

AWS CodePipeline is a fully managed continuous integration and continuous delivery (CI/CD) service. It enables developers to automate their software release processes and streamline the deployment of applications. CodePipeline integrates with various AWS services and third-party tools, allowing users to build, test, and deploy their code with ease.

AWS S3 is a scalable and safe object storage service. It provides developers with a simple and reliable way to store and retrieve any amount of data from the cloud. S3 is commonly used for hosting static websites as it offers high availability, durability, and cost-effectiveness.

AWS Route 53, is a domain name system (DNS) web service that is both scalable and highly available. It allows users to register and manage domain names, translate human-readable domain names into IP addresses, and route incoming requests to the appropriate resources within AWS or outside.

CloudFront service, which is a global content delivery network (CDN). It helps deliver content, such as static websites or dynamic web applications, with low latency and high transfer speeds by caching content at edge locations worldwide. By using CloudFront with an S3 bucket, you can improve the performance and reliability of your static website by serving it from edge locations closer to your users.

When hosting a static website on AWS S3 with CloudFront and creating a CI/CD pipeline, you can follow these steps:

Create a bucket and unmark Block all public access because we will be hosting web on S3, so the bucket should be publically accessible as shown below.

While establishing an AWS S3, restrict access to the public. AWS CloudFront can be used to access the S3 files to display the website.

1. click on the create bucket button.

2. Now you can see your bucket in the s3 dashboard.

   

3. Once you enter the dashboard, it's empty.

4. Now Click on the properties tab on the top bar. and scroll down to the option Static Website Hosting. and click on the EDIT button which will be there on the right side of your window.

1. Click Enable Static website hosting. In the index document text box, insert the name of the file you want to serve as the HOME page, such as index.html. Write the name of the error-handling file in the error document text box. Otherwise, leave it. click Save Changes. The image underneath is easier to view.

The public can get to your container, but they can't get to what's inside. If not, the S3 URL doesn't work. As shown below, rules will be set at the object level. The other way is to update the Bucket policy from AWS CloudFront when starting AWS CloudFront and selecting Update S3 policies.

After you send your website to Amazon S3, it will be served. Live in an instant. We'll do this right because we know how to use technology. CI/CD process using Codepipeline.

Go to CodePipeline and click on the button that says "Create a pipeline."

Click Next, choose s3 and bucket name.

Click Next, Choose GitHub version 2 as the source provider. If you click on Connect to GitHub, a pop-up will appear.

Skip the Build Stage and then add deploy stage by using AWS S3 bucket name.

Codepipeline Ci/Cd is created.

Go back to S3 and look at the files in the bucket that were pulled from GitHub.

Check the URL from the S3 Static Website

Create a CloudFront Service:

Created -> Origin domain (Copy Satic URl from S3) and View Http & Https

After this, we'll get a domain name for sharing. If you open this in your browser, the site will run here and Display the WebSite.

Route 53 connects user requests to internet apps that are running on AWS or on-premises.

Steps:

Click on Create Hosted Zone on Route 53.

• 

• Click the "Create Hosted Zone" button and then type the name of your website.

• Click the Create button to create the new shared zone. Make an alias record in your hosting zone that leads to your CloudFront distribution.

• In the Route53 window, click on the hosted zone that you just made and then click on Create Record Set.

• Now, we'll set up the A records so requests can be sent to the CloudFront URL. Under Route traffic, click the Alias button and choose Alias to CloudFront Distribution.

  SSL is a protocol that ensures secure communication between a client and a server over the Internet. It encrypts the data transmitted between the two, protecting it from unauthorized access. SSL certificates are used to establish trust and enable secure connections, ensuring that sensitive information is transmitted securely

  

Click Next

Once we've finished these steps, our static website will be stored on S3 with CloudFront and accessible through our custom domain name.

Thank you for reading my blog. Happy Learning!!

#10weeksofcloudops

References:

https://docs.aws.amazon.com/AmazonS3/latest/userguide/website-hosting-cloudfront-walkthrough.html#create-distribution

https://docs.aws.amazon.com/AmazonS3/latest/userguide/HostingWebsiteOnS3Setup.html