AWS Amplify + Route 53: Best Practice Guide to Custom Domains for Your Node.js Site
Best practices for deploying your Node.js Portfolio Website using AWS Amplify and Route 53.
If there is something that I appreciate more than anything, it’s knowing that there is a more efficient way of doing something compared to its complex alternative.
Yeah, although there are many ways to connect our app to a custom domain nowadays, it is different when I use AWS Amplify. As a continuation to my previously created article about the same AWS Service, dev.to , I am back at it again with new improvements and developments.
And yet, I stick with my statement before that “Unlocking something that helps in your entry-level projects—whether it’s a small website or a useful tool—is not just beginner’s luck; it’s progress.” This time, it’s the dedication to expand it more that makes us elevate our game.
In this article, I am emphasizing these three significant things we encounter if we deploy our app in Amplify:
- One Push to Git. Automatic Site Updates.
- Custom Domain. Invisible Branch ID.
- Auto-managed SSL Certificates. No Manual Renewal.
I mentioned earlier about the domain. Yes, we can just purchase from Amazon Route 53 so quickly and easily.
These are just the important things we need to remember when doing so:
- Amazon Registrar Sign-Up Confirmation
- Email Verification Required
Actually, we are a few steps ahead of the basic steps so let’s circle back to what this article is about. Here is our Architecture Framework for this reading:
1
GitHub Repo (Node.js) → AWS Amplify (CI/CD + Hosting) → CloudFront (CDN) → Route 53 (Custom Domain)This is a comprehensive guide on best practices for deploying a Node.js Portfolio Website using AWS Amplify and Route 53:
A. Firstly, to prepare our Node.js Project.
It took me a while to identify what I missed in my repository. After reviewing my initial commits, I came across things that need to be remembered when building a Website Project using Node.js:
a. A structured project with a proper package.json including build scripts
b. Pushing the code to a Git repository.
By the way, you can push your code to either GitHub, GitLab, or Bitbucket. Amplify uses Git-based CI/CD.
c. Also, to add a .gitignore to exclude node_modules/, .env, and build artifacts.
Since this is a cloned repository from my previously deployed portfolio, I just created a new environment specifically tailored for this article and project.
B. Next, Set up AWS Amplify.
No dilly dallying, we are setting up our AWS Amplify already. Just like the usual:
- Open AWS Amplify Console and choose “Create New App”
- Connect your Git Repository. It will ask you to install Amplify and to allow access to your repository. It will ask you to Authenticate with GitHub. Now, just select your portfolio repo and branch (example: main or master).
- After selecting your repo and branch, you may review and edit your YML File:
But for best practice, you can push your YML file to your Git Repository. Amplify will use the amplify.yml from the repository when it builds.
- If you have your YML file prepared, Review and click Save. Now wait for it to Build and Deploy.
And as easy as that, you have your deployed repository.
But we want it to be a search engine-organized, don’t we? We want that a specific search automatically shows the result we want. And here comes the usage of the domain we bought earlier.
C. This is when we can finally use what we did in the first part. Register and Configure Your Domain in Route 53
If what you have is a new domain, Register it to Route 53 Domain Registration. Meanwhile, if it is an existing domain, Create a Hosted Zone in Route 53. For context, here is why we do this:
| Hosted Zone | Amplify Custom Domain. |
|---|---|
| DNS management for your domain | connects that domain to your Amplify app. |
Set it to be publicly available.
D. After successfully creating a hosted zone in Route 53, Connect your Custom Domain to Amplify
Go to your app in Amplify. In the “Custom Domain”, select Add Domain. The best part is when your domain is in Route 53 and at the same AWS account, Amplify automatically configures DNS records.
This will take a few minutes or 48 Hours. Amplify creates a CNAME validation record for ACM; wait for AWS to verify it before the certificate is issued. Note: CloudFront is provisioned automatically as part of Amplify Hosting — you won't need to configure it separately.
Some of the significant things to note as well is that Amplify automatically:
- Provisions a free SSL/TLS certificate via AWS Certificate Manager (ACM)
- Sets up both the apex domain (yourportfolio.com) and www subdomain (www.yourportfolio.com)
Both works, in one App, but with a difference:
A. First: https://master.d3lco53nfmi9b3.amplifyapp.com/
B. With Custom Domain: https://www.edianjay.com
B. With Custom Domain: https://www.edianjay.com
And what’s more interesting about this is that with One Push to Git, it automatically updates the Site.
Have a project, opportunity, or just want to get in touch? Feel free to reach out.
ED IAN JAY O. BAGUIO
Github: https://github.com/ebcsr
LinkedIn: www.linkedin.com/in/ed-ian-jay-baguio
Github: https://github.com/ebcsr
LinkedIn: www.linkedin.com/in/ed-ian-jay-baguio
Enjoyed reading this content? Let the author know!
Your likes, comments, shares, and saves help creators reach more builders.
Loading recommendations
Loading article