Hosting a static website on AWS and implementing CI/CD

For this challenge, we used the following services: Github, Code Pipeline, S3, Cloudfront, and Route53.

▶Github: This tool is the fastest way to integrate APIs and run code.

Create a new GitHub repo for this challenge.

▶Amazon S3:

Create a Bucket add a name and keep all the other default options.

Once the Bucket is created, go to the properties tab of that bucket and below click where the option is to edit Static website hosting. Enable it and add the index file name containing the HTML code.

Since your bucket is publically accessible it does not mean your object is also accessible. At the object level, it should also be accessible else it will throw an error in S3 URL. So here we will define the policies at the object level as shown below.

Please, on the Resource field, add your Bucket name.

Now upload your files to your bucket as shown and after uploading your files, click on the S3 URL.

▶Amazon CloudFront: It is a content delivery network (CDN) that accelerates the delivery of static and dynamic web content to end users. CloudFront delivers content through a worldwide network of data centres called edge locations. When an end user requests content that you’re serving with CloudFront, the request is routed to the edge location nearest to the end user with the lowest latency.

Now, Go the CloudFront and create a distribution and for the origin, it will automatically pop out the S3 URL when you drop down. Unmark the Block all public access and check the Acknowledge box.

In the viewer section, choose the protocol policy and allowed HTTP methods as per your requirement.

As we move ahead, we will be creating a pipeline, so that whenever codes change it should directly reflect on our webpage. As CloudFront uses cache content it might delay in displaying our changed content. So, for this, we will be disabling caching as shown below.

You can enable logging that will store the log files of viewers' requests in the S3 Bucket. For this, I decided to keep the standard store of the logs generated.

Now keep all things as default and click on Create a distribution. Once it is created you will get the Distribution domain name. Open your browser and check if your website is up and running.

▶Codepipeline: This is a fully managed continuous delivery service that helps you automate your release pipelines for fast and reliable application and infrastructure updates.

Go to AWS CodePipeline, click on Create a Pipeline, name your Pipeline and click on Next.

In the Source section, you can choose your repository. For me, I have uploaded it on GitHub so I will be linking my Github repo here.

Skip Build Stage.

In the Deploy Provider section, give the Bucket name where your code files are and whenever changes apply, it should upload the changed files. Check extract files before the deploy option as we don't want jar files to be uploaded.

Click on Next, Review the configs and click to create your pipeline. You make some changes to your source code and push it to repo. CodePipeline will automatically detect it and trigger the pipeline.

Note: the URLs you obtained here are AWS-specific. If you own your domain, then you can use AWS Route 53 to redirect CloudFront or S3 URLs to your domain.

▶Amazon Route 53 is a highly available and scalable Domain Name System (DNS) web service. Route 53 connects user requests to internet applications running on AWS or on-premises.

Go to Route 53 and click on Create Hosted Zone.

If you own any domain then enter your domain name.

Now we will create the A records to send requests to CloudFront URL. Check the Alias button and under Route traffic to choose Alias to CloudFront Distribution.

Thank you for reading this blog.