While I was deploying my new portfolio website on AWS this weekend, I find it quite troublesome for people without too much AWS experience, like me. As I was also preparing to get an AWS developer certification, I figure, Why not document everything down as part of my preparation for the test.
So here comes this tutorial on how you can deployed your Node.js project (or any other frameworks as long as you deployed it using Elastic Beanstalk). This tutorial will cover everything you need to know about getting your web app online with your custom domain and SSL certification.
This tutorial will be divided into three parts, feel free to jump into any one of them:
- Deploying Your Web App with Elastic Beanstalk and Code Pipeline
- Register Custom Domain with Route 53 and Add it to Your Site
- Apply for a SSL Certification and Redirect HTTP request to HTTPS
Part 1. Web Application Deployment on Elastic Beanstalk
Now let’s get to the first part: How to deploy our web app in cloud? I’ve been using both AWS Elastic Beanstalk and Heroku for my websites before, overall they offer similar services but AWS obviously have a more powerful platform as Heroku specialized more in web application hosting.
First you will need an AWS account, which I’m not going to explain in detail. After getting your AWS account, simply search for Elastic Beanstalk and we can start our journey from here:
Elastic Beanstalk Configuration
Create a new application as EB will be hosting your app from here:
And your will also need to create a new environment for it:
Select Web server environment and go to the next step:
Choose the type of your web application (I’m deploying a Node.js project for example):
Now you can leave it from here while AWS is configuring the environment for you:
Code Pipeline and its Configuration: CI/CD Your Code to Elastic Beanstalk
While your EB environment is being set up in the background, let’s find another service called Code Pipeline
So what’s Code Pipeline? It’s a CI/CD tool offered by AWS. To put it in a simple way, every time you make a change to your code, Code Pipeline will implement these changes to your application hosted in cloud: just like what pipeline does, isn’t it?
Similar to creating an application on EB, we will need to create a pipeline first:
Add your code source to it, basically where your codes come from. Since I’m using GitHub I will just need to connect to my GitHub account and add my repository to it:
In the next step, choose Skip build stage, and ignore the prompt message:
Now we are coming to the other end of the pipeline: Where do we want to direct our code into? The Elastic Beanstalk we just set up ofc!
Since your EB environment should be set up right now, it will be displayed as one of the options:
Review & Create your pipeline:
You will be directed to the pipeline dashboard, wait a little bit as AWS is trying to fetch your code from GitHub to your EB environment:
After waiting for a couple of minutes, everything is good to go. If you encounter any error in the transition, it’s most likely to be a problem in your EB application, go back and check if the application and environment is created correctly.
Now if you go back to your EB dashboard, you will find that the application is already up and running:
Try click the URL and AWS will be serving you the web application you just gave them:
Part 2. Register A Custom Domain With Route 53 and Add it to Your Web Application
Now our web app is already accessible on Internet, how do we make the url more appealing? Yes, you will want your own domain instead of telling others “Hey dude check out my new website at SampleWebsite-env.eba-qcpytjdg.us-east-1.elasticbeanstalk.com”.
There are tons of domain providers on the market such as GoDaddy, Freenom, or some australian domain provider like crazy domain. What we will use here is Route 53, a DNS service offered by AWS:
First you will need to purchase a domain. Search for your favorite domain name, if it’s taken, try switch to something else suggested below:
After buying your domain, let’s configure it a little bit so people can use it to access your website.
Now go into the DNS management and click the domain your just purchased:
Now, copy the URL of your EB application as we will need to create two records here using it:
Create one A record as below:
Create another CNAME record as:
Now you should be able to access your website through your custom domain!
Part 3. Add HTTPS to Your Website
If you pay attention to the lock icon right on the top left corner of your browser, next to the address bar, you will notice that it’s saying the connection is not secure. What does it mean then? In our case, it means you are accessing the website using HTTP instead of HTTPS.
HTTPS is an updated version of HTTPS, it means all the communication between your browser and the web server (AWS in this case) are encrypted.
To enable HTTPS to your website, there are three things you need to do:
- Apply for a SSL certification
- Add it to your website
- Redirect HTTP request to HTTPS
Apply for a SSL certification with AWS
What we are going to do next is apply for a SSL certification with AWS, of course you can do it with other organization but we will just go with AWS here. First, you will need to search for Certificate Manager on AWS:
Choose Request a certificate
Select Request a public certification
Add the SSL Certification to Your Website
Add domain names that you wanna be certified:
Choose DNS validation:
Skip the step below for now:
Review the request
Now since we choose DNS validation, we will simply add these two records to our DNS setting. Because we already use Route 53 to manage our DNS, we can simply click Create record in Route 53 and AWS will add these records automatically.
Wait for the DNS record to propagate, it might take half an hour, and then you will be able to access your website through “https://www.samplewebsite.com”
Redirect HTTP request to HTTPS
Now, even though we can access our website through HTTPS, you will notice that if we enter www.samplewebsite.com in our address bar, it stills comes with a HTTP link. To resolve this issue, we need to configure the load balancer so it can direct our HTTP request to our HTTPS site.
First, go back to your EB application, and open the configuration tab
Scroll down to the Load Balancer option, that’s where you want to make some adjustment:
By default, you will only have one type of listener, which is HTTP. What we need to do here is add a HTTPS listener to it as below:
Now, search for EC2 in the AWS services and find the Load Balancer option:
Find the Load Balancer for your EB application and you should be seeing two listener down there in the Listeners tab:
Edit the rules under the HTTP listener and set the default action to Redirect to https://www.samplewebsite.com