How to implement AWS CodePipeline for automating deployment of static website in Amazon S3 by using GitHub repository?

Customer satisfaction plays a vital role in software engineering. Satisfying a customer here means that the required product should be delivered as soon as possible.

Similarly, it is essential to update the required changes and deliver the product end-users for optimum user satisfaction. Therefore, this is the situation in which AWS CodePipeline plays a vital role.

Now, Let’s look into the basic concept of AWS CodePipeline

AWS CodePipeline is a fully managed continuous delivery service that allows individuals to automate the release pipelines for fast and reliable application and infrastructure update. CodePipeline automates the build, test and deploys phases of your release process whenever a code change occurs, based on the type of release which individuals define. This allows individuals to deliver features and updates quickly and reliably.

AWS CodePipeline can be easily integrated with third-party services like GitHub or with a custom plug-in. Moreover, since there aren’t any upfront or long term fees with AWS CodePipeline, you pay for just what you use. There aren’t any upfront or long term fees. Here, I will be guiding you to integrate AWS CodePipeline with GitHub repository for automating the deployment of contents of static website which is present in a GitHub repository, all in detail.

What may be some pre requisitions to be covered up before going through this blog?

In this blog, I will be integrating AWS CodePipeline with the GitHub repository. So, if you are familiar with Git and GitHub, it would be more convenient for you to dive right into the step-wise procedure.

But even if you are not familiar to Git and GitHub, it won’t be a big issue as I would be providing all the links to my other blogs in the step-wise procedure which will eventually guide you about different Git commands. So, if you are new to Git and GitHub, then you can start to learn about it by going through the article attached below.

Procedure to use GitHub repository for implementing AWS CodePipeline to automate the deployment of the static website in Amazon S3

Step 1: Go to GitHub from the link provided below.

Note: If you have not created your GitHub account yet and if you require guidance for creating a Github account, visit the link attached below.

Step 2: Provide a suitable name for your repository like in the image below.

Image for post
Image for post

Step 3: In this platform, you can create both public as well as a private repository. Here’s an example of a private repository.

Image for post
Image for post

Step 4: Click on “Create repository”

Image for post
Image for post

Step 5: After you create your repository successfully, you are redirected to the page as shown below.

Image for post
Image for post

Step 6: Now, push the contents of your static website into the repository which you recently created. If you are seeking guidance to push files to GitHub repository, you can refer to the blog provided below.

Step 7: After you have pushed all the contents to your GitHub repository, your repository might have the file structure as shown in the image below.

Image for post
Image for post

Step 8: Now, go to your AWS account. If you require guidance to log in to your AWS Account, you can visit the link provided below.

Step 9: After you log in to your AWS account, use Amazon S3 to host your static website. For further instructions to host a static website using Amazon S3, visit the link provided below.

Note: To configure DNS(Domain Name Server) using Route 53 for providing domain name to a static website, visit the link attached below.

Step 10: After you have successfully hosted your static website using Amazon S3 and have configured DNS(Domain Name Server) using Route 53, go to the home page of your AWS Account and search for “CodePipeline” at “Find Services”.

Image for post
Image for post

Step 11: Click on “CodePipeline” that appears in the drop-down list of “Find Services”.

Image for post
Image for post

Step 12: As you click on “CodePipeline”, you will be redirected to the page as shown below.

Image for post
Image for post

Step 13: Here, click on “Create pipeline” button.

Image for post
Image for post

Step 14: You will further be redirected to the page as shown below. Now, in Pipeline settings, enter “Pipeline name”, then “Role name” to get your pipeline automatically generated as shown in the image below.

Image for post
Image for post

Step 15: Select “Service role” as “New service role”.

Image for post
Image for post

Step 16: Click on “Next” button.

Image for post
Image for post

Step 17: Now, you have to Add source stage. So, in “Search provider” select “GitHub” as we are going to implement AWS CodePipeline for automating the deployment of the static website present in Amazon S3 using GitHub repository.

Image for post
Image for post

Step 18: Click on “Connect to GitHub” button, as we are required to provide AWS CodePipeline access to our GitHub repository

Image for post
Image for post

Step 19: After you click on the button, you have to Sign In to your GitHub account.

Image for post
Image for post

Step 20: Now, you have successfully configured the action with the provider. Hence, you are now allowed to select “Repository” and “Branch”.

Image for post
Image for post

Step 21: After providing “Repository” and “Branch”, click on “Next” button.

Image for post
Image for post

Step 22: Here, you are required to “Add build stage”, for now you can skip this stage so click on “Skip build stage” button.

Image for post
Image for post

Step 23: When a pop-up message appears, you can simply, click on the “Skip” button.

Image for post
Image for post

Step 24: Here, you are required to “Add deploy stage”, in “Deploy provider” select “Amazon S3”.

Image for post
Image for post

Step 25: Now, select “Region” as “US East (N. Virginia)” and select “Bucket” as the named bucket in which all the static files are uploaded and finally checkmark “Extract file before deploy”.

Image for post
Image for post

Step 26: Click on “Next” button.

Image for post
Image for post

Step 27: Finally, review all the details regarding the configuration of pipeline and click on “Create pipeline” button.

Image for post
Image for post

Step 28: Now, you pipeline has been successfully created.

Image for post
Image for post

Let’s test if the pipeline is working appropriately or not by updating the code of the static website

Step 1: Before updating your code, go to your file directory and view the status of file using Git command i.e. “git status”

Image for post
Image for post

Step 2: Now, make the required changes in the file and check the status of file using Git command i.e. “git status”

Image for post
Image for post

Step 3: Push your updated file to your GitHub repository.

Image for post
Image for post

Step 4: Finally, you can view the updates by opening your website in the browser.

Image for post
Image for post

Moreover, if you want to learn how to estimate the monthly bill for using various AWS services, then you can do it by using the AWS Simple Monthly Calculator. So, to learn more about the AWS Simple Monthly Calculator, you can go to the link provided below.

Likewise, you can also visit our website attached below to view the resource material.

www.positivestud.com

References

https://aws.amazon.com/codepipeline/

Written by

Cloud Computing | Data Science | Mobile Application Development | Artificial Intelligence | Python Programming | Soft Skills | Many more…

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store