Wrong website only!!!
Have you ever built and deployed a project successfully (without any errors) only to realize that the actual site, that you have built, does not show up?
This is exactly what happened when I recently built a Next.js site for a client. In this blog, I would like to share the issues I faced while managing custom domain and sub-domain configurations.
But first, some background:
1) It’s a Next.js site with SSR,
2) We used AWS Amplify to host it
3) DNS (earlier managed by some other third party) was transferred to Amazon Route 53.
The Next.js site was ready and deployed on AWS Amplify. It is an easy process and you can refer to the blog on the AWS site that gives you a step-by-step procedure for it:
To add the custom domain, you can refer AWS Amplify Hosting User guide:
Both these links, (guide and blog), give you detailed and easy instructions to follow. And you are done. But for me, that's when the other issues started.
Problem 1:
The custom domain, let's say, https://my-site.com was pointing to the correct site but, the sub-domain https://www.my-site.com displayed some other site altogether.
At first, I did not get where the page was coming from (as it was not what I had built). My first thought was that maybe, the DNS is incorrectly configured.
A little about DNS:
DNS: The domain name system (DNS) is a naming database in which Internet domain names are located and translated into Internet Protocol (IP) addresses. The domain name system maps the name people use to locate a website to the IP address that a computer uses to locate that website.
ANAME: It is a record at the root level. An ANAME points the root of your domain to an IP address.
-Source: Google
There are many tools available online for DNS lookup. I came across a website called ‘mxtoolbox’.
I did a DNS lookup on it, but the ANAME and IP address was correct.
Another tool I used to check and verify the source of this site was a Chrome extension: DNS checker.
It showed the Server as Cloudfront and that's when I realized, that this must have been an older React website deployed earlier on Cloudfront.
Situation: There was an old React site, deployed on Cloudfront. The existing website was on WordPress and newly built Next.js site is deployed on AWS Amplify
As this was an older site, and, no longer required, we decided to delete it from Cloudfront. The procedure for deletion (it is called deleting a distribution) is fairly simple. You can refer to its documentation here.
And that disabled the old site, but, a new issue arose.
Problem 2:
The custom domain https://my-site.com was working correctly but now the sub-domain https://www.my-site.com had started showing a 403 certificate error: DNS_PROBE_FINISHED_NXDOMAIN
Since we had deleted the Cloudfront distribution, the sub-domain could not find a valid certificate. We had configured the CNAME in AWS Amplify for the sub-domain, so we decided to re-confirm it once again.
A Canonical Name or CNAME record is a type of DNS record that maps an alias name to a true or canonical domain name. CNAME records are typically used to map a subdomain such as www or mail to the domain hosting that subdomain’s content. — Source Google
The CNANE was correctly configured, but still it showed the certificate error.
NAME TYPE VALUE
-----------------------------------------------
www.my-site.com. CNAME my-site.comAfter doing a little research, I came across Amplify user guide for Custom domain management. It states, Amplify automatically creates two subdomain entries for your custom domain i.e. https://www.my-site.com https://my-site.com with a redirect set up from the root domain to the www subdomain.
But in my case, only one subdomain was configured i.e. https://my-site.com So, we manually added the sub-domain https://www.my-site.com to it.
The client wanted the sub-domain, https://www.my-site.com, to be re-directed to the main domain https://my-site.com. So I configured the same in the Rewrites and Re-directs page.
There are 4 types of re-directs that we can configure:
- 200 — Rewrite: The page content is replaced with the destination page. The URL does not change
- 301 — Permanent Redirect: The page is replaced and the destination URL is shown
- 302 — Temporary Redirect: Provides a temporary redirection. Can be used for fixing/updating pages
- 404 — Not Found: Used for invalid URLs
Here :
Source address: https://www.my-site.comDestination address: https://my-site.comType: 301 (As this is a permanent redirection)
And finally, that worked!
Let me know if you have faced issues like these, and what steps did you take to handle them.
If you liked this article, do view my portfolio at https://grishma.vercel.app
