We all love automating stuff and letting the mighty bots do things for us. I am no different. Recently, I finished developing my portfolio website and decided to deploy it on AWS. In fact, I wrote an article about you can host your website on AWS. It's pretty straight forward and I would recommend you give it a go 🙂
Anyway, so soon after I released my portfolio, I got a handful of suggestions to incorporate. Some improvements, some bugs, some typos, and some just tiny things I noticed but was putting off from doing. I started incorporating these changes but soon lost the enthusiasm. Not because the changes were difficult, but deploying these changes every time was just getting mundane. So I did the obvious thing and decided to not make any further changes. No, I am kidding! I decided to instead automate my deployment process 😎
In this article, I will walk you through the process of automating your deployment using AWS CodePipeline. One of the major reasons I chose CodePipeline is that it is a fully managed service that takes away the overhead of server configuration, maintenance, patching, upgrading, etc. It is also pretty simple to configure and I promise you this process will take 5 mins if you do it alongside reading this article.
The setup
Below, you can see the cloud architecture of my static website. It is hosted on AWS wherein the files (HTML, CSS, JS, and assets) sit in S3. CloudFront is the CDN and Route53 is a DNS service offered by AWS that I use to manage my domain (as well as the registrar) and add routing rules etc.
My code sits in GitHub and in fact, I have made the repo public and you can find it here. This setup is quite important as the deployment pipeline depends on it.
Let's Build
Let's log in to the AWS console and go to the CodePipeline service. On the landing page, you will see an orange button Create pipeline. Click on that button and that should open a form to choose pipeline settings. In this form, enter a name of your choice. I am entering portfolio-deployment since this is the deployment pipeline for my portfolio website. Now, click next and you will be asked to choose a Source Provider. Here, select GitHub (Version 2). AWS does not recommend using GitHub (Version 1) since version 1 depends on OAuth to authenticate with GitHub whereas version 2 installs the AWS connector application into your repo making the integration and access management straightforward.
Next, we need to allow AWS to talk to your GitHub repo. To do so, click on the Connect to GitHub button and that should open a new window. In this window, enter a connection name. I am entering tejansh-aws-blog-connection and click on Connect to GitHub. This should open the GitHub login page wherein you can enter your credentials. Upon logging in successfully, you'll be redirected to the AWS window where you can click on Install a new app and click on Connect. This will allow your AWS account to talk to your GitHub repo.
Awesome, now you can go back to the AWS page where we were adding the Source Provider. You will now see that this page shows a message like "✔ Ready to connect". Great, now under the Repository name dropdown, select the name of the repository where your source code sits. I am choosing portfolio since that is what I intend to deploy via this pipeline. Under that, for Branch name, choose the branch which you want to deploy. I am choosing develop since that is my master branch. On completion, the form should look like the below image:
Note that the option Start the pipeline on source code change is checked. This will ensure that whenever you merge something to your master branch, it is automatically deployed 🚀
Great, now click on Next and on the next page you will be asked to select a Build Provider. We will skip this step since we are using this pipeline for deployment only. To do so, click on the Skip build stage button and confirm.
On the next page, you will be asked to select Deploy provider. Here, from the dropdown, select Amazon S3. This will open up a few more options. Under region, select the region where you want to run this pipeline. I am selecting Europe(Ireland) here. Under that, you need to choose the bucket where you want the deployment to take place. What does this mean? Earlier when I explained my setup, I had mentioned that my files (HTML, CSS, JS, and assets) sit in S3. So to deploy new changes, I need to replace the old files in this S3 bucket with the new ones from my GitHub repo. Thus, under Bucket, I am selecting tejansh-portfolio as that is the bucket where my website is currently deployed. Finally, select the Extract file before deploy option. Note that this is important since CodePipeline will pull our code as a zipped file from our repo. If we don't select this option, our deployment will fail. How do I know? My deployment failed. So I decided to dig into AWS docs and found that this is the reason why it failed. 🤦♂️
On completion, the inputs should look like this:
Great, now click on Next and you will be asked to review all the information you'd previously entered. If everything looks alright to you, click on Create Pipeline.
That's it. The deployment pipeline is ready! 🎉
On completion, you will see the below page:
You can push some changes to your master branch and come back to this CodePipeline job and you will see that the job was triggered again and a fresh deployment will be done again. If you want to manually trigger a deployment, just click on the orange Release change button that you see on the right top corner.
That's it. Now you have a fully managed deployment pipeline. No installations, no server maintenance, no scalability issues, no "master-slave" configuration, none of that. Just a few clicks and you have a full-fledged deployment pipeline ready. 🚀
