Set SSL and Custom Domain with Cloud Front and Route53
Well, it's time to configure our existing serverless MERN app with SSL and domain, one thing to note i.e, this post is a continuation of Part1 where we deploy a mern app with AWS serverless services.
Prerequisites.
To Proceed further, I assume you have an AWS account and also have a custom domain.
What we’re gonna do? (all in Free tier)🤔
- ) First thing first, we deploy node-express app to AWS Lambda (Part — 1).
- ) After, we gonna move the react app to S3 Bucket for hosting (Part — 1).
- ) Then, we will connect the s3 bucket with CloudFront. (Part — 2)
- ) Configure Custom domain and SSL with Route 53 (Part — 2)
Step -3:
Here, we will configure our app with AWS Cloudfront, CloudFront is a fast content delivery network (CDN) service that securely delivers your data to customers globally with low latency, high transfer, you could also configure a free SSL with your custom domain by default the request is secure but for .cloudfornt domain. So, let’s get some hands-on now.
Let’s just grab the endpoint of the application, hosted in S3, below image shows where you could find the bucket endpoint.
After this, navigate to the CloudFront console and create a distribution. Replace the bucket endpoint with Origin Domain name and set Redirect HTTP to HTTPS and leave rest default, for now, and hit create it would take some time to create the distribution. In my case
We’ll continue step3 at a later stage but for now, just move to Route53 console to configure our own domain with AWS Route53.
Step 4:
In the Route53 console, first your need to create a hosted zone with your domain name (owndomain.com). Once done you can see two records NS & SOA have created next, you have to replace these NS(Name Servers) with your domain registrar so that whenever any user with this domain hits in the browser, it will redirect it to Route53.
Well, at this point we have only created a distribution and a Hosted Zone with our domain. Now we have to tell Route53 once any user hits the domain where to forward it, that lets heads towards CloudFront Console. Here you now see that your distribution has created with a domain ending with cloudfront.net, if ctrl+c and ctrl+v in the browser, you can see your website is running live and securely. In my case,
Next, what we gonna do is simple, we’ve to define a record in the Route53 console. For that click on create record button, choose routing policy as a simple routing policy then click next and define the record, let’s just go through the pic what I did basically,
Note: One thing to remember while creating a bucket for hosting a web app. It should be named the same as your domain name, let’s say your domain name is xyz.com then your bucket name has to be named xyz.com.
Just a short little bit of what is going here, for the first input box you can leave it blank or type anything suitable as a prefix for the domain but should be the same as the bucket name then for the record type choose A so that we can connect to our CloudFront distribution, next choose an alias to CloudFront service and select your distribution, after that you could see in Route53 table a record has created with Type A and route name will be your custom domain which pointing towards CloudFront, next what you can do just open a new tab and type the domain. The site is live and is running on your domain 😃
But we have to a little extra, you can see that site is live but it’s not secure yet 😕 so how gonna we do that, heads towards ACM (Amazon certificate Manager) to issue a SSL certificate, with the same domain name as yours and map/set the value with route53 record. For practical flow for this process, you could watch it here, from my side I’m gonna showcasing my existing serverless mern app but this time hosted on my custom domain and it’s secure.
Hurray! 👏
We have completed our setup. Before concluding, want to say that we have set up a very basic run-through of a custom domain and SSL in our app, but in a real environment there been an extra setup depends on the need, like in my case I have a domain with https://debarshimondal.online what if a user type https://www.debarshimondal.online. It’s all simple grab some tea or coffee and just google it out.
Conclusion:
From the above steps, we find that how to configure a custom domain and SSL in our web app with help of AWS and its services. Also, let me know if this blog useful to you … if yes then like the post, if not comment out what I missed. Cheers 🍻.
